Product grid style (Hoover – Round – Background – space)

Hi, support,

I am looking to give my product grid a specific look, but I can’t add the final touch to it.

I would like it to be with a white background, rounded, with shadow on hoover and space between product grids.

Please see examples in the attachment.

Attachments:

You must be logged in to view attached files.

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :).

I saw the screenshot you attached.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.product-grid-item {
    margin-left: 25px;
    max-width: 22%;
}

.product-grid-item:hover {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

Regards.
Xtemos Studios.

Hi,

Thanks for your reply. I’ve added it but unfortunately, nothing happened.

Could you take a look in the back office?

regards

Hello,

Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Hi,

I finally found the right grid, thanks for your help.

I have two last questions:

– Concerning my related product grid, they obviously are impacted by the code. Can I have a CSS code to make them look normal not shred? (see photo below)

– Additionally, I would like to know how to remove this gap between the bottom of my page and the footer? (another screenshot below)

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

I saw the screenshots you attached.

1) For the related product issue try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.single-product-page .woodmart-carousel-container .product-grid-item {
    margin-left: 10px;
    max-width: 100%;
}

And there is no space displayed as you mentioned it seems that you have managed to remove it.

Regards.
Xtemos Studios.

Hi,

thanks for your prompt answer. For the Related products, the issue is 90% fixed except in the cart, the section you might be… still shows reduce product grid.

As for the other issue, it seems like it happens not on the homepage but on the new pages that I’m created and building with the WC Bakery.

regards.

Attachments:

You must be logged in to view attached files.

Hi again.

I have an issue on mobile, seems the piece of CSS isn’t working. (screenshots below)

Regard,
Geoffrey

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios

Hey,

Please check info below on private content.

Hello,

Your issue has been resolved. Now that CSS is working for both desktop and mobile.

Please clear cache and check back.

And for the space issue try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.footer-sidebar {
    padding-top: 0px;
}

Regards.
Xtemos Studios.

[Author]

Posts