title: Load More Posts Ajax Button in Woocommerce
body: <p>Attempting to integrate this nice <a href="http://madebydenis.com/ajax-load-posts-on-wordpress/" rel="nofollow">tutorial</a> from @dingo_d into a Woocommerce archive-product.php template.  Here's what I've got so far:</p>
  
  <p><strong>archive-product.php</strong></p>
  
  <p><em>Added $cat_id under get_header</em></p>
  
  <pre><code>get_header( 'shop' ); 
  $cat_id = get_query_var('cat');
  </code></pre>
  
  <p><em>Wrapped the loop with div</em></p>
  
  <pre><code> &lt;main id="main" class="site-main ajax_posts" role="main"&gt;
   &lt;?php woocommerce_product_loop_start(); ?&gt;
   ...
   &lt;?php woocommerce_product_loop_end(); ?&gt;
   &lt;/main&gt;&lt;!-- /#main --&gt;
  </code></pre>
  
  <p><strong>pagination.php</strong></p>
  
  <p><em>the template file being overridden by my theme with the woocommerce pagination commented out</em></p>
  
  <pre><code> &lt;div id="more_posts" data-category="&lt;?php echo esc_attr($cat_id); ?&gt;"&gt;&lt;?php esc_html_e('Load More', 'siiimple') ?&gt;&lt;/div&gt;
  
   &lt;!--&lt;nav class="woocommerce-pagination"&gt;
  &lt;?php
      echo paginate_links( apply_filters( 'woocommerce_pagination_args', array(
          'base'         =&gt; esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) ),
          'format'       =&gt; '',
          'add_args'     =&gt; false,
          'current'      =&gt; max( 1, get_query_var( 'paged' ) ),
          'total'        =&gt; $wp_query-&gt;max_num_pages,
          'prev_text'    =&gt; '&amp;larr;',
          'next_text'    =&gt; '&amp;rarr;',
          'type'         =&gt; 'list',
          'end_size'     =&gt; 3,
          'mid_size'     =&gt; 3
      ) ) );
  ?&gt;
   &lt;/nav&gt;--&gt;
  </code></pre>
  
  <p><strong>functions.js</strong></p>
  
  <pre><code>( function( $ ) {
  
  //LOAD MORE
  
  var $content = $('.ajax_posts');
  var $loader = $('#more_posts');
  var cat = $loader.data('category');
  var ppp = 3;
  var offset = $('#main').find('.post').length;
  
  $loader.on( 'click', load_ajax_posts );
  
  function load_ajax_posts() {
  if (!($loader.hasClass('post_loading_loader') ||      
  $loader.hasClass('post_no_more_posts'))) {
      $.ajax({
          type: 'POST',
          dataType: 'html',
          url: screenReaderText.ajaxurl,
          data: {
              'cat': cat,
              'ppp': ppp,
              'offset': offset,
              'action': 'mytheme_more_post_ajax'
          },
          beforeSend : function () {
              $loader.addClass('post_loading_loader').html('');
          },
          success: function (data) {
              var $data = $(data);
              if ($data.length) {
                  var $newElements = $data.css({ opacity: 0 });
                  $content.append($newElements);
                  $loader.removeClass('post_loading_loader');
                  $newElements.animate({ opacity: 1 });
                       $loader.removeClass('post_loading_loader').html(screenReaderText.loadmore);
              } else {
                  $loader.removeClass('post_loading_loader').addClass('post_no_more_posts').html(screenReaderText.noposts);
              }
          },
          error : function (jqXHR, textStatus, errorThrown) {
              $loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown);
              console.log(jqXHR);
          },
      });
  }
  offset += ppp;
  return false;
   }
  
   //LOAD MORE
  
  
   } )( jQuery );
  </code></pre>
  
  <p><strong>functions.php</strong></p>
  
  <p><em>Placed at bottom of functions.php</em></p>
  
  <pre><code> // LOAD MORE
      $ajaxurl = '';
      if( in_array('sitepress-multilingual-cms/sitepress.php', get_option('active_plugins')) ){
      $ajaxurl .= admin_url( 'admin-ajax.php?lang=' . ICL_LANGUAGE_CODE );
      } else{
      $ajaxurl .= admin_url( 'admin-ajax.php');
      }
      // END LOAD MORE
  
  
      wp_localize_script( 'twentysixteen-script', 'screenReaderText', array(
          'expand'   =&gt; __( 'expand child menu', 'siiimple' ),
          'collapse' =&gt; __( 'collapse child menu', 'siiimple' ),
  
          //LOAD MORE
          'ajaxurl'  =&gt; $ajaxurl,
          'noposts'  =&gt; esc_html__('No older posts found', 'siiimple'),
          'loadmore' =&gt; esc_html__('Load more', 'siiimple')
          // END LOAD MORE
   ) );
  
   //LOAD MORE
   add_action('wp_ajax_nopriv_mytheme_more_post_ajax',  'mytheme_more_post_ajax');
   add_action('wp_ajax_mytheme_more_post_ajax', 'mytheme_more_post_ajax');
  
   if (!function_exists('mytheme_more_post_ajax')) {
  function mytheme_more_post_ajax(){
  
      $ppp     = (isset($_POST['ppp'])) ? $_POST['ppp'] : 3;
      $cat     = (isset($_POST['cat'])) ? $_POST['cat'] : 0;
      $offset  = (isset($_POST['offset'])) ? $_POST['offset'] : 0;
  
      $args = array(
          'post_type'      =&gt; 'product',
          'posts_per_page' =&gt; $ppp,
          'cat'            =&gt; $cat,
          'offset'          =&gt; $offset,
      );
  
      $loop = new WP_Query($args);
  
      $out = '';
  
      if ($loop -&gt; have_posts()) :
          while ($loop -&gt; have_posts()) :
              $loop -&gt; the_post();
  
              $category_out = array();
              $categories = get_the_category();
              foreach ($categories as $category_one) {
                  $category_out[] ='&lt;a href="'.esc_url( get_category_link( $category_one-&gt;term_id ) ).'" class="'.strtolower($category_one-&gt;name).'"&gt;' .$category_one-&gt;name.'&lt;/a&gt;';
              }
              $category_out = implode(', ', $category_out);
  
              $cat_out = (!empty($categories)) ? '&lt;span class="cat-links"&gt;&lt;span class="screen-reader-text"&gt;'.esc_html__('Categories', 'twentysixteen').'&lt;/span&gt;'.$category_out.'&lt;/span&gt;' : '';
  
              $out .= '&lt;article id="post-'. get_the_ID().'" class="'. implode(' ', get_post_class()) .'"&gt;
                          &lt;header class="entry-header"&gt;';
                      $out .= '&lt;h2 class="entry-title"&gt;&lt;a href="'.esc_url( get_permalink() ).'" rel="bookmark"&gt;'.get_the_title().'&lt;/a&gt;&lt;/h2&gt;';
                  $out .= '&lt;/header&gt;'.
                      '&lt;/article&gt;';
  
          endwhile;
      endif;
  
      wp_reset_postdata();
  
      wp_die($out);
    }
   }
   //END LOAD MORE
  </code></pre>
  
  <p>That's it.  Don't think I'm missing anything...Thanks!</p>