How can I change the color or image of the cart icon on mobile view?

I added a screenshot of the icon I want to personalize. I want to know how to change this icon image and also how to change the background color and icon color on mobile view.

If possible I would like to know both ways of changing or modifing the cart icon on mobile view.

Thanks in advance.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

To change the icon:

.wd-add-btn-replace .add-to-cart-loop:before {
    content: "\f123";
    font-family: "woodmart-font";
}

To change the background:

.wd-hover-quick .wd-add-btn>a {
    box-shadow: var(--btn-shop-box-shadow);
    background-color: red;
}

Best Regards

I tried both CSS codes and they are not working.

I have both codes on the mobile sections of CSS.

Update.. This CSS is working as expected.

.wd-hover-quick .wd-add-btn>a {
box-shadow: var(–btn-shop-box-shadow);
background-color: red;
}

I still can’t change the cart mobile icon with this CSS:

.wd-add-btn-replace .add-to-cart-loop:before {
content: “\f123”;
font-family: “woodmart-font”;
}

Thanks in advance.

Hello,

You need to change the icon content to your desired one.

You can select icons from the following link:
https://fontawesome.com/v5/cheatsheet

Best Regards

Thanks.. how can I change the color of any of this icons?

That would be my last question on this topic.

Hello,

You are Most Welcome

To change the color try adding the following Custom CSS.

.wd-add-btn-replace .add-to-cart-loop:before {
color: red;
}

Best Regards

Maybe I’ll ask for more assistance on this later.. let’s close this old topic.

Thanks

Most Welcome 🙂

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts