Change Price In Pricing Table With Select Element

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:

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;

$(function() {
  $("[price-sel]").change(function() {
    const priceType = $(this).attr("price-sel");

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

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