Home › Forums › WoodMart support forum › Change Cart icon and Color

Change Cart icon and Color

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 22, 2018 at 11:37 am #34727

    newsprince
    Participant

    Hello.

    Is it posible to change the icon of hover product? Instead of a cart icon to show a bag icon?

    Also is it posible to change color of the bag when a user add a product to cart?

    I attach a screenshot to show you.

    Thank you.

    January 22, 2018 at 11:55 am #34732

    newsprince
    Participant

    Also change the Cart icon from the sidebar

    https://prnt.sc/i3vqc4

    January 22, 2018 at 1:41 pm #34770

    Artem Temos
    Keymaster

    Hello,

    Try to add the following code snippet to the Custom CSS area in Theme Settings to change the icon

    div.product-list-item .woodmart-add-btn>a:before, 
div.woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small) .woodmart-add-btn>a:before, 
div.woodmart-hover-button .hover-mask>a:before, 
div.woodmart-hover-info-alt .product-actions>a:before, 
div.woodmart-hover-quick .woodmart-add-btn>a:before, 
div.woodmart-hover-standard .btn-add>a:before,
div.quick-shop-wrapper .single_add_to_cart_button:before, 
div.cart-widget-side .widget_shopping_cart .empty:before,
p.cart-empty:before{
		content: "\f120";
}

p.cart-empty:after {
		margin-left: -22px;
    top: 92px;
}

div.cart-widget-side .widget_shopping_cart .empty:after {
		margin-left: -14px;
    top: 52px;
}

    Unfortunately, it is not possible to show a different icon for products that are added to the cart.

    Regards

    January 22, 2018 at 3:26 pm #34802

    newsprince
    Participant

    Thank you very much. It works BUT on

    Hover on product: Tiled

    It show the old cart icon. Can you provide me a fix with that option also?

    January 22, 2018 at 3:51 pm #34810

    Bogdan Donovan
    Keymaster

    Replace previous code with code snippet below:

    div.product-list-item .woodmart-add-btn>a:before, 
div.woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small) .woodmart-add-btn>a:before, 
div.woodmart-hover-button .hover-mask>a:before, 
div.woodmart-hover-info-alt .product-actions>a:before, 
div.woodmart-hover-quick .woodmart-add-btn>a:before, 
div.woodmart-hover-standard .btn-add>a:before,
div.quick-shop-wrapper .single_add_to_cart_button:before, 
div.cart-widget-side .widget_shopping_cart .empty:before,
p.cart-empty:before,
div.woodmart-buttons .woodmart-add-btn > a:before {
		content: "\f120";
}

p.cart-empty:after {
		margin-left: -22px;
    top: 92px;
}

div.cart-widget-side .widget_shopping_cart .empty:after {
		margin-left: -14px;
    top: 52px;
}

    Regards

    January 23, 2018 at 8:54 am #34924

    newsprince
    Participant

    Thank you very much!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Change Cart icon and Color’ is closed to new replies.