Woocommerce Navbar Cart Icon

Support
#1

Hello all,

I’m wrapping up a website for a client that involves a store through Woocommerce. This is my first time using Woocommerce in conjunction with X Pro, so forgive me if the solution is simple and I am somehow missing it.

The problem I’m having is the cart icon displaying only as a solid box on the navbar (save the homepage header). I know there multiple options for the cart icon layout; I’m wanting to display the shopping cart icon only. – From the header builder the cart icon displays normally, however, on the rest of the site, it won’t display properly no matter the option selected in the customizer. The customizer provides the options to change the colors of both the inside and outside of the cart icon, but in this case, they don’t seem to be functioning independently. If I change the opacity of the cart icon on any parameter, I can begin to see that the standard icon is there (pictured), but once fully opaque, it is lost (pictured).

Any help would be much appreciated!

#2

Hi there,

Thanks for posting in.

Maybe it’s CORS related issue and the icon library is not properly loading. Would you mind providing your site’s URL? I like to check the console to confirm the issue. If it’s, then you may need to change some URLs that triggering this issue.

Thanks!

#3

Hey,

Thanks for the quick reply. The site isn’t live yet, but you can take a look at: storybook.flywheelsites.com

Thanks!

#4

Hi There,

Instead your CSS rules, try adding the following CSS rules and adjust colors accordingly.

.x-cart {
    background-color: gray;
    border: 1px solid gray !important;
}

Then it should display as follows.

Hope that helps.

#5

Hi,

I tried the CSS you suggested, and it does display like your screenshot when in the customizer, but the actual site displays as pictured. It still seems the background is the only thing I can edit whether with CSS or the customizer. I can make it fully transparent, but the cart icon disappears as well.

#6

Hello @rmounts,

Can you please try using following CSS instead and let us know how it goes:

.x-cart i.x-icon-shopping-cart {color: #fff;}

Thanks.

#7

That works great! Thanks so much!

#8

You’re welcome!

#9

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