1

I am trying to get Jetpkack's infinite scroll to work with the WooCommerce product archive template.

I have added the following code to my theme, after installing Jetpack, and I do see the sticky footer that shows when infinite scroll is enabled, and I see it loading default seven products instead of normal output, which leads me to assume the infinite scroll function is firing:

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'init', 'mytheme_infinite_scroll_init' );
function mytheme_infinite_scroll_render() {
    //get_template_part( 'loop' );
    wc_get_template_part( 'content', 'product' );
}

The normal online tutorials say to use

get_template_part('loop');

inside the render function to have infinite scroll work. But since I am trying to get this to work not for normal posts, but for WooCommerce specifically, I peak inside the archive-template.php file inside /woocommerce/templates and see what I assume they are using to display this product archive section of the page:

<?php
/**
* woocommerce_shop_loop hook.
*
* @hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
?>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>

Looking at this file, I see:

wc_get_template_part( 'content', 'product' );

So when I paste this inside my infinite scroll render function:

function mytheme_infinite_scroll_render() {
        wc_get_template_part( 'content', 'product' );
    }

I still do not get it to work.

Interestingly enough, when I go into /woocommerce/templates/archive-product.php and comment out the wc_get_template_part( 'content', 'product' ); part of the file, I do see the infinite scroll loader icon. But of course no products since that part is commented out.

I am posting this question to see if anyone has an idea of what I am missing here. I see the sticky footer so I know this infinite scroll is firing, but I guess my problem is figuring out which line of code to use inside

0

The problem lies in the 'container' => 'content'.

The container parameter is the core of adding infinite scroll to your theme: it specifies the ID of the HTML element to which infinite scroll should add additional posts to.

You need to add ID ( for example: product-wrapper ) to products wrapping element which is going to be new value for container parameter.

'container' => 'product-wrapper'

This wrapping element is <ul class="products">, which is found in woocommerce/templates/loop/loop-start.php file. So just add ID to it <ul id="product-wrapper" class="products">.

This means that you need to edit this file. Best practice for this is to add woocommerce folder to root of your theme, and take what ever file you need to edit from woocommerce/templates folder. This method overwrites woocommerce default file.

Be careful to follow file path exactly like in woocommerce/templates, in your case it's going to be woocommerce/loop/loop-start.php inside your theme root folder. The path is basically the same except for exclusion of templates in your theme path.

This method protects the file from being overwritten by woocommerce update, and you have overview of files that you edited inside woocommerce.

So your function should look like this:

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'product-wrapper',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}

This part you got right: wc_get_template_part( 'content', 'product' ); that will get you list of products from products loop.

There's a detailed explanation about every parameter of Infinite Scroll here: https://jetpack.com/support/infinite-scroll/

Hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.