Shopping Cart Items

Support
#1

Hi there,
On my site dylanhbrown.com/storefront, I have two problems.

I would like to change the text and background of the item count, so that the text is Gray and the background is white. How could I achieve that?

Secondly, I would like to remove “ITEMS” from the cart, and only have it show the number of items in the cart, next to the cart icon. Or even have the number of items be slightly superimposed over the top right corner of the cart. How could I accomplish that?

Thanks for the help!

#2

Update: I’ve gotten the background and text changed but I can’t quite figure out the hover. It is still showing as gray background and white text on hover, and I would like it to just changed to a darker gray on hover but I can’t quite get the css right. This is what I have. What do I need to change?

.x-navbar:hover .x-nav:hover > li.x-menu-item-woocommerce:hover > a:hover .x-cart > span.outer:hover {
color: rgb(125, 125, 125);
background-color: #ffffff;
}

I would also still like to remove “Items” or have the item count superimposed over the cart. How can I achieve that?

Thank you!

#3

Hi @powrider686,

To do that, please add this code in the Global JS:

var s = jQuery('.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer').text();
s = s.substring(0, s.indexOf(' '));
jQuery('.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer').text(s);

As for the hover, please use this selector:

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart > span.outer {

}

Here are some related links for further reading:

Hope this helps.

#4

This didn’t quite work it seems, nothing changed with how the cart items are displayed. I can’t identify the problem. How might I update it?

The hover worked great!

Thank you!

#5

Hi,

You can try this code instead.

jQuery(window).on('load', function($) {
   var s = jQuery('.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer').text();
   s = s.substring(0, s.indexOf(' '));
   jQuery('.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer').text(s);
});

Hope that helps

#6

That did the trick. Thank you!

#7

You’re welcome, @powrider686.

#8

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