How to change colors of WooCommerce info bar to global Elementor colors

Experientially speaking, changing the colors of the WooCommerce info bar to global Elementor colors is a process that WordPress developers and designers often need. They need it every time they create an e-shop based on Elementor.

At the same time, this part of the job is not quite easy to do. WooCommerce and Elementor are now both undisputed leaders in their fields. But their development path has been divergent for a long time. Only with recent upgrades, starting with version 3.5 has Elementor Pro given the ability to make the appearance of the last two pages of the WooCommerce store – Cart and Checkout – customized directly in the editor. Instructions on how to do this can be found here (how to customize your cart page) and here (how to customize your checkout page). This allowed developers and designers to more easily match the look of these two pages with the look of the rest of the website.

However, the work does not end there. This is visible as soon as WooCommerce displays the first message at the top of the screen. The Global Elementor colors that you have so carefully specified in the Site Settings section, and which now color both the Cart and Checkout pages – are not valid at all on the WooCommerce info bar. 

Perhaps the theme you use gives you the ability to modify WooCommerce predefined colors through Customizer. It is also possible that you have installed some of the plugins that do this. But none of that has anything to do with global Elementor colors. Each time you change the colors in Elementor, you will also have to manually change the colors in WooCommerce. This is what we try to avoid with this guide.

Global Elementor colors – where to set and how to use them

Let's start with Elementor, which within its theme builder gives us the ability to define global colors. You can access the editor of Elementor's global colors by clicking on the hamburger icon in the upper left corner (when you are in Elementor editor) then on the Site Settings option, and then on the Global Colors option. This feature is available both in Pro and the free version of Elementor.

These global Elementor colors are available throughout the website as variables. Of all the global Elementor colors, the first four are predefined: Primary, Secondary, Text, and Accent:

The variables of these four global Elementor colors have the same name on all websites, so I will use them in this guide for that reason. Of course, in your work, you can use all the other colors that you have defined through Elementor's Site Setting option. You can get the name Elementor gave to the variables for your other colors from the browser, using DevTools (Chrome) or FireBug (FireFox).

The variable names for these four basic global Elementor colors are:

  • –e-global-color-primary
  • –e-global-color-secondary
  • –e-global-color-text
  • –e-global-color-accent

I believe it is immediately clear which variable is tied to which color.

In CSS, we can access the values of variables using the var() function. For example, if we want to get the value of a primary global Elementor color, we will use the expression var(–e-global-color-primary).

How do we change the colors of the WooCommerce info bar (and the code needed to do so)

First of all, we need to study the example we are working on in more detail. The example is realistic, taken from the Choco Concept Elementor kit.

Without customization, the information that the cart is updated looks like this:

woocommerce info cart updated - start

…and the information that the cart is empty with the button that returns to the Shop page looks like this:

Message: Your Cart is Currently Empty - before adding custom CSS.jpg

As you can see, the colors of these messages are quite different from the rest of the page and give a bad, unprofessional impression of the site.

The changes I want to make are the following:

  • The background of the information should be dark, the same as in the rest of the site (in this case, Accent), and the upper prominent border above the text of the message light brown (in this case, Primary).
  • The color of the symbol on the left side of the text should be the same as the color of the top border (ie Primary) and the color of the text itself should be standard (ie Text).
  • The button should have a light brown (Primary) background and dark (Accent) text. I also want to remove the default roundness of the corners of the WooCommerce button and make the colors of the buttons inverse when the mouse pointer hovers over them.

As I already mentioned, there is no way to do something like this by simply setting some parameters through the website dashboard. It is necessary to write a custom CSS.

By implementing custom code, I need to change the settings of several WooCommerce CSS classes:

  • WooCommerce info bar (.woocommerce-info)
  • WooCommerce message (.woocommerce-message)
  • WooCommerce button (.woocommerce a.button)

Finally, custom CSS code should look like this to execute the task as it is set up:

selector .woocommerce-message, selector .woocommerce-info {
    color: var(--e-global-color-text);
    border-top-color: var(--e-global-color-primary);
    background-color: var(--e-global-color-accent);
}

selector .woocommerce-message::before, selector .woocommerce-info::before {
    color: var(--e-global-color-primary);
}

selector .woocommerce a.button {
    color: var(--e-global-color-accent);
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px;
    border-radius: 0px;
    border-color: var(--e-global-color-accent);
}

selector .woocommerce a.button:hover {
    color: var(--e-global-color-primary);
    background-color: var(--e-global-color-accent);
    border-style: solid;
    border-width: 1px;
    border-radius: 0px;
    border-color: var(--e-global-color-primary);
}

Of course, this code is just a model for your further work. You are free to download and modify it according to your needs.

Note that this code is prepared for use in the Elementor editor, and therefore contains a tag selector. If you want to use this code directly in the theme (you might want this if you are using the free version of Elementor), you need to remove this tag.

And now, we still need to see how to apply the custom CSS code prepared in this way, for it to give the desired result.

How and where to place the prepared custom CSS code (in Elementor Pro)

This code should be placed wherever WooCommerce messages and information appear. Specifically, these are Cart and Checkout pages, as well as Elementor Theme Builder templates related to WooCommerce: Single Products and Product Archive. Of course, the Cart and Checkout pages are expected to have been previously edited in Elementor – otherwise, they are not available for adding custom CSS this way.

Whether it's a page or a template, custom CSS is added to Elementor Pro in the same way. First, you need to open the appropriate page or template with the Edit with Elementor option. In the very lower-left corner of the Elementor editor, there is a Settings icon in the form of a gear, which you need to click on. The custom CSS input field is located in the Advanced tab.

Field for entering custom CSS in Elementor Pro

When entering or copying pre-prepared code, you need to click the Update button to save the changes.

I suggest you first prepare a custom CSS code and test it on one of the pages, and then copy it to other locations. Note that this custom CSS code applies to the entire page, not to individual widgets in it. This is because of the way WooCommerce works. This is also the reason why this CSS code is added to a page or template, and not to some element inside.

The result: The WooCommerce info bar is then displayed in global Elementor colors

When all of the above is done properly, the WooCommerce info bar from our example should display like this:

WooCommerce info bar in global Elementor colors after activating custom CSS

The WooCommerce message bar and button to return to the shopping page are also displayed in global Elementor colors:

WooCommerce message bar in global Elementor colors

And finally, the same thing – but the button is in hover state:

WooCommerce message bar in global Elementor colors - hover state

Now you can change any of here used global Elementor colors in Elementor Site Setting. Those changes will immediately be automatically reflected in the WooCommerce info bar and the WooCommerce message bar.

When WooCommerce displays the first message at the top of the screen it becomes clear: global Elementor colors that you have so carefully specified in the Site Settings section are not valid at all on the WooCommerce info bar.

About the author

Obren Markov, Senior WordPress Developer and Elementor Expert

Obren Markov is a WordPress developer and designer with many years of experience in this field and several dozen created websites behind him. He is an Elementor Professional and the author of Template sets, who creates sites for end-users. Also works with agencies and independent WP designers as a subcontractor on their projects.

Basically about me

I’m Obren Markov, a senior WordPress developer, a qualified and university-educated IT professional accepted in Envato/ThemeForest as an Elementor template author and also in the Elementor Expert community.

I work directly for end users, but also for agencies and independent designers, complementing them in their projects.