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 > Divi Library. On the top of the page, click on Import/Export. Then click Save All button. 

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.


You can import the layout in page builder. 

Download layout json file, open your pricing page, enable divi visual builder, click import button at the bottom bar, upload json file and customize your pricing content.

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 table, enable the visual builder and click on the plus sign.

Switch to Your Saved Layouts and select the pricing table toggle 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 Pricing Toggle button section and Pricing Table Section.

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

Your Title Goes Here

Your description goes here. Edit or remove this text inline or in the description settings

Pricing Toggle Button section

The Pricing Toggle Button section contains the content toggle and is comprised of three code modules (CSS and JS). If you want to change toggle button contents click dinner or launch button settings and write your content.

Pricing Table Section

The Pricing Table Section contains pricing contents. Click Monthly or Yearly Pricing settings and add your pricing as a text in this module.