There may be some users out there who prefer using a page builder instead of the regular Gutenberg Blocks. The most common would be Elementor, Divi and Beaver Builder.
We can use two different short codes. This is depending if you are using two or three options on the toggle.
Before you begin:
Toggles are available with Easy Pricing Tables Business or Elite. Head here for details, or to purchase.
We recommend this primer here before building your Pricing Toggle – How To Build A Pricing Table Toggle
Two option toggle
You will just need to enter some shortcode into a HTML field of your page builder to get it to work.
This is the code I am using. You will just need to edit it yourself to suit your own needs for your table.
[easy-pricing-toggle default_pricing_table_id="12345" default_title="Yearly" default_subtitle="Pay Yearly and Save" alternate_title="Monthly" alternate_subtitle="Pay Month to Month" alternate_pricing_table_id="6789" font_color="#e74c3c" background_color="#e74c3c" border_color="#e74c3c"]
To explain further, the number “12345” and “6789” will be the 2 numbers from the shortcodes of your own tables you plan to use. Eg a monthly and yearly table.
“Yearly” and “Monthly” will be what is left and right of the toggle.
“Pay Yearly and Save” will be the subtitle under the toggle when on the Yearly side.
“Pay Month to Month” will be the subtitle under the toggle when on the Monthly side.
And then the colors at the end of the code you just need to change to suit your own needs.
Here is an example of the code working for me, so you can visualize it.
Three option toggle
For a pricing table using three options in the toggles, you can use this shortcode instead –
[easy-pricing-toggle default_pricing_table_id="1444" default_title="Pay Monthly" default_subtitle="Regular Pricing" alternate_title="Prepay Quarterly" alternate_subtitle="Discounted 10%" alternate_pricing_table_id="1456" font_color="#ffffff" background_color="#e74c3c" border_color="#e74c3c" alternate_2_title="Prepay Annual" alternate_2_subtitle="Discounted 20%" alternate_2_pricing_table_id="1454"]
To explain further, the number “1444”, “1456” and “1454” will be the 2 numbers from the shortcodes of your own tables you plan to use. EG a monthly, quarterly and yearly table.
“Pay Monthly”, “Prepay Quarterly” and “Prepay Annual” will be what is left, center and right of the toggle.
“Regular Pricing” will be the subtitle under the toggle when on the monthly side.
“Discounted 10%” will be the subtitle under the toggle when on the quarterly side.
“Discounted 20%” will be the subtitle under the toggle when on the yearly side
And then the colors at the end of the code you just need to change to suit your own needs.
Need assistance with this or anything else? Feel free to contact our support team at https://fatcatapps.com/support/