Change the ‘x’ close iconto a Trash can icon

I want to change the ‘x’ close icon to a trash can icon
When a product is added to the cart.
How can I do this, as shown in the image?

This Picture

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

.woocommerce-mini-cart .remove:after {   
    content: "\f126" !important;
    font-size: 15px !important;
}

Then, Navigate to Theme Settings > Typography > Icon fonts and change the content code.

Best Regards,

Hello, Aizaz Imtiaz Awan

I tried it, but it’s not showing a trash can icon.

Hello,

You can change the close icon using a custom Unicode character in Theme Settings > Typography > Icon Fonts. If you want a different icon, you can update the content code from there.

If you have a specific trash icon, You can download a trash can icon, upload it to the Media Library, and apply the following CSS to replace the default close icon with an image:

.woocommerce-mini-cart .remove {
    background: url("YOUR_IMAGE_URL_HERE") no-repeat center center !important;
    background-size: contain !important;
    display: inline-block !important;
    width: 40px !important; /* Adjust size as needed */
    height: 40px !important; /* Adjust size as needed */
    text-indent: -9999px; /* Hides the default 'X' */
    border: none !important;
}

Upload the trash can icon to the Media Library.
Copy the image URL and replace “YOUR_IMAGE_URL_HERE” in the CSS.

Add the CSS to Theme Settings > Custom CSS > Global CSS.

Best Regards,

[Author]

Posts