Condition for woo_product_on_sale

How To
1

Hi,
I’m trying to hide an element when the product is not on sale, and show when the product is on sale.
image

Kind regards

2

Hello, @intovortex!

If you need to show an element when product IS on sale, then use “{woo_product_on_sale} > 0” . (That is, showing an element when the sale amount is anything more than 0)

If you need to show an element when product IS NOT on sale, then use “{woo_product_on_sale} <= 0” . (That is, showing an element when the sale amount is not even set)

3

Hi @ChrisEski,

I already tried that and it didn’t work sadly.
image
image
Still appears on all products.

Nothing seems to work, I tried != = show/hide < > etc…

And this setting
image

hides the test element on all products no matter if sale or not

4

Well, in my project i have the same functionality.

As you can see in the screenshot below, in the single product template, for the product price i have inserted two product price elements, which appear conditionally in the live website:

Frame 10
Frame 104033×1451 325 KB

  • Element 1 for when the product IS on sale
  • Element 2 for when the product IS NOT on sale

I applied different styling for each one. And in every occasion, only one of them appears.
I used the same rules that both of us mentioned. So unfortunatelly I am not really sure what’s going on in your situation!

I will come back if I think of something else!

5

Hi,
thank you for taking the time in showing and explaining everything.
Does it work with any element on your page or only the price widget/dynamic tag?

Also unrelated question how are you displaying the percentage, beside the title?

6

  • In the moment I only used Conditions for displaying/hiding accordingly the product price.
    But I believe that since this works on the Product Price widget, it should work for other widgets as well.
    Maybe use two iterations of the same element that you want to show/hide conditionally, and set each one with the proper display condition, instead of trying to set the rules to only one individual element.
    In the builder environment they are both going to show, but in the front end of your live site, only the one that matches the rules will show (if the conditions are set correctly and successfully of course).

  • Note that all this is done inside the Woocommerce - Single Product Template, created from the Bricks menu (Dashboard > Bricks > Templates > Woocommerce - Single Product). I have not tried conditional rendering based on whether a product is/is not on sale, in other places/pages yet.

  • As for you last question, it is just a Block element with two dynamic tags inside of it aligned horizontally (Block > Product Title + Product Meta {woo_product_on_sale}). It’s just the Product Meta widget with custom styling (added padding and background-color).

  • In order to display the Sale % instead of just the word “Sale”, you must enable this from inside Bricks settings menu in your Dashboard (in case you missed that).

  • If you try to display the percentage dynamically and this is not visible, look for it on the top left of the whole page, as I discovered that it gets a position: absolute by default.
    For that I have opened a Bug report explaining how I got over it, if you are interested in this link:
    Sale Badge percentage not shown inside element, but positioned absolutely

1 Like
7

Thank you so much for your effort and explanation. I managed to make it work, by giving the element a class.
Then setting up this condition.
image

So itemSale is my class it also works with .itemSale if anyone is wondering, then it checks if the product is on sale or not. That worked for me.

Thank you for the percentage explanation. I must have missed that feature. Does it only show with the product meta widget or with any widgets? I tried it with the heading widget it didn’t appear sadly. It only seems to work with the product meta widget, and like you said it was floating around on the left side. So I just used your workaround to unset it, thank you very much.

1 Like
8

I’m glad you made it work at last!

I will also try your way of making it work with use of classes, which I did not even think of! So I guess we both earned something :grin:

Keep going!!

1 Like
9

Thank you very much.
Yeah, I never thought of it until I was doing something else and thought of it, and it worked haha.

Indeed was a good post. Learned some useful things. Thank you for your help.

Keep rockin!

10

Is there another way to achieve this?