Products not displaying properly

Hello,

I have issues with the products on the shop page and other places where they are listed with picture. Sometimes they are not lining up in rows and columns properly.

See here at the bottom of the page:
http://www.mybodysport.co.il/%D7%90%D7% ... %A9%D7%9F/

And here:
http://www.mybodysport.co.il/%D7%97%D7% ... AA/page/2/

Its almost like the image is too big or the excerpt is taking too much room on some products, so it drops the ones below down.

How can I fix this?

Thank you,
Sarah

Hi,

Please check your Storebox/gavern/wc-functions.php file, there are woocommerce_output_related_products() function - you can change number of products displayed in one row (use 3).

And regarding your second link: http://www.mybodysport.co.il/%D7%97%D7% ... AA/page/2/ I see fatal error, did you change something in overriden theme files?

The fatal error was not happening yesterday. I don't know why it is there...

Okay, You need to go to the main store here: http://www.mybodysport.co.il/%D7%97%D7%A0%D7%95%D7%AA/

Then go to page 2, you should see how the products jump down.

I did change some code:

In the woocommerce.css of the theme I changed this:

Code: Select all

.related ul.products li.product,
.related ul li.product,
.upsells.products ul.products li.product,
.upsells.products ul li.product {
   border: none;
   clear: none;
   float: left;
   height: auto;
   margin: 12px 0;
   padding: 0 24px;
   text-align: center!important;
   width: 24%!important;
}
ul.products li.product {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box ;
         box-sizing: border-box;
   float: left;
   margin-bottom: 40px;
   padding: 6px;
   position: relative;
   width: 33%;
}
.products ul:after,
ul.products:after {
    clear: both;
    content: "";
    display: table;
}
ul.products li.first {
   clear: both;
}
.product_meta {
   clear: both;
   color: #999;
   float: left;
   font-size: 13px;
   padding-top: 10px;
}

To this:

Code: Select all

.related ul.products li.product,
.related ul li.product,
.upsells.products ul.products li.product,
.upsells.products ul li.product {
   border: none;
   clear: none;
   float: right;
   height: auto;
   margin: 12px 0;
   padding: 0 24px;
   text-align: center!important;
                direction:rtl;
   width: 24%!important;
}
ul.products li.product {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box ;
         box-sizing: border-box;
   float: right;
   margin-bottom: 40px;
   padding: 6px;
   position: relative;
   width: 30%!important;
}
.products ul:after,
ul.products:after {
    float: right;
    content: "";
    display: table;
}
ul.products li.first {
   float: right!important;
}
.product_meta {
   clear: both;
   color: #999;
   float: right;
   font-size: 13px;
   padding-top: 10px;
                direction: rtl;
}

This was to get the products to show up properly with the site being right to left and some other adjustments. Please let me know if I did something wrong there. I also changed a few things in the WooCommerce css in the woocommerce plugin folder...

Thank you,
Sarah

Hello,

First of all, making own changes in woocommerce plugin (in wp-content/plugins) is always a bad idea.

You leave this fragment:

Code: Select all

.products ul:after,
ul.products:after {
    float: right;
    content: "";
    display: table;
}

in your code.

Try to also add this code:

Code: Select all

ul.products li.product:nth-child(3n +1) {
   clear: both!important;
}

I set the woocommerce.css file inside the WooCommerce plugin back to the original and I took out the extra code in the theme woocommerce.css and left what you said and added the new one you posted.

It has worked, except one issue is still not fixed.

On some pages of products when there are less than 3 in the last row, the page numbers jump up like pictured in the attachment (instead of being located below all the products.

How can I fix this?

Thank you

Try to add this code:

Code: Select all

.woocommerce-pagination {
clear: both;
}

That worked!

Thank you!

Hi,

I just found another error and this one has to do with the code you gave me:

Code: Select all

ul.products li.product:nth-child(3n +1) {
   clear: both!important;
}

See this page:
http://www.mybodysport.co.il/%D7%9E%D7% ... %99%D7%96/

The related products at the bottom of the page should be 4 and all in one row, but the 4th is jumping down.

Can I fix that without messing up the store and other product listing pages that have 3 to a row?

Thank you.

You already have a lot of overriden code on your website, but this one should works:

Code: Select all

.related ul.products li.product:nth-child(3n +1) {
   clear: none!important;
}

.related ul.products li.product:nth-child(4n +1) {
   clear: both!important;
}

That worked!

Thank you.