Is it possible to change the price text on all 3 plans based on the option selected in a dropdown menu in Webflow?

Published on
September 22, 2023

Yes, it is possible to change the price text on all 3 plans based on the option selected in a dropdown menu in Webflow. Here's how you can achieve this:

  1. First, you need to set up a dropdown menu with the different options. In Webflow, you can add a dropdown element from the Add panel on the left side of the Designer.

  2. Once you've added the dropdown menu, you can go to its settings by selecting the dropdown element and clicking on the Settings tab in the right panel. Here, you can add the different options for the dropdown menu.

  3. Now, you need to add the three plan cards with their respective prices. You can add them as individual elements or as a collection list, depending on your design preference and requirements.

  4. Go to the first plan card (or collection item if you're using a collection list) and select the price text element that you want to change based on the dropdown selection.

  5. With the price text element selected, click on the "Add Interactions" button at the top of the Designer.

  6. In the interactions panel, click on the "+" button to add a new interaction. Select the dropdown menu as the trigger for the interaction.

  7. Choose the "Change text" action from the available options.

  8. In the "Change text" action section, you will see a dropdown menu to select the text element that you want to change. Select the price text element that you want to update.

  9. Lastly, for each option in the dropdown menu, you can specify the text that you want to show for the corresponding price. You can do this by clicking on the "Add another value" button and filling in the option and price text fields.

  10. Repeat the same process for the other plan cards or collection items, selecting the appropriate price text element and specifying the corresponding option text and price for each.

By following these steps, you'll be able to change the price text on all 3 plans based on the option selected in the dropdown menu.

Additional Questions:

  1. How do I add a dropdown menu in Webflow?
  2. Can I customize the design of the dropdown menu in Webflow?
  3. Is it possible to show/hide different elements based on the dropdown selection in Webflow?