Woocommerce create load more products with Ajax

Question

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: ``` max_num_pages; if ($max_num_pages > 1) { $output .= '

Accepted Answer

The esiest solution would probably be to use the infinite-scroll script. You find it here http://www.infinite-scroll.com/

Make you do not delete the normal pagination from the HTML-output and then hook it up as follows(you probably need to change the selectors to fit your site):

```
var infinite_scroll = {
    loading: {
        //img: "/img/loading-animation.gif",
        msgText: '',
    },
    nextSelector: ".pagination a.next",
    navSelector: ".pagination",
    itemSelector: "#main-content ul.products .product-small",
    contentSelector: "#main-content ul.products"
};

//Unbind load more on scroll
$(window).unbind('.infscr');

//
$("#load-more-button").click( function() {
    $(document).trigger('retrieve.infscr');
});
```

Woocommerce create load more products with Ajax

Solution

Problem