I’m trying to create a function that loads more products using Ajax request in Woocommerce. My idea is to create a button “Load more Products” that replace the woocommerce pagination and that loads the 2nd the 3rd etc pages using ajax request. I’ve created the script that create the load more button with the ajax request and it works, but I’m trying to create a php function that retrive the rest of the products using the ajax request.

Below my code to create the load more button:

    <?php 
    $max_num_pages = $wp_query->max_num_pages;
    if ($max_num_pages > 1) {
        $output .=
    '<script type="text/javascript">
    var page = 1,
    max_page = '.$max_num_pages.'
    jQuery(document).ready(function(){
    jQuery(".woocommerce-pagination").hide();
    jQuery("#woo_load_more").click(function(){
    jQuery(this).hide();
    jQuery("#spinner").show();
    jQuery.ajax({
         type: "POST",
        url: "http://demo.ecquadro.com/transport/wp-admin/admin-ajax.php",
        data: {
            action: "wooPagination",
            page: page+1,
            per_page: 4,
        },
        success: function(data, textStatus, XMLHttpRequest){
            page++;
             jQuery(".prova").append(data);
            jQuery("#spinner").hide();
            if (max_page > page) {
                 jQuery("#woo_load_more").show();
            }
         },
         error: function(MLHttpRequest, textStatus, errorThrown){
             jQuery("#spinner").hide();
             jQuery(this).show();
        }
        });
        });
        });
     </script>
     <div class="woo-products-load">
     <a href="javascript:void(0);" id="woo_load_more" class=""><span>'.__('Load More Posts', '').'</span></a>
     <img id="spinner" src="'.get_template_directory_uri().'/img/loader.gif" style="display: none;">
     </div>';
     }
    echo $output;
    ?>

Any idea how to create a function called “wooPagination” that load the rest of the pages?

Thanks in advance.

Read more here: Woocommerce create load more products with Ajax


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: