Change color of icon menu mobile and banner notice

Good morning, I would like to know please how I can change the color of the menu icon in the mobile version (the one with the three lines).
I would also like to know how I can change the color of the warning banner in the cart. I created, by adding in the functions.php file, warnings relating to the minimum purchase of products and how much is left to reach free shipping. I changed the banner color from “theme options”, but I would like to set a different color in one of the two banners. How can I do?

Attachments:

You must be logged in to view attached files.

Hi juan1234,

Thanks for reaching to us.

1. Hamburger icon color

Add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile

.wd-tools-element > a {
    color: #fff;
}

2. Warning message

Add below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS

.woocommerce-cart .cart-content-wrapper .woocommerce-error:last-of-type,
.woocommerce-cart .cart-content-wrapper .woocommerce-error:last-of-type span.amount{
 color: #000;
}

Regards,

To the warning message i would like to change the background color of the banner, not the text. How can i do?

Hi juan1234,

So, please remove previous CSS code of #2 and use below one.

.woocommerce-cart .cart-content-wrapper .woocommerce-error:last-of-type{
 background-color: #000;
}

Regards,

Good morning, I have another question. How can I set the size of notification banners this way? That is, with the same width and the text center justified.

Attachments:

You must be logged in to view attached files.

Hi juan1234,

Add below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS

.woocommerce.cart-content-wrapper .woocommerce-error,
.woocommerce.cart-content-wrapper .woocommerce-message,
.woocommerce.cart-content-wrapper .woocommerce-info{
	min-width: 800px;
}

.woocommerce.cart-content-wrapper .woocommerce-error li p,
.woocommerce.cart-content-wrapper .woocommerce-message li p,
.woocommerce.cart-content-wrapper .woocommerce-info li p{
	margin-bottom: 0;
}

Regards,

ok thanks.
And for justify the text to the center?

furthermore, the green bar does not appear to be aligned with the other two (see screenshot attached)

Attachments:

You must be logged in to view attached files.

Hi juan1234,

Remove previous and use below one

.woocommerce.cart-content-wrapper .woocommerce-error,
.woocommerce.cart-content-wrapper .woocommerce-message,
.woocommerce.cart-content-wrapper .woocommerce-info{
	min-width: 800px;
}

.woocommerce.cart-content-wrapper .woocommerce-message{
	display: block;
	padding: 20px 0;
}

.woocommerce.cart-content-wrapper .woocommerce-error li,
.woocommerce.cart-content-wrapper .woocommerce-message li,
.woocommerce.cart-content-wrapper .woocommerce-info li{
	text-align: center;
}

.woocommerce.cart-content-wrapper .woocommerce-error li p,
.woocommerce.cart-content-wrapper .woocommerce-message li p,
.woocommerce.cart-content-wrapper .woocommerce-info li p{
	margin-bottom: 0;
}

Regards,

Good morning, I have the last two questions.

1) still regarding the banners in the cart section, how can I make sure that the green banner is aligned with the other two, both in terms of margin and width? I would also like to change the order of these banners, for example from top to bottom I would like the order to be like this: green, yellow, red.

2) on the product page is it possible to insert another button besides add to cart, which takes you to another page created specifically? For example, a button that says “private negotiation”, clicking there opens a page with a contact form

Attachments:

You must be logged in to view attached files.

Hi juan1234,

1. Use below Custom CSS

https://prnt.sc/aAwfrxRGUcD-

.woocommerce.cart-content-wrapper .woocommerce-error,
.woocommerce.cart-content-wrapper .woocommerce-message,
.woocommerce.cart-content-wrapper .woocommerce-info{
	min-width: 800px;
	text-align: center !important;
}

.woocommerce-cart .row>.woocommerce-notices-wrapper{
	width: auto !important;
}

.woocommerce.cart-content-wrapper .woocommerce-message{
	display: block !important;
	padding: 20px 0 !important;
}

.woocommerce.cart-content-wrapper .woocommerce-error li p,
.woocommerce.cart-content-wrapper .woocommerce-message li p,
.woocommerce.cart-content-wrapper .woocommerce-info li p{
	margin-bottom: 0;
}

/* Change messages orders */
.woocommerce-notices-wrapper{
	display: flex;
	flex-flow: column;
}

.woocommerce-notices-wrapper .woocommerce-message{
	order: 1;
}

.woocommerce-notices-wrapper .woocommerce-error:last-child{
	order: 2;
}

2. In order to do that, you can use Custom Single Product layout, then use Button widget to add custom url.

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Regards,

good morning, sorry, I have two more questions. The first, still regarding the notification banners on the cart page, when I get the wrong coupon discount code warning, is it possible to change the color and set it to red? What can I do then? (I attach screenshots).

Still on the cart page, I would like to change the “free shipping” wording and make it green, is this possible? Thank you

Attachments:

You must be logged in to view attached files.

Hi juan1234,

1. Coupon warning message

Use below Custom CSS

.woocommerce-cart .cart-content-wrapper .woocommerce-error:last-of-type{
 background-color: #000;
}

2. Please make sure you synced the strings first before translating WooCommerce, WoodMart Core plugins and WoodMart theme. You can refer to article https://xtemos.com/docs-topic/theme-translation/

In order to change free shipping method, use below Custom CSS

label[for="shipping_method_0_flexible_shipping_single5"]{
	color: #fff;
}

Regards,

Hi,

For me copy that in CSS Mobile in theme option doesn’t work.

.wd-tools-element > a {
color: #1B3D6D;
}

I tried with .wd-tools-icon neither

Any solution please ?

Hi dynamo-models,

Please submit your own topic, then I can take a look and give you better replies.

Regards,

[Author]

Posts