Replace Cart and Wishlist icon globally

Hey! We want to replace the cart and wishlist icons.

We were able to do it on the header, and we were able to replace the wishlist icon in the product grid using CSS, but we are not able to replace the cart one.

We used this CSS for the wishlist icon replacement:

body .wd-action-btn.wd-wishlist-btn > a:before {
    content: "";
    display: inline-block;
    width: 14px; /* Adjust size as needed */
    height: 20px;
    background-image: url('#');
    background-size: contain;
    background-repeat: no-repeat;
    font-family: unset; /* Reset Font Awesome */
}

However, when using the same, it doesn’t work properly. Also, we might need to use a different icon for desktop and mobile, because on desktop the background of the button is black (so the icon needs to be white) and on mobile is the other way around.

Please let us know if you need more information. Thanks!

Hello,

Send me access so I can check how you have changed this icon – https://prnt.sc/D9eFMXDUG6Vl

Also, there is a separate area for mobile devices in Theme Settings -> Custom CSS, use it to set another color icon for mobile devices.

I await your response.

Kind Regards

Hey Luke, I was able to accomplish it using CSS, thanks! We can close this one.

Hello,

I am glad to hear that you have managed to resolve the issue with the CSS adjustments. If you have any further questions or need additional support in the future, please feel free to reach out.

Kind Regards

[Author]

Posts