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.
![pricing Featured Image](https://egedijital.com/wp-content/uploads/2024/06/pricing-Featured-Image.jpg)
![Ekran Resmi 2024-06-06 16.45.20](https://egedijital.com/wp-content/uploads/2024/06/Ekran-Resmi-2024-06-06-16.45.20.jpg)
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.
![Ekran Resmi 2024-04-13 09.12.10](https://egedijital.com/wp-content/uploads/2024/04/Ekran-Resmi-2024-04-13-09.12.10.jpg)
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.
![Ekran Resmi 2024-06-06 16.54.01](https://egedijital.com/wp-content/uploads/2024/06/Ekran-Resmi-2024-06-06-16.54.01.jpg)
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
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.