Customizing Product Grid in Shop

Hi,
I am trying to customize my shop page. I want a border arround each product cart, but as the card overlaps in the demo version, I need add space between them. I am using the following code:

.product-grid-item{
background:#fff;
border-radius:0px;
	border: 1px solid red;
margin:10px;
box-shadow:0 0 5px rgba(0,0,0,0.1);
padding-bottom:15px;
padding-top:15px;
}

Here are my requests:
1) How can I hide the border on hover so the boder cannot be seen after a user hovers on the product card?

2) Currently I want to show 3 products per each row. However, adding space between the columns causes the third product jumps to the next line, i.e. now I have 2 products per row.
How can I fit 3 product per row with this new customization?

Thanks.

Hello,

1) You need to make the margin 0px if you want to display them in the 3 columns.

2) To Remove the border on hover Please try and add the following Custom CSS.

.product-grid-item:hover {
border: none;
}

Best Regards.

Thanks Aizaz. But Is there any way to make the grid width smaller or increase the width of the page to fit 3 columns while keeping the margin ar 10px?

Hello,

You are Most Welcome.

You can try setting the number of columns to 4 from Theme Settings >> Shop >> Product Grids.

Screenshot for Clarification: https://ibb.co/dK0wPnF

Best Regards.

Changing the number to 4 makes three columns show up but those of off-center. The right side of my page has empty space for another column!

I am wondering if really there is no solution to make the grid a little bit smaller so all three can fit into a row? is there a way to reduce the size to 90% or something similar? You helpo is very much appreciated.

Actually I loved the size of the grid when I selected 4 columns option as you suggested. Is it possible to really reduce the size of the grid in 3 column option, so the grids appears smaller? that would also solve my problem.

Hello,

Please set the number of columns to 3 and Add the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS to reduce the size of the product grid item.

.product-grid-item {
max-width: 31.33%;
}

Best Regards.

Excellent. Problem solved. I knew you could get this right.

Thanks so much.

WOuld you also let me know how I slign the grid center as it is now smaller and left a white space on the right side? I have tried multiple CSS but none worked. Not sure what I am missing.

And One major issue: The percentage 31.33% applies to all other grids and make them out of shape. For example all related product and product carrosel in the menu are now very small. Is there any way that this percentage only applies to the grid in the shop page?

Hello,

If you want the CSS styling you described to work only on the shop page you need to add the following Class with the CSS .woodmart-archive-shop.

For example the CSS for the product Grid width will be like this:

.woodmart-archive-shop .product-grid-item {
max-width: 31.33%;
}

For the white space on the right side please provide with the screenshot and URL of the page to check it myself and help you out accordingly.

Best Regards.

Hi Aizaz,
Thanks for your assistance. I applied the new code and changed the percentage to 30.8% and now the grid fits the content width and there is no longer a white empty space on the right side.

But, the code did not solve the scaledown issue with other parts. for example the related product section in my product page and also product carrosel in the menu are scaled down and compressed to a smaller size. Please see the attached images.

Bests.

Attachments:

You must be logged in to view attached files.

The product grid now looks like the attached image.

Attachments:

You must be logged in to view attached files.

is there any other way to achieve this style in product grid without messing up with other elements? I have attached another image.

currently I am using the following code:

body .product-grid-item{
background:#fff;
border-radius:0px;
	margin:15px;
box-shadow:0 0 1px rgba(0,0,0,0.5);
padding-bottom:15px;
padding-top:15px;
}
body .product-grid-item:hover {
border: none !important;
box-shadow:none !important;
}

.woodmart-archive-shop .product-grid-item {
max-width: 30.8%;
}

Attachments:

You must be logged in to view attached files.

Hello,

You need to add the class .woodmart-archive-shop with the CSS you are using and the code will look like:

.woodmart-archive-shop .product-grid-item{
background:#fff;
border-radius:0px;
margin:15px;
box-shadow:0 0 1px rgba(0,0,0,0.5);
padding-bottom:15px;
padding-top:15px;
}

.woodmart-archive-shop .product-grid-item:hover {
border: none !important;
box-shadow:none !important;
}

.woodmart-archive-shop .product-grid-item {
max-width: 30.8%;
}

This code will not affect the homepage. But it will work the same on the product page and the shop pages and will also affect the related products items as well.

Best Regards.

Hi Aizaz,
Exactly what you said is the main issue. it works the same way on the product page and shop page with the menu and related product and squeezes them out of proportion. My question was how I could prevent that from happening?

bests,
Amir

Hello,

This is not an issue.

The CSS is affecting the related products, because the related products are coming there from the default shop page.

Sorry but you cannot change the behavior.

Best Regards.

Aizaz,
I defined a new class only for shop page in my function.php, so the change would not affect my product page and home page in any way. And then used .wpb_column class to take care of the grid in the menue. Problem solved.

Thanks for your continued assistance so far.

Regards.

Hello,

You are Most Welcome.

We are Glad that you found the solution to your problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts