Product Grid View – Product Spacing

I want to add a 10px space between the category product gridview images and apply a 1px border.

I have my grid columns set to display x4 columns. When for instance I add a 10px right margin to increase space between the products, I lose a product from the row and I only then have x3 columns.

Whats the correct way to do this. I do not want to use the bordered grid admin option as there is no space between the image borders…

Attachments:

You must be logged in to view attached files.

I would like similar to the tiled layout option to add bordered spacing between products but with the buy it now button showed also…

Hello,

Unfortunately, the HTML structure does not allow the application of both border and gap as shown on your screen.

You can set the gap and border in the Theme Settings > Product Archives > Product Grid /Product Style.

When you set the gap and border, this gap would be inside the bordered grid site.

Best Regards

[IanB]

Managed to acheive this using the standard button on hover setting and some css edits.

.woocommerce div.product {
background-color: #ffffff;
border-color: rgba(245, 245, 245, 1);
border-style: solid;
border-left-width: 15px;
padding-bottom: 13px;
}

😀 with a little will power and persistence..

• This reply was modified 2 years, 8 months ago by IanB.

Hello,

The code you provide does not ensure the effect you show on the screen. In any case, we are glad you have found the solution.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts