Hey Guys.
I created an e-shop with woocommerce and the problem is that in different browsers and computers, I get different product displays, with two or four columns:
http://postimg.org/image/pw90srhhb/
http://postimg.org/image/6piczh5kx/
I prefer the four column layout. I added the “WooCommerce Product Archive Customiser” hoping that this would solve my issue and set the columns to four, but I still get very same results. I have also emptied all caches, just in case.
Is there a chance that this is being caused by the theme defaults? Could you help me to short this out?
The website link is http://cv4you.gr/ and the e-shop page is http://cv4you.gr/shop/
Thank you in advance!
Hi Maria
You can try a few options under Appearance > Custom CSS:
This will push the Woo container to 100% width:
/* WooCommerce 100% width container */ .woocommerce-page #container { width: 100% !important; }And this will center the Woo container, applicable if you don’t use the above selector:
/* WooCommerce center container */ .woocommerce-page #container { float: none !important; margin: 0 auto; }Let me know if there is any change.
Hi Andrew.
Thank you for your reply.
I tried both options but they do not affect the number of columns. I have the feeling that the default columns number is set to four, but in most browsers and computers the page pushes the last two products to the next raw. Is there a way to reduce the column-gap in the e-shop page without affecting the rest of the site?
Thank you.
Here is the selector affecting this area:
/* WooCommerce Products */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: left; margin: 0 3.8% 2.992em 0; padding: 0; position: relative; width: 22.05%; margin-left: 0; }You can adjust the width and margin. If you make a change add the !important hack. E.g: width: 15% !important;
I have just found out that the 4-column-perfectly-aligned layout is displayed when I am logged in the wp-dashboard. When I log out, I get the 2-column-not-well-aligned layout, that I hate.
I played with the above selector and the changes took place only on the browser that was logged in the wp-dashboard. When I logout, the changes disappear.
Is this normal?
No that’s not normal. Custom CSS get’s added to your website’s
and is not logged in status dependent. Just make sure you add !important to the properties you edit to override the values already there. Try clearing your browser cache. If you’re running a performance plugin on the site you’ll need to clear that cache too.Andrew, you are a star!
I added !important to all the declarations of the code above and did some changes in the minify options of the performance plugin and everything works fine.
Thank you so much!
Super, glad you were able to resolve. Thanks for sharing.
All the best.