WordCamp Europe 2023 Special Offer - Get 30% OFF any edition with coupon: WC30

My Account


Home Forums General Display custom display value in (WooCommerce) price fields

Viewing 2 reply threads
  • Author
    • #52052
      Steven Polak


      I am trying to display a value near a price field that is different from the actual value of the input. For example:

      > I have a range slider that goes from $0 to $125 with steps of $25. This means there are 6 options on the slider.
      > I want to dynamically display numbers 1 through 6 near the slider.

      To further illustrate:
      > If I slide to 5, the price amount that displays elsewhere, should then equal $100. Slider is set to 0 by default, which equals to price amount $0.

      I have tried to achieve this with a function in the “Help Text” field:
      > #floor(#calc(((#value+1)/25)+1))

      This formula works as expected, BUT it gets buggy when I have more price fields. For example, I add another section with a price checkbox field. The first time I toggle the checkbox, the “Help Text” value from the slider changes (the actual slider value does not, though).

      I think what I am trying to achieve is a basic functionality, but I can’t quite figure it out.
      Is there a better (correct) way to go about this? Or is there a way to fix the bug I described?
      I haven’t been able to find any info in the database, nor any demos that do what I want to do.

      Many thanks to anyone with suggestions!

    • #52055
      Steven Polak

      Well I guess that’s what Data Grids are for haha… Ignore the question above, but to continue on the topic:

      I am now trying to get the labels instead of values to display near my range slider.

      Unfortunately pulling #data_grid_row_label into my “Help Text” does not display the label dynamically – it displays “#data_grid_row_label” as a static value.

      Is there a way to achieve this? Thanks for any help!

    • #52214
      Steven Polak

      Summary for future users:

      > I’ve got a price range slider;
      > I have linked a data-grid with (price) values that match the steps of the slider input, and label names, to the slider input;
      > Near the slider (all coded in an HTML field) I dynamically display the labels (data-label attributes in the <datalist> element) instead of the price values;
      > I did this using jQuery, by filtering the data-labels and returning them as innerHTML when the corresponding option of the data-label equals the input of the range slider.

Viewing 2 reply threads
  • You must be logged in to reply to this topic.