Topic: infinite scroll plugin conflict for woocommerce

huppap
July 4, 2023 at 9:54 am

Hi I am using this infinite scroll plugin from woocommerce

https://woocommerce.com/products/ajax-infinite-scroll/

I noticed two things being caused by this plugin when I use it.

1. Sort filter on collection pages becomes full width on “not mobile” device, otherwise it would be aligned right in a corner on bigger screens. On mobile it was full width, now it is full width everywhere.

2. whenever new products are loaded after clicking load more button, the add to cart button also shows, even though I have it set not to show on collection page.

I wanted to see if this is something you could help me with. I cant send the plugin files if needed.

Thank you.
Ying
July 4, 2023 at 10:21 am
Hi there,

Woocommerce pages are using Woocommerce’s templates, GP doesn’t interfere with that.

However, try adding this CSS to limit the sorting width:
```
@media(min-width: 769px) { 
.woocommerce .woocommerce-ordering {
    max-width: 250px;
}
}
```
Not sure how the buttons get there, there might be a conflict between GPP and the plugin.

You can try this CSS to hide it:
```
.woocommerce.archive ul.products li.product .button.add_to_cart_button {
    display: none;
}
```
Or this PHP filter to remove it:
```
function remove_add_to_cart_button() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'init', 'remove_add_to_cart_button' );
```
Let me know if you need further assistance on this 🙂
huppap
July 8, 2023 at 11:11 am

thank you Ying, I will test this all on staging site and update here if anything.
Ying
July 8, 2023 at 11:59 am

No Problem 🙂
huppap
July 8, 2023 at 12:29 pm

so I tried using jetpack’s infinite scroll and it created an issue.

I reached out to their support and they said generatepress is not compatible with the feature, otherwise it would work on collection page as well.

https://jetpack.com/support/infinite-scroll/

I wanted to see if it is the case at your end as well or maybe it is a known bug?
David
July 9, 2023 at 1:33 am
Hi there,

there isn’t anything that the Theme does that would stop JetPacks infinite scroll from working, and as you’re using Woocommerce its not really the Theme that gets involved here. As its the Woocommerce template that displays the list of posts.

In that plugins docs it says, you have to use add_theme_support and the container must be defined.
For the woo archives, that container is: products.

You can try this, or ask Jetpack to take a close look, as there should be no reason it does not work.
```
add_theme_support( 'infinite-scroll', array(
 'container' => 'products',
 'footer' => 'page',
) );
```
huppap
July 9, 2023 at 10:49 am

Hi Dave, thanks for the code. I wanted to see if this worked at your end? I tried this code, it solved the issue that I had before where all products would just load on same page. But this time infinite scroll or load more is not working. When I choose the option of loading items with theme’s default behaviour it works.
huppap
July 9, 2023 at 11:09 am
little update on this.

I used this code and it worked
```
add_theme_support( 'infinite-scroll', array(
 'type' => 'click',
 'container' => 'wc-column-container',
 'footer' => 'page',
) );
```
but issue now is instead of showing load more it is showing me older posts button. They have it mentioned in the their troubleshoot guide about this issue, which I do not quite understand.

I wanted to see if you could please help me with this.

on this page https://jetpack.com/support/infinite-scroll/ please scroll down to section where it says this.

I have Infinite Scroll set to Load more posts as the reader scrolls down, but instead it shows an “Older Posts” button.

my goal is to “Load more posts in page with a button” jetpack plugin seem to have that option but it does not seem to be respecting it.

Thank you.
Fernando
July 9, 2023 at 9:47 pm

Hi there,

It plainly mentions that you need to remove all Footer Widgets in Appearance > Widgets for their scroll feature to work.

If you have Footer widgets, try removing them, and adding them through a Block Element – hook instead. You can hook it to before_footer.

Then, go to Appearance > Customize > Layout > Footer and set the Footer Widget count to 0.

Alternatively, you can also try creating a Layout Element to remove all Footer Widgets: https://docs.generatepress.com/article/layout-element-overview/#footer

Hope it goes well.
huppap
July 14, 2023 at 2:20 pm
I tried this and it did not work, it was then solved by the code people from wordpress.com gave me.

I will leave it here, hoping it might help someone else.
```
function filter_jetpack_infinite_scroll_js_settings( $settings ) {
    $settings['text'] = __( 'Load more products.', 'i18n' );
    return $settings;
}
add_filter( 'infinite_scroll_js_settings', 'filter_jetpack_infinite_scroll_js_settings', 100 );
```
I was wondering if you could please help me style this load more product as in the screenshot.
Leo
July 14, 2023 at 2:22 pm

Thanks for sharing.

Please open a new topic for the separate question.

Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

infinite scroll plugin conflict for woocommerce