Where can I change the icons in the product picture?

Please look at the attached screen – red arrows

Where can I change the color, content and shape of these icons. I can’t find it in settings

Attachments:

You must be logged in to view attached files.

Hello,

You can find all basic options for product labels in Theme Settings -> Shop -> Product labels. You can turn them on and off and also change their style from there.

Please let me know if you need anything else!

https://xtemos.com/docs-topic/product-labels/#:~:text=This%20option%20can%20be%20turned,the%20label%20display%20as%20well.

Best Regards

I have still problem with this. This is not easy to find it

1. Where to insert the inscription e.g. -20% or BEST or SUPER etc. on the icons?
(where is the content displayed on the icon changed?)

2. There are ready icons like NEW, HOT
Where to change their content? I want to put it in my language.

Hello,

Sorry to say but unfortunately right now, there isn’t an option available under the Theme to change the Labels Text.

So, alternatively, we have tried a CSS solution to change the Text which you can try also on your Site.

For the SALE Label, here is the CSS that you need to try on your Site:

.onsale.product-label {
    visibility: hidden;
}

.onsale.product-label:before {
    content: "SALE" !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #83b735 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    min-height: 50px !important;
    border-radius: 35px !important;
    font-size: 14px !important;
}

In this CSS, under the content: “SALE”, you can write your own Text.

For the NEW Label, here is the CSS that you need to try on your Site:

.new.product-label {
    visibility: hidden;
}

.new.product-label:before {
    content: "VERY NEW" !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #438E44 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    min-height: 50px !important;
    border-radius: 35px !important;
    font-size: 14px !important;
}

In this CSS, under the content: “VERY NEW”, you can write your own Text.

For the HOT Label, here is the CSS that you need to try on your Site:

.featured.product-label {
    visibility: hidden;
}

.featured.product-label:before {
    content: "VERY HOT" !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #E22D2D !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    min-height: 50px !important;
    border-radius: 35px !important;
    font-size: 14px !important;
}

In this CSS, under the content: “VERY HOT”, you can write your own Text.

To paste the Custom CSS on your Site, you need to go to Dashboard > Theme Settings > Custom CSS > there you can paste the above said CSS.

Best Regards

OK, i try this in css, but look at he the screen :

1. Where can I enter the amount of the discount or just some text?

And where can I check SALE label or Attribute label ?

Attachments:

You must be logged in to view attached files.

Hello,

The Sale Discount as you know is added to Products. So, it is defined in the Product Edit area.

So, for that you need to go to Dashboard > Products > there you need to edit a Product on which you want to add Discount > scroll down a bit where you can find Product Data area > in that you will see General tab > in that you can add the Regular and Sale Price > after adding the Sale Price, click on Schedule to set the time frame for the Sale Price: https://ibb.co/9rCQRSp

The Sale Percentage is calculated automatically according to the Price difference defined in both Prices.

Best Regards.

[Author]

Posts