Woocoomerce - Added code below but the page is not rendering uniformly

Hi there,
I added the code below suggested to fix spacing issue on woocomerce product page. While it does fix the issue some of the products are not loading uniformly. See attached photo

Thankyou very much for your time

Site: www.ussolarpumps.com


You can add this code to fix your issue, it would override your custom CSS code that is rendering.

Add this code under X/Pro—>Theme Option —>CSS

.woocommerce ul.products[class*=columns-] li.product:nth-child(2n), .woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
float: left !important;
clear: none !important;
}

[class*=woocommerce] ul.products.columns-4 li.product {
width: 22%;
clear: none;
margin: 0 3% 9.25% 0 !important;
}

Hello @Ralphmyes,

Thanks for writing in!

Your code is incorrect. It only created another issue. Please REMOVE it for now so we can check the shop index and guide you with the correct code instead.

Best Regards.

ok I removed the code below that themeco gave me… could you take a look and send new code please. Thanks. Ralph

.woocommerce ul.products[class*=columns-] li.product:nth-child(2n), .woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
float: left !important;
clear: none !important;
}

[class*=woocommerce] ul.products.columns-4 li.product {
width: 22%;
clear: none;
margin: 0 3% 9.25% 0 !important;
}

Hello, @Ralphmyes,

I checked your shop page, it seems that your products are not aligned properly because of your custom CSS code and some of your product titles is huge and creating extra height since height is not the same between all the products because of that it is creating miss alignment in product placement.
To get rid of this issue please add this custom CSS code under X/Pro —>Theme Option -->CSS

.post-type-archive-product.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
clear: none !important;
margin: 0 3% 9.25% 0 !important;
}
.post-type-archive-product.woocommerce ul.products[class*=columns-] li.product:nth-child(2n), .woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
float: none !important;
clear: none!important;
display: inline-flex !important;
} 

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

thankyou I appreciate it and it works GREAT

You are most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.