Change the text inside this circle to a Shopping cart icon

I would like to Change the text inside this circle to a Shopping cart icon.
Is there a way to do that?

Thank you

Change the text inside this circle to a Shopping cart icon

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

Thanks for reaching to us.

+ In order to change / translate words. Please make sure you synced the strings first before changing / translating WooCommerce, WoodMart Core plugins and WoodMart theme. You can refer to article

https://xtemos.com/docs-topic/theme-translation/
https://xtemos.com/docs-topic/how-to-make-woodmart-multilingual-with-wpml/

+ You are also need to select the language for the backend and theme settings for admin from the admin user profile, please edit the user’s profile and then select the language for that user it will show the same on the backend.

+ Some strings related to Wishlist / Compare / Login & Register page, you can change in Theme Settings > Shop or Theme Settings > My account https://prnt.sc/W8Tt95stG3YC

Regards,

HELLO, Hung Pham

I don’t need to translate the language, I can translate it already
But I want to replace the words ‘add to cart’ with a cart or basket icon.

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

Yes, as I mentioned, you can use Loco Translate plugin to change words as well.

Regards,

Hello Hung Pham

Are there any other methods?
Because the shopping cart emoji I’m using requires me to add CSS to adjust the size, position, and color of the image on each page.

I don’t think this is as efficient as using the Unicode \f123, which slows down the website.
Could you please provide me with an alternative, or perhaps a screenshot of how to implement it?

Thank you.

Log in ..

Hi kruajeng,

I see you changed text to icon, please confirm me back if you the way.

Regards,

Hello, Hung Pham

I’m not very satisfied with this emoji because when I open it on a computer, it displays differently than on a tablet or a mobile phone. It’s not possible to set any CSS for it.
I was wondering if you could help me modify the icon from the button above to replace it.

.wd-header-cart .wd-tools-icon:before {
content: “f\123”;
font-family: “woodmart-font”;
}

Hi kruajeng,

Thanks for details.

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

div.wd-product.wd-hover-standard .wd-add-btn .add-to-cart-loop span {
    font-size: 0;
    width: 40px;
}

.wd-add-btn-replace a.add-to-cart-loop:before {
    transform: translateY(0);
}

Regards,

Hello, Hung Pham

Thank you for the CSS I requested.
However, Add the Cart Emoji icons on all the Single Product Pages, for example this URL: https://kruajeng.com/product/baby-tomatoes/,
Have not changed with the previous CSS.
I would appreciate it if you could please double-check.

L o g i n ..

Hello, Hung Pham
But the problem isn’t over.
There’s a CSS issue on mobile phones and tablets,
Where the ‘Add to Cart’ icon in the bottom right corner is being cut off.
I think there should be a solution for this. Could you please log in and fix it for me?
This problem has been going on for several days, and I think that’s too long to fix such a minor issue.

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

1. Single product icon

Please use below code:

button.single_add_to_cart_button {
    font-size: 0;
}

button.single_add_to_cart_button:after {
    content: "\f123";
    font-family: "woodmart-font";
    opacity: 1;
    font-size: 15px;
    border: 0;
}

2. Mobile cart icon

Please double check, it is showing fine https://ibb.co/HLpZMn2Q

Regards,

Thank you

Hi kruajeng,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts