Add a discount to a specific position

[zuno.tax]

I would like to show that there is currently a discount on certain items in the list.

The old price should be crossed out. Badge: 50% (for example) and then the new price.

Thank you!

[Max]

Hi there, @zuno.tax

I’ve checked your widget and see that you’ve already found a solution, which looks great:

If you’d like to make some further adjustments, please let us know. We’ll be happy to help

[zuno.tax]

Hi there

Yes I’m kind of happy with the solution and yes I have another topic: I wand to chance the stroke color, if an element is chosen. And Can I chance the icon? I made a prototype in Figma (screenshot) - that would be super nice.

Thank you

[Max]

Yeah, we’ll try to do that!

I’ve forwarded your request to the devs and will get back to you once the solution is ready

[Max]

Hi @zuno.tax

Here is a solution from the dev team:

[class*="choice-option__RadioControl-sc"]:after,
[class*="image-option-button__RadioButton-sc"]:after {
  display: none !important;
}

[class*="choice-option__Overlay-sc"],
[class*="image-option-button__Overlay-sc"] {
   background: none !important;
}

[class*="choice-option__RadioControl-sc"],
[class*="image-option-button__RadioButton-sc"] {
  background-color: transparent !important;
  border: none !important;
  background-image: url('https://files.elfsightcdn.com/10f57fcd-29bb-4da4-9c09-61ea49a5bf6e/456ad39f-4654-4383-84cd-77b6af86a8e8/check3.png');
  background-size: 100%;
}

[type="radio"]:checked + * [class*="choice-option__RadioControl-sc"],
[type="radio"]:checked + * [class*="image-option-button__RadioButton-sc"] {
  background-image: url('https://files.elfsightcdn.com/10f57fcd-29bb-4da4-9c09-61ea49a5bf6e/ba5e93fa-1bd5-43cf-bf11-7b722450f896/check2.png');
}

[class*="image-option__Item-sc"]:has([type="radio"]:checked) {
  border: 1px solid #7e7cf3;
}

Please add this code to the Custom CSS field on the Settings tab of your widget’s settings and let me know if you like the result

[zuno.tax]

Hello Max!

wow, that’s amazing! It worked perfectly! Thank you and the dev team so much for your help!

I think it looks great!

[Max]

Happy to hear that!

If any assistance is needed in the future, we’re always here to help you