Change Price In Pricing Table With Select Element

Design help General
1

Hi, I have a pricing table where each option has a select field that allows them to select their monthly credits. This needs to change the price. How can I achieve this? I assume its through interactions or custom states but I’m having trouble locating a resource that can walk me through it.

Heres a look at the table for reference:

Screenshot 2023-02-07 at 2.27.33 PM
Screenshot 2023-02-07 at 2.27.33 PM1812×1318 190 KB

2

You’d accomplish that with custom script. Are you only changing the price per month that appears above? If so it’s pretty simple.

  • Give your combobox a custom attribute - price-sel, set the value to starter for the Starter one, pro for the Pro plan, etc.
  • For the value for each element, give the price you want to display. So e.g. if 40,000 Word Limit / month is $29, you’d set the value of that option to $29.
  • To the text element where you want that price to appear, add a custom attribute - price-display,a nd set the value to starter or pro.

Now you’ve clearly identifier what changes what where.

Add this script to do the job, in your /body custom code area;

<script>
$(function() {
  $("[price-sel]").change(function() {
    const priceType = $(this).attr("price-sel");
    $(`[price-display="${priceType}"]`).text($(this).val());
  });
})
</script>

Note I’ve just written this out, untested. Let me know if I glitched anything.

3

Thanks! I really appreciate you taking the time to write that out for me. It works perfectly.

4

Hi. thats awesome! Thank you!

How can I also change the “buy” button link to redirect the customer to the right checkout page?
Price 1 → redirect to Link1
Price 2 → redirect to Link 2
etc.

I would like to have a price table where a customer can select the user-seats they want to have. Based on that the price updates and the button-link, so they get to the right stripe checkout page :slight_smile: