Products on the category page are displayed incorrectly(broken layout, quantity)

[kchabanov]

Hello SwiftIdeas,

I have a problem displaying my products on a category page, which I can’t solve without your help.

A have created ~50 test products on my website in category ‘Woman’ and created a shop page for that category to displaye these all products.

When I open this page – I can see the following issues on it:

1) If you browse bettwen the pages (like 1st page, 2nd page, 3rd page) you’ll see big gaps between the products. Some lines have one product on it, some have three. I can’t get what is causing this issue and can’t fix it.

http://awesomescreenshot.com/0755705w33

I’ve tried to browse in the forum, but didn’t find similar questions. So I would really appreciate your help with it.

2) On the top of the page I can see that there are several options how many products to show on the page: 24, 48 or all. But on my page – it is always set to 10. I always see 10 products on a page, regardless if it is a default view or I choose any of the options on the top of the page. How can I fix that?

3) After I go on the 2nd, 3rd or any other page – I see that the ‘View 24/48/All products’ widget on the top get’s brokend and displayed incorrectly. What could cause that?

http://awesomescreenshot.com/0f45705z8b

I’d appreciate your help very much, since I’got stuck with it and can’t fix.

Thank you.

[David Martin – Support]

Hi,

1)

What browser and device are you using?

2)

Can you update the parent theme. Once updated, please update the child theme WooCommerce files with the newly updated files from the parent theme.

3)

Mostly related to 1) & 2).

Let me know once this is completed.

Thanks,
David.

[Paweł M.]

Hi,

I had the same problem when i update the theme and wocommerce – what helped? In my case i update all WPML plugins to the newest version that I use to translate.

Problem-with-the-displaying-a-products-on-the-home-page

[David Martin – Support]

Thanks @mondertnt, hopefully this will help others!

– David.

[kchabanov]

Hi David,

I’ve made everything you stated. Woocommerce, wordpress and neighborhood – all of these are updated to the latest versions now, but the problem is still there. Shop page and the products on it aren’t displayed correctly.

Please, let me know where should I look at to fix it.

Thank you.

[kchabanov]

I’m playing with products diplaying in a widget on a home page and noticed almost the same issue.

Products are displayed in the wrong order. If I set the widget to display 6 products, 5 of them are displayed in the first column, and only 1 – in a second column.

http://awesomescreenshot.com/08f57pf482

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the url where you took this last screenshot?
Thanks

-Rui

[kchabanov]

Hi Rui,

Here’s the page’s url:

http://kchabanov-001-site1.hostbuddy.com/home/home-example-two/

[kchabanov]

Hi again. Any ideas how to fix it?

[David Martin – Support]

Hey,

This is tricky for that particular layout requirement and would involve some custom CSS:

.product_list_widget li.type-product:nth-child(odd) {
    margin-left: 0!important;
}

Thanks,
David.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (min-width: 1200px) {
body .has-no-sidebar .products-mini.span4 ul.products li.product{
margin-left:0px !important;
}
}

Thanks
Mohammad

[kchabanov]

Hi again.

Thanks a lot for your help, guys.
I still have problems #2 and #3 unresolved. 🙁 Do you have any ideas what could cause that problems.

Thank you

[David Martin – Support]

Hi,

First, please update the parent theme: http://kchabanov-001-site1.hostbuddy.com/wp-admin/themes.php.

Can you also disable all plugins apart from WooCommerce?

– David.

[kchabanov]

Hi, David.

Thanks for your help and reply. I did updated the theme earlier as per your advice and it didn’t help. Though when I disabled all the plugins – the problem disapeared. So it was caused by a plugin. I was able to determine which plugin was that and replace it.

Now the shop page looks fine. And thank you again for pointing me to the problem spot.

Though I found one more problem with the products widget (the one that guys from the techsupport helped me to fix in this topic). I managed to make it to be displayed correctly on the main page. But when I added it in the sidebar and added it to the page (for example F.A.Q page here) – it is still displayed in one long column.

I think there’s something wroing with this widget. Could you pleashe help me to fix it?

Thank you.

[Rui Guerreiro – SUPPORT]

Try to add the code below.

@media only screen and (min-width: 1200px){
  body .has-one-sidebar .products-mini ul.products li.product {
    width: 100%!important;
    margin-left: 0px!important;
  }
}

-Rui