Home › Forums › WoodMart support forum › Change the text inside this circle to a Shopping cart icon

Change the text inside this circle to a Shopping cart icon

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 28, 2025 at 9:29 am #641585

    kruajeng
    Participant

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

    Thank you

    February 28, 2025 at 9:29 am #641586

    kruajeng
    Participant

    Change the text inside this circle to a Shopping cart icon

    Attachments:
    You must be logged in to view attached files.
    February 28, 2025 at 1:26 pm #641734

    Hung Pham
    Keymaster

    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,

    February 28, 2025 at 7:48 pm #641880

    kruajeng
    Participant

    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.
    March 1, 2025 at 9:01 am #641933

    Hung Pham
    Keymaster

    Hi kruajeng,

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

    Regards,

    March 1, 2025 at 9:44 am #641941

    kruajeng
    Participant

    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.

    March 1, 2025 at 9:45 am #641942

    kruajeng
    Participant

    Log in ..

    March 2, 2025 at 11:49 am #642089

    Hung Pham
    Keymaster

    Hi kruajeng,

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

    Regards,

    March 3, 2025 at 5:07 am #642167

    kruajeng
    Participant

    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”;
    }

    March 3, 2025 at 9:55 am #642199

    Hung Pham
    Keymaster

    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,

    March 3, 2025 at 6:46 pm #642440

    kruajeng
    Participant

    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.

    March 3, 2025 at 6:49 pm #642441

    kruajeng
    Participant

    L o g i n ..

    March 3, 2025 at 7:00 pm #642449

    kruajeng
    Participant

    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.
    March 4, 2025 at 11:06 am #642577

    Hung Pham
    Keymaster

    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,

    March 4, 2025 at 1:08 pm #642640

    kruajeng
    Participant

    Thank you

    March 4, 2025 at 1:12 pm #642645

    Hung Pham
    Keymaster

    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
Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Change the text inside this circle to a Shopping cart icon’ is closed to new replies.