[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

Free Divi Pricing Table Pack

Mark Hendriksen | May 10, 2022 | 12 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Pricing tables are a nice way to show your pricing for your services or products. I have created a free pricing table pack for Divi for you to download. With this pack you will have access to 3 pricing tables, one of them also has a toggle. This will let your visitor switch between pricing options.

You can find the live demo of the Divi pricing tables here:

How to install the Divi pricing table pack?

Step 1

Signup below and follow the confirmation steps. After the confirmation, you can download the free pricing table layout pack right here.

Step 2

Unpack the download folder Divi pricing tables.zip. Inside you will find the file Divi Pricing Tables.json.

Now go to your WordPress dashboard and navigate to Divi > Divi Library. Click on the Import & Export button (left-top). And start uploading the file Divi Pricing Tables.json

Step 3

Open a page where you want to import one of the pricing tables. Enable the visual builder.

  1. Click on the blue + icon to add a new section
  2. Then click on the Add From Library Tab
Add the pricing table section to your page

Now you can choose the pricing table version you want to import.

Choose the pricing table version

How to change the color and content of the pricing table toggle?

When you switch the toggle from monthly to yearly the price will change. To edit these prices switch to wireframe view.

Change the pricing table content

Open the modules with monthly and yearly prices and change the contents.

To change the color of the toggle open the code module.

Divi pricing table code module

At the top you will see the following CSS code:

/* ###### PRICING TABLE - ACTIVE BG & TEXT COLOR ###### */
body #page-container .et_pb_section .active-price-toggle.et_pb_button {
	background-color: #ff2a66 !important;
	color: #fff !important;
}

Here you can change the toggle background and text color codes.

If you have any questions or need additional help then let me know in the comment section below.

You might also like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

12 thoughts on “Free Divi Pricing Table Pack”

  1. hi mark

    great layout, is there some code we can use to change the button as well as the price when switching between monthly and annual charges — our button is created by a code containing a javascript link to chargebee they have stopped doing html links…

    Reply
  2. Hi Mark. Amazing plugin – thanks very much.

    Quick question – when I preview the page and click on the toggle, it won’t change to the yearly tab. Can you help point me in the right direction?

    Thanks

    Reply
  3. Really like the look of this table but it appears the toggle only changes the price not the Get Started button also or am I missing something?

    Reply

Leave a Comment

0 Shares
Share
Pin
Tweet