Return to previous page

Cart icon - by pocornell - on WordPress WooCommerce support

This topic has 12 replies, 3 voices, and was last updated 7 years, 10 months ago ago by Robert Hall

pocornell

Participant

June 21, 2016 at 18:56

How do we change the cart icon to a cart instead of a bag?

How do we display the number of products on the cart/bag icon?

#130521 Copied Theme version: 1.6

11 Answers

Eva Kemp

Support staff

June 22, 2016 at 11:23

Hello,

Please show your site page.

Regards,
Eva Kemp.

#130606 Copied

pocornell

Participant

June 23, 2016 at 00:08

.

Please, contact administrator
for this information.

#130745 Copied
Eva Kemp

Support staff

June 23, 2016 at 11:00
Hello,

To display the number of products on the cart/bag icon go to Theme Options > General > Header Settings > Cart widget design > select “Animated White”.

You can use Font Awesome icon to change cart icon. Add this code in Global Custom CSS:
```
.cart-design-2 .shopping-cart-widget .cart-bag::before {
    content: "\f07a";
    font-family: FontAwesome;
    color: white;
    font-size: 20px;
}
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number {
    background-color: transparent;
}
.cart-design-2.design-white .cart-bag::before {
    border-color: transparent;
}
.cart-design-2.design-white .cart-bag .badge-number::before {
    box-shadow: none;
}
```
Regards,
Eva Kemp.
#130815 Copied
pocornell

Participant

June 23, 2016 at 17:50

The shopping cart displays now, but it is covering the number of items in the cart.

#130882 Copied
Eva Kemp

Support staff

June 23, 2016 at 17:58
Hello,

Please also use this css code:
```
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number {
    display: none;
}
```
Regards,
Eva Kemp.
#130889 Copied
pocornell

Participant

June 24, 2016 at 14:58

That worked, but, we’d like it to display only the number of items in the cart instead of the total dollar amount. Is this possible?

#131002 Copied

Eva Kemp

Support staff

June 24, 2016 at 15:51

Hello,

Unfortunately it can’t be done. Sorry.

Regards,
Eva Kemp.

#131012 Copied

pocornell

Participant

June 24, 2016 at 17:15

But the total number of items displays without this CSS:
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number {
display: none;
}

How do we move the number of items so it doesn’t cover the shopping cart?

#131023 Copied
Eva Kemp

Support staff

June 24, 2016 at 17:38
Hello,

In this case you may use this css code:
```
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number {
  right: 16px;
}
```
Regards,
Eva Kemp.
#131027 Copied
pocornell

Participant

June 24, 2016 at 21:26

Thank you.

#131046 Copied

Robert Hall

Support staff

June 25, 2016 at 07:14

Hello,

You’re welcome!

Regards,
Robert Hall

#131056 Copied
Viewing 12 results - 1 through 12 (of 12 total)