Load More page view

Hello Sitemakers01,

Try going to annasta Filters > Product Lists section of your WP admin, and set the Product columns to the needed amount of columns (3). Please click here for a more detailed article.

You could also try to adjust the Products per page value for the filters’ AJAX returns to be more in sync with your theme’s setting.

Here is another troubleshoot article discussing the possible ways of fixing AJAX pagination issues.

Hi,
Thank you for the suggestions, unfortunately, this did not resolve the matter.
I also removed the sidebar widgets to clean up the page, no help.
Noticed after filtering results also jumbled.

If I purchase premium can I get further assistance on this?
Would that be included or extra cost?
Thank you

Hello again Sitemakers01,

I am sorry to hear that setting the columns amount from annasta Filters > Product Lists hasn’t helped! This means that your theme doesn’t listen to the built-in Woocommerce variables that we use to set the columns amount for AJAX returns.

In a freely accessible theme we could perform a few tests to see if there was a way to fix this incompatibility issue, but unfortunately you seem to use a premium theme, so the only way for us to take a deeper look into the matter would be for you to cooperate with us. You are welcome to contact us through our contact form for instructions, there is no need to purchase a premium license for this.

Hi,
Thanks for the update, I will get in touch as you mention.

Hello Sitemakers01,

I have found this article on the Divi support site that seems to offer a simple solution to the shop columns incompatibility issue with the filters’ AJAX mode. Am posting it here for the other users of Divi theme to see.

In the case of your site, if you apply the 3-column CSS rules provided by the article to your page, it fixes the AJAX columns issue:

/* 3 columns on desktop */
@media all and (min-width:1024px) {
  [class*=woocommerce] ul.products li.product {
      width: 30.6%!important;
      margin: 0 3.8% 2.992em 0!important;
      clear: none!important;
  } 
  [class*=woocommerce] ul.products li.product:nth-child(3n) {
    margin-right:0px!important;
  }
  [class*=woocommerce] ul.products li.product:nth-child(3n+1) {
    clear: both!important;
  }
}

Add this to you child theme’s CSS rules, or any other place that allows you to add custom CSS. If you don’t know any such place, try our plugin’s Custom CSS option located in the annasta Filters > Styles tab.

Dear Sitemakers01,

I will mark this inactive thread as resolved, but please don’t hesitate to open another topic if you have any further questions about our filtering plugin!