You’ve got this CSS in your header:
.woocommerce ul.products li.product a img{ width:300px }
But I can’t tell if it’s coming from a plugin or a built-in theme option.
Thread Starter
ozosil
(@ozosil)
Yes, i did a costume CSS through the theme as the images were coming up at 100%, which was too big, so i had to change it to 300px. This created the margin I am now having problems with.
Any ideas .
Thanks
Right now, you’ve got the products displaying two per row, which means that each product takes up 50% of the available space. Since each product is larger than 300 pixels wide, you’re always going to have that margin. There are a couple of different ways to fix it, but it depends on how you want it to look.
Hi ozosil,
The reason is that Woocommerce is using the following CSS:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 48%;
float: left;
clear: both;
margin: 0 0 2.992em;
}
You are displaying two products per row. It occupies 48% of available space for a single product. Product image within li only 300 pixel wide. That’s why you are getting that margin.
As @stephencottontail told, there are couple of different ways to fix it and it totally depends upon your requirement.
Thread Starter
ozosil
(@ozosil)
Thanks Guys
Altho its still not working right, what I want it to do is diplay 4 products per row. I changed the width to 25% now it looks like this:
http://www.adjoaa.com/shop/
Thread Starter
ozosil
(@ozosil)
How do i change how many products to display in 1 row, I am trying to make it display 4, seems to only want to display 2.
Hi,
Take a look at woocommerce shortcodes page:
https://docs.woothemes.com/document/woocommerce-shortcodes/
For example, you can use below code to display 4 recent products per row.
[recent_products per_page="4" columns="4"]
-> Copy and paste codes in the post/page.
Thread Starter
ozosil
(@ozosil)
Thanks, but for some reason even using that shortcode, it only places 2 products per row, What could be causing this?