A Divi 5 pricing toggle lets visitors switch every price on the table between monthly and yearly with one click. You do not need a plugin, a Code module or a line of JavaScript for it: Divi 5's own Interactions can show one set of prices and hide the other. This guide shows the setup step by step, the two small details that make it feel finished, and how our free toggle layout does the same thing with a switch.
Want to skip the build? Gradient Toggle Plans is a free layout with the toggle already wired up. Import it and read along to see how it works. If you have not imported a layout before, start with how to import a Divi 5 layout.
How the toggle works
The idea is simple. Each pricing card holds both prices, one above the other. The monthly price is visible when the page loads and the yearly price is hidden. Clicking "Yearly" hides the monthly price and shows the yearly one; clicking "Monthly" does the opposite.
All of it is done with three of the effects in Divi's Interactions settings: Show Element, Hide Element and the Load trigger. Nothing is hidden with CSS, so every price stays a normal module you can edit in the Visual Builder.
Step 1: Put both prices in every card
In each card, add the monthly price and the yearly price as two separate modules, one directly under the other. A Text module or a Heading works for each. Style them the same way, so the switch looks like the number changes rather than the layout jumping.
Give every module an admin label such as "Price monthly, Pro" and "Price yearly, Pro". You will pick these modules as targets in a moment, and clear names save a lot of guessing once a table has three or four cards.
Tip If the yearly plan comes with a line like "billed yearly, save 20%", put it in the same module as the yearly price, or in a Group with it. Then it appears and disappears together with the price and you only target one thing.
Step 2: Add the two switch buttons
Above the cards, add two controls labelled "Monthly" and "Yearly". Two Button modules side by side are the easiest start. They are the triggers: the modules a visitor clicks to make something happen.
Step 3: Wire up the Yearly button
Open the settings of the Yearly button, go to the Advanced tab and open Interactions. Click Add Interaction and set it up like this:
- Trigger Event: Click. Effect Action: Show Element. Target: the yearly price of the first card.
- Trigger Event: Click. Effect Action: Hide Element. Target: the monthly price of the first card.
Repeat that pair for every other card. A table with three plans ends up with six click interactions on the Yearly button. It looks like a lot in the list, but each one does one plain job, and that makes the toggle easy to fix later.
Step 4: Wire up the Monthly button
The Monthly button gets the mirror image: Click, Show Element on each monthly price, and Click, Hide Element on each yearly price.
Use Show Element and Hide Element here, not Toggle Visibility. A toggle flips the current state, so a visitor who clicks "Yearly" twice would end up back on the monthly prices while the Yearly button still looks selected. Show and Hide always land in the same place, however many times someone clicks.
Step 5: Hide the yearly prices when the page loads
Right now both prices show until someone clicks. To fix the starting state, go back to the Yearly button and add one more interaction for each card: Trigger Event: Load, Effect Action: Hide Element, Target: that card's yearly price.
You might expect a short flash of the yearly prices before the Load trigger runs. In our tests there was none: Divi reads these load interactions on the server and the yearly prices are already hidden when the page first appears.
Want the yearly prices to show first instead? Swap the roles: put the Load interactions on the Monthly button and hide the monthly prices.
Step 6: Show which option is selected
The prices now switch, but both buttons look the same, so visitors cannot tell which billing period they are looking at. The fix uses the same method one level up: make two versions of each button, a selected style and a plain style.
- On load, show "Monthly, selected" and "Yearly, plain"; hide the other two.
- Only the plain buttons get click interactions. Clicking "Yearly, plain" shows "Yearly, selected" and "Monthly, plain", hides itself and "Monthly, selected", and swaps the prices as in step 3.
- "Monthly, plain" does the mirror image.
If the list reads like a puzzle, draw it on paper first: four buttons, two visible at a time, and every click swaps both pairs. Once the buttons behave, add the price interactions from steps 3 and 4 to the two plain buttons.
Step 7: Test it before you publish
- Click each button twice. The prices and the selected style should stay put on the second click.
- Reload the page. The starting prices should show with no flash of the other set.
- Try it on a phone. Interactions have no separate tablet or phone settings; the same ones run at every screen size, and a tap counts as a click.
- Check the numbers. Make sure every card's yearly price really is the one you charge. It is easy to copy a card and forget to change the hidden price.
Common questions
Do I need a plugin for a pricing toggle in Divi 5?
No. Interactions are part of Divi 5 itself and every setting above is in the Visual Builder. The layout keeps working if you move it to another site with Divi 5.
Can I use a switch instead of two buttons?
Yes, and it needs fewer interactions. Gradient Toggle Plans works this way: the switch is two Group modules, one with its knob on the right and one with its knob on the left, and only one of them is visible at a time. The visible one shows the yearly prices when the page loads. Clicking it shows the other switch, hides itself, shows the monthly prices and hides the yearly ones; the second switch does the reverse. So each Group is both the thing you click and something that gets hidden. Keep the words "Monthly" and "Yearly" next to the switch, because a drawn switch on its own does not tell visitors what it does.
Does it work with the keyboard?
A click interaction on a Group or a Text module reacts to a mouse click or a tap, but not to the Tab and Enter keys. If keyboard users matter for your site, and they should, test with the keyboard before you publish.
Can I change the colors and fonts after importing the layout?
Yes. Our layouts use global colors and presets, so you can rebrand the whole table in a few edits. How to rebrand a Divi 5 layout walks through it.
More ready-made tables are in our free Divi 5 pricing layouts.