Customize product grid widget

Hello support team,

I would need some help to customize Xtemos “Products (grid or carousel)” widget please.
I am working on custom css, but I don’t achieve to find how to remove borders between the buttons below the product title (as shown on the screenshot below). Could you help me find the right css for that please?

Also, I would like to change the color of the price tag, currently in white, but same I don’t find the right css. I have tried the following ones:
.product-rating-price OR .priceOR .wrapp-product-price OR .woocommerce-Price-amount OR .amount or .woocommerce-Price-amount, .amount `{
color: black;
}`
Can you please help me with that as well?

You’ll find below admin access and link to the widget.

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

1. In order to remove borders between the buttons, please enter the below code to the “Global Custom CSS” area that is in Theme Settings -> Custom CSS.

.product-grid-item.wd-hover-base .wd-bottom-actions.wd-add-small-btn>div:not(:empty)+div:not(:empty) {
    border-style: none;
}

2. This one custom code will help you to change the color of the price.

.wd-products-element .product-grid-item .price > .amount {
    color: #333;
}

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

Great, all works perfectly.

Thank you Luke!

I talked too quickly…

For #2, I added this css directly to the widget (I selected the widget > Advanced > Custom CSS) and it has impacted the price color of all the website : I set it transparent, and now all prices are transparent on the website.
Isn’t possible to apply that to this widget only?

Thank you

Hello,

In this case, remove the old code and try the below one, enter it into the “Global Custom CSS” area (Theme Settings -> Custom CSS).

.wd-dropdown-menu .wd-products-element .product-grid-item .price > .amount {
    color: #333;
}

Kind Regards

It works well now, thank you very much Luke.

Glad that everything is sorted out!

In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts