Custom WooCommerce Cart colors in Navbar

Support
#1

Hi there,

I’m working on https://jackslawn.com/ and trying to get the Woocommerce cart, border and “1 item” background to be a custom color in the left side navigation area. I’ve determined the CSS for the cart icon is
.x-cart i.x-icon-shopping-cart {color: #50B0E1;}
}

but I cannot figure out how to change the border color and background on the # of items. Can you please help? Running latest version of theme, WP and plugins.

Thanks!
Dawn

#2

Hello Dawn,

Thanks for writing in!

To resolve your issue, you use this custom css instead:

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart {
    color: yellow;
    background-color: red;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart {
    color: green;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer {
    color: blue;
    background-color: gray;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart > span.outer {
    color: orange;
    background-color: purple;
}

I have used different colors so that you can easily identify the changes. Feel free to change the colors so that it will fit with your site’s color scheme.

If you need anything else we can help you with, please let us know.

#3

Worked perfectly!! Thank you!!

#4

You are most welcome. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.