Jetpack Infinite Scroll “load more” button doing weird things in Woocommerce

  • Resolved Polarize

    (@polarize)


    6 years, 11 months ago

    In the Jetpack settings for Infinite Scroll there’s an option for loading more posts with a button. In Woocommerce, the button displays as “Older Products” (regardless of sorting, I might add–Sort by price: Low to high–additional products aren’t OLDER). Using the default theme Twenty Sixteen (because Twenty Seventeen doesn’t support Jetpack infinite scroll for whatever reason) without any customization, the pagination in Woocommerce is still visible, with the “Older Products” button beneath it. Clicking through pagination works as it should.

    But here’s where it gets weird: The OLDER button does not load products in a continuous grid. They are loading as posts, with a title, image, description, and a link to leave a comment, all in a single column below the paged Woocommerce products. Not only that, but in some instances it’s in a completely different order, and ALL of the products listed above are now listed again. When I have it sorted from Newest, they are, at least, in the correct order. Sorting them from Low to High orders them from oldest to newest, and High to Low orders them from newest to oldest.

    That’s really weird, but now there’s a bigger problem: When I select the option to load more posts as the reader scrolls–Infinite Scroll–the OLDER button disappears and the product posts load automatically, in the same bizarre fashion. The Woocommerce pagination is still visible, and the products are still in a tidy grid that can be viewed with the pager. The Infinitely scrolling mess at the bottom is not even PART of that equation. It is using its own format, its own sorting order, and it is almost completely ignoring anything that has to do with Woocommerce.

    I have disabled all the plugins that I could without breaking the entire website.

    Woocommerce version is 3.0.5

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    6 years, 11 months ago

    Twenty Seventeen doesn’t support Jetpack infinite scroll for whatever reason

    You’ll be happy to hear that it’s in the works!

    here’s where it gets weird: The OLDER button does not load products in a continuous grid. They are loading as posts, with a title, image, description, and a link to leave a comment, all in a single column below the paged Woocommerce products.

    Could you let me know how the products are displayed on the page? Did you use a specific shortcode to display those products on a page?

    If you’d like you can also post a link to a site where you experience the issue here, so I can take a closer look at the problem.

    Thanks!

    Thread Starter Polarize

    (@polarize)

    6 years, 11 months ago

    The shop page being displayed for this issue is the default shop page at /shop/. There is no shortcode or page configuration used, as the content of the page is automatically generated by WordPress. Unfortunately, I can’t leave it this way without loading an Under Construction front end, so I’m afraid looking at it during normal operation wouldn’t help much. The site is normally running a highly customized theme. Right now it is set to leave functionality up to the theme until infinite scroll works reliably. The theme’s pager works as designed, so there’s no issues with the production site. I would just like to get the Jetpack Infinite scroll working correctly. Since the odd behavior persists in an unmodified WordPress theme, I know the weird button and loading behavior are not related to the custom theme.

    In WordPress settings(reading), the “Blog pages to show” is set to the same number as the syndication feed. It doesn’t matter what number it is, I’ve tried a bunch of them. As far as I can tell, Woocommerce is using one of these to decide how many items to show per page. When I change the setting to Infinite Scroll in Jetpack, the Infinite Scroll setting also appears in the WordPress settings(reading). For the Twenty Sixteen theme, the number of posts loaded changes to 7, but the paged value stays the same. The Woocommerce pager uses the paged item value and reloads the page to show another grid of additional items per page. The Infinite Scroll setting doesn’t seem to affect this behavior, and apart from the goofiness happening beneath it, this seems like it’s working as well as any normal pagination should.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    6 years, 11 months ago

    Thanks for the extra details!

    In my tests WooCommerce’s shop page doesn’t support Infinite Scroll by default. Did you manually enable Infinite Scroll support on the shop page, with the infinite_scroll_archive_supported filter maybe?

    Thread Starter Polarize

    (@polarize)

    6 years, 11 months ago

    I haven’t enabled or disabled anything with code, if that’s what you’re asking. When I tried the YITH Infinite Scroll plugin, I was able to target the correct pagination value and the infinite scrolling in Woocommerce worked fine, but the plugin caused some weird formatting bugs in one of the admin areas (NOT the first YITH plugin to do that), so I removed it.

    The point being that Infinite Scroll in Woocommerce does work in 3.0 with the correct implementation, but apparently not Jetpack’s implementation. I just assumed Jetpack supported Woocommerce, but if that’s incorrect I will mark this as solved. I was trying to avoid installing yet another plugin that would do the same thing, because these plugin incompatibility issues are becoming tedious, but it’s possible that can’t be avoided.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    6 years, 11 months ago

    Thanks for the extra details!

    I haven’t enabled or disabled anything with code, if that’s what you’re asking.

    This is odd, as Infinite Scroll should not be triggered in Twenty Sixteen when on the shop page. It isn’t triggered in my tests either. I’m not quite sure why it is triggered on your end. By default Infinite Scroll should only be available on your home page, on category and tag archive pages, and on search result pages. Enabling it on other pages requires some code changes.

    In general, Infinite Scroll doesn’t work out of the box; themes need to declare support for it to work, as explained here:
    https://jetpack.com/support/infinite-scroll/

    If you’d like to add support to your own theme, you could look at how other WooCommerce themes do it. Here is how it’s done in StoreFront, for example:
    https://github.com/woocommerce/storefront/blob/master/inc/jetpack/class-storefront-jetpack.php

    The OLDER button does not load products in a continuous grid. They are loading as posts, with a title, image, description, and a link to leave a comment, all in a single column below the paged Woocommerce products.

    This usually happens because the function used as the render parameter when declaring Infinite Scroll Support does not take the proper grid layout into account. When declaring support in your own theme, you would have to make sure that function loads the template file used to display a single product in that grid, so it can be repeated over and over as the reader scrolls down the page.

    This can get a bit trickier with custom layouts like Masonry. Here is a post that explains things in details:
    https://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

    Could you give that a try in your own theme, and let me know if it helps?

    Thread Starter Polarize

    (@polarize)

    6 years, 11 months ago

    I’m not really sure where the disconnect is, because the issue here isn’t really about getting Infinite scrolling working in Woocommerce or any issues I had with the custom theme. It worked just fine when I used a different plugin. It has more to do with the weird way in which Jetpack was attempting to accomplish it. It sounds to me like Jetpack’s infinite scrolling just isn’t designed to work with Woocommerce.

    No worries. I was hoping I wouldn’t have to, but I guess I’ll just have to go ahead and install a different plugin that can handle Woocommerce.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    6 years, 11 months ago

    Jetpack’s Infinite Scroll definitely doesn’t work out of the box, without making changes to your theme. The other plugin you used before might not require any changes, but Jetpack does; without specifying how each Infinite Loop should work thanks to the add_theme_support( 'infinite-scroll' ); call, Jetpack’s Infinite Scroll won’t work well on your site.

    We make some of those changes for some of the default themes like Twenty Sixteen, but the implementation then only works for pages where the loop is standard, and doesn’t involve custom template files to render items, like WooCommerce.

    If you don’t want to make any changes to your theme, it’s consequently best if you look for a different plugin as you suggested; you might be able to find Infinite Scroll plugins that are especially built for WooCommerce stores!

    I hope this clarifies things a bit.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Jetpack Infinite Scroll “load more” button doing weird things in Woocommerce’ is closed to new replies.