White Gap between Products when reaching infinite scroll area

Hello @decalvibes,

It seems it’s a cache issue, if you have any cache plugin or server cache(LiteSpeed: CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, in Elementor, please don’t forget to click on the regenerate all assets file and data in Elementor > Tools; and finally use hard-refreshing keys and recheck the issue.
To refresh the page, please follow the steps explained in this link:
https://www.documate.org/automation/what-is-a-hard-refresh-how-to-do-a-hard-refresh-in-any-browser/
https://www.usmobile.com/blog/how-to-do-a-hard-refresh-on-your-browser/
Win: Ctrl+Shift+R
Mac: Shift+Command+R

If it wasn’t cached, then you can put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(min-width:1024px) {
    .woocommerce #wrap .count-1,
    .woocommerce #wrap .col-1,
    .woocommerce #wrap .col.first {
        clear: unset !important;
    }
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope that helps.
Best Regards

@skalanter

DUUDE! You’re awesome!
Your CSS Snippet fixed it!

Thank you so much!
Br, Alex

@skalanter

ahh unfortunately its just looked like solved. The white gaps are now on different position, for example at the top of some archive pages like: /damen

Do you have any further idea? I’ve deactivated the caching plugins and also regenerated elementor assets. The issue still exists, so it seems not be be a caching issue.

I am looking forward to hearing from you soon.
Many thanks in advance!

Br, Alex

Hello @decalvibes,

Please use the following CSS instead of the previous one:

@media(min-width:1024px) {
    .woocommerce.term-55 #wrap .count-1,
    .woocommerce.term-55 #wrap .col-1,
    .woocommerce.term-55 #wrap .col.first {
        clear: unset !important;
    }
}

This CSS will work only for the /kinder/ page — updated only for this category(https://postimg.cc/DS3jQDTq).

After that, please check other pages, and if you see other pages with this issue, please let us know, and I’ll update the CSS.

Please note that this issue may occur if the value of Shop Posts Per Page on your page is incompatible with Shop Columns. For example, if shop posts per page are 6, then the shop column should be 3. Screenshots: https://postimg.cc/gallery/bbvdKHR.

Furthermore, since I fully examined the issue and didn’t see it on my end, perhaps the plugin conflicts caused this issue, for troubleshooting, please do the following steps and let me know the results:

0. Enable the primary theme(if you are using a child theme).
1. Head over to WP Dashboard > Plugin.
2. Deactivate all plugins.
3. Then, first, activate the Ocean Extra plugin.
4. Check your issue.
5. Then, activate your plugins one by one
6. After activation of any plugins, check your issue

I hope it helps.

Best Regards

Hi @skalanter

thanks for your efforts again!
I can confirm that the issue just exsists if the following setting is activated:

Customizer – WooCommerce – Archive – “Show Categories & Products” and “Show Subcategories & Products”

My shop posts per page are set to 12 and the columns to 3. So if the settings above are set to “just show products” it’s all fine. Until I am displaying the products together with the categories at the archive pages – AND the number of categories doesn’t complete a row:

At the picture above you can see two categories. One category is missing to complete a row. And exactly this missing category is forcing the products to be no more in a 3×12 constellation. The one product “Herren Hoodie Kapuzenpullover Premium” at the top is exactly the amount of white gaps at the bottom (endless scroll area)

Can you reproduce the issue? The problem seems to be that the option “Shop-Posts per Page” does not include the categories. Together with the categories there are namely more than 12 Posts shown at one page.

But I am not sure right now if WooCommerce itself need to do any changes here. What do you think?

Br, Alex

Hello @decalvibes,

Thanks for reaching out and letting us know.

We did see this happening on our end, so we’ll share this topic with the developer team, and it will be fixed/improved for the next updates.

I appreciate your patience until the issues are resolved.
Let me know if there’s anything else I can help with in the meantime.

Best Regards