AJAX and History API for the default wordpress pagination

What I want to achieve is AJAX-ified pagination for the WordPress archive/pages/posts etc meaning that I would like to keep the standard URL structure:


but using the combination of the History API and AJAX. Something like this:

// From the official History API docs // https://developer.mozilla.org/en-US/docs/Web/API/History_API  var stateObj = { foo: "bar" }; // this will be the pagination query or sth history.pushState(stateObj, "page 2", "bar.html"); 

Ajax Cross-sell optional extras below single product description

I really like this idea, I’ve taken a screenshot of a platform that isn’t Woocommerce, but ive seen it done before ( just cant find where ).

Whats the best way to accomplish this in the cleanest way here the add to cart button instantly adds the product to the cart, the optional extras should pull the cross-sells.

enter image description here

I was going to use something like this, and then style it into a list but there must be a cleaner way?

// Remove "related Products" remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );  // Show cross-sells using related template on single product page // see https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_related_products.html#1264-1296 function wc_output_cross_sells() {     $  crosssells = get_post_meta( get_the_ID(), '_crosssell_ids', true );      $  args = array(         'posts_per_page' => 2,         'columns'        => 2,         'orderby'        => 'rand',         'order'          => 'desc',     );     $  args['related_products'] = array_map( 'wc_get_product', $  crosssells );      // Set global loop values.     $  woocommerce_loop['name']    = 'related';     $  woocommerce_loop['columns'] = apply_filters( 'woocommerce_related_products_columns', $  args['columns'] );     wc_get_template( 'single-product/related.php', $  args ); } add_action('woocommerce_after_single_product_summary', 'wc_output_cross_sells', 30); 

Como Completar las Opciones de un Select con AJAX

estoy tratando de dar opciones a mi select al dar click en un boton, pero no me muestra. mi index es el siguiente:

<!DOCTYPE html> <html> <head> <title></title>    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>      <!--<script src="ss/code/highcharts.js"></script>-->      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js" ></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">   </head>  <script type="text/javascript">     function completa(){          $  .ajax({             data: "",             url:"opciones.php",             type:"POST",             success: function(vista){                 $  ("#complet_opt").html(vista);             }         });     }   </script>   <body> <button type='button' class="btn btn-info" onclick="completa();"> Modificar</button>     </br></br></br> <label style="color: #ff0000" >WEEK:</label>  <select class="form-control" name="week" id="week" > <option value="">Seleccione:</option> <div id="complet_opt" > </div> </select>  </body> </html> 

y de donde se traeran valores sera de opciones.php:

<?php  $  con = mysql_connect("localhost","root","");  mysql_select_db("mi_base",$  con);  $  consulta_semana= mysql_query("SELECT DISTINCT(week) as y FROM datos ");    while($  data= mysql_fetch_array($  consulta_semana)){   echo "<option value='".$  data['y']."' $  selected>".$  data['y']."</option>";    } ?> 

pero no se puede mostrar, que es lo que le falta?