Change Cart icon and Color

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.

Also change the Cart icon from the sidebar

https://prnt.sc/i3vqc4

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

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?

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

Thank you very much!

[Author]

Posts