Pricing Table With Toggle Switch

Before using this product, you need to make sure that your hosting settings meet all the requirements by Divi theme. You can check this by going to the WordPress dashboard, and then Divi > Support Center.

How to import

Step 1 – Download the layout pack
Download the zip layout pack from the marketplace and unzip it somewhere on your computer.

Step 2 – Navigate to Divi library
You will find a file named Layouts.json. Now you need to go to the WordPress dashboard, then Divi > library. On the top of the page, click on Import/Export.

Step 3 – Import the layout to your website
When the Import/Export window shows up, switch to the Import tab, click on Choose File and select the file that you saved on your computer in step 1, and finally click on Import.

Step 4 – Import the layout to your page
The layout is now saved into your divi library. You may now go to the page that you want to use the pricing tables, enable the visual builder and click on the plus sign.

Switch to Your Saved Layouts and select the pricing table layout that you wish, and finally click on Use This Layout.

Important Note: Make sure to uncheck the Replace Existing Content. This way the other content that you already have on your page will stay the same and will not be removed.

Before you start

Prior to editting a pricing table layout, it’s important to understand the three main sections involved. These sections are the Toggle section, Default section, and Hidden section.

Enable visual builder on the page, and on the bottom right click on Layers icon.

Toggle section

The Toggle section contains the content toggle and is comprised of three code modules (HTML, CSS and JS). If you don’t need the toggle option, you can simply delete this section along with the Hidden section.

Default section

The Default section is where the pricing table is displayed by default when the page is loaded. You can customise these settings using the Divi Builder, just as you would with any other Divi modules.

Hidden section

The Hidden section is a duplicate of the Default section but with different pricing. This section will only be enabled when you click on the toggle switch. You can make any desired changes to the pricing or any other details, and those changes will be reflected once you toggle the switch.

It’s recommended that you go to the section settings and temporarily remove the section ID and Class (keeping a copy of it somewhere else) before making any changes. Once you’re done making changes, you can paste the previous ID and Class back to the section.

How to change the toggle’s content and style

Toggle text content

Change the left text

You can simply replace your desired text on the left side of the toggle.Open the HTML code module settings and replace your text with the default one which is Monthly.

Change the right text

You can do the same for the right text as well. The default text on the right side is Yearly. You may change this to any text that you wish.

Toggle text colour

Change the left & right text colour

You can also change the text colour on the right & left side of the toggle. In the toggle section, go to the CSS code module. Somewhere in the code, you will see the css for both the right & left text. Change the value of the colour to your desired one.

You may also add more css styles to each text that you want.

Left text

Right text

Toggle background colour

Change toggle’s default background colour

Somewhere in the css code module, you can find this piece of code and change the default background colour of the toggle.

Change toggle’s background colour when switched

The default background colour for the toggle when switched, is green. Go to the css code module and change the value of colour to your desired one.