Color change

Hello,

I would like to change the light grey color background in the Woocommerce pages (such as in the top bar and tabs of the product page and in other pages – screenshots in attach). Furthermore, I would like to change the black color in the top bar of the Cart widget (picture in attach).

Is it possible?

Thanks,
Giada – Giaco studio

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

Please add this code to the Theme Settings > Custom CSS > Global:

body .single-breadcrumbs-wrapper {
    background: red;
}
body .single-product-content .product-tabs-wrapper {
    background-color: yellow;
}

In order to change the border in the FAQ block, you will need to change the color or the column border https://prnt.sc/ptaamv

Code for the shopping cart sidebar:

body .cart-widget-side .widget-heading{
      background-color: green;
}

Code for the checkout page:

body .woocommerce-checkout .checkout-order-review {
    background-color: blue;
    background-image: none;
}

Best Regards

Hello,

thanks for your answer but the code for the checkout-order-review doesn’t work, the color is still light grey.

I’d like to change also other things:
– change the color in the compare page (1)
– change the color in the product page category label (2)
– move the 4th tab to the second place like in the 3th screenshot in attach

Thanks in advance for your help.

Regard,
Giada – Giaco studio

Attachments:

You must be logged in to view attached files.

Hello,

As soon as your site is on the live host I will be able to check the code for the checkout and correct. Now I check it in my side and it works https://prnt.sc/pw3pl8

Please add this code to change the color on the compare page:

body .basel-compare-row:nth-child(even) .basel-compare-col{
    background-color: red;
}

Here is the code for Categories:

body .product-design-alt .product_meta {
    background-color: red;
}

It is not possible to move the tabs with CSS, you will have to find a plugin or customize.

Best Regards

Hi,
I need to change other element’s colors. I changed some using Google Chrome to identify the CSS code but for some I couldn’t.
In attachment the screenshots:
Quick view 1 – I changed the color of the black button but I don’t know how to change it in the hover. I also would like to change the color of the black product title.
Quick view – I would like to change the color of the black “Quick view” label.
Checkout page – I would like to change the color of the light grey background.
Icona ricerca (Search icon) – I would like to change the color of the icon.

Regards,
Giada – Giaco studio

Attachments:

You must be logged in to view attached files.

Hello,

All the colors are set in the Theme Settings > Styles and colors. If you need to change a few elements then we can provide custom CSS.

Best Regards

Hello,

I was asking for the custom CCS because those elements can not be changed with che Theme settings.

Thanks,
Giada – Giaco studio

Hello,

You can change the font by means of Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

I think the last answer wasn’t for me because I didn’t ask support to change any font.
I need you to give me the custom CSS in order to change the color of the elements in the attachment files.
4 FILES:
Quick view 1 – I changed the color of the black button but I don’t know how to change it in the hover. I also would like to change the color of the black product title. I changed it in the product page but it doesn’t change in the “Quick view”.
Quick view 2 – I would like to change the background color of the “Quick view” label.
Checkout page – I would like to change the color of the light grey background.
Search icon – I would like to change the color of the icon.

Thanks,
Giada

Attachments:

You must be logged in to view attached files.

I’ having problems with the attachments file.
Below the other 3.

Attachments:

You must be logged in to view attached files.

I have to attach only one item at a time.

Attachments:

You must be logged in to view attached files.

Last file

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

1. Quick view

body .popup-quick-view .view-details-btn:hover {
	background-color: red;
}

2 Tooltip

body .basel-buttons .quick-view>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .quick-view>a:hover .basel-tooltip-label:before{
	color: red;
}

3. Checkout

.woocommerce-checkout .checkout-order-review {
    background-color: white;
    background-image: none;
}

4. Title in the quick view:

.popup-quick-view .entry-summary .entry-title {
    color: red;
}

The icon you show does not relate to our theme, I will be able to change it as soon as our site is live.

Best Regards

Thanks for the CSS custom codes.
Can you please tell me how to change the color of the “Add to wishlist” tooltip (Screenshot in attach)
I haven’t received the custom CSS regarding changing the background color of the Coupon section in the Checkout page (I sent the screenshot in the previous message “Check out page 3”).

Regards,
Giada

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label:before{
	color: red;
}

.woocommerce-checkout .checkout_coupon, .woocommerce-checkout .login.hidden-form {
    background-color: white;
}

Best Regards

Hi,
I add the custom CSS codes you sent me but the color of the Wishlist label tooltip doens’t change.
Do you have any suggest?
Regards,
Giada

Hello,

Try to replace the color with this one.

body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label:before{
	background-color: red;
}

Best Regards

Hello,

also these codes don’t work. Can you please help me with another custom CSS?

Regarding changing the color of the Search icon, you wrote me:
“The icon you show does not relate to our theme, I will be able to change it as soon as our site is live.”
The icon is the Basel DEMO and if you need I can give you the credentials to enter to my staging area because the website is under construction.

Regards,
Giada

Hello,

Try once more https://prnt.sc/rgr8b4

body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label:before{
background-color:	red;
}

.woocommerce-checkout .checkout_coupon, .woocommerce-checkout .login.hidden-form {
    background-color: white;
}

Clean your cache.

Best Regards

[Author]

Posts