Home / Divi Tips and Tricks / How to change pricing tables in Divi based on plans
Divi Tips and Tricks

How to change pricing tables in Divi based on plans

Hello Divi lovers. Today I am back with another useful tutorial. Recently I got a chance to work with a client from Israel and he wanted me to design a hosting company website. I used Divi for the site and I wanted to add some pricing tables  which can change based on the operating system. There was no in-built option for that so I decided to do some custom coding there.

(There were some plugins but I always prefer to not to use lot of plugins on a website as it will badly effect the performance. Personal experience 🙂 )

Let me tell you how I did that.

Step One – Changing pricing tables in Divi 

Add a new Section. This is where we are going to have our buttons and the custom code(jQuery). We are not using Button Module here. Instead add a Code Module and paste the below HTML code there. Below that add another Code Module. We will need that later. (For the jQuery code)

Please update URLs for icons to yours. Or you can delete the img tag if you are not planing to use icons on the buttons.

Next, copy and paste the below CSS code to your website to style the buttons. You can paste in Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area or to your child theme’s style.css file. (use any method you use to add custom css).

/*__Pricing Tables__*/

#btn-group {
   margin:10px auto;
#btn-group a {
   padding:10px 20px;

#btn-group a img {
   width: 18px;
   position: relative;
   top: 2px;
#linux-btn {
#linux-btn:hover {

Step Two – Changing pricing tables in Divi 

Let’s create our pricing tables.

Add a new section with two Rows. One column. Here we are going to add our pricing tables and headings. I am using the top Row to put my Windows Pricing Tables and the bottom row to Linux Pricing Tables. Style the Pricing Tables the way you want. Then add ID‘s to each Row. I added ‘windows-table‘ to the top Row and ID ‘linux-table‘ to the bottom Row.

Finally add display:none to the Row which you want to hide when loads the page. Go to Row settings > Advanced > Custom CSS. (To the main element. See the image below)

Above is the whole setup. #1 row should be hidden as I mentioned before with display: none;

Step Three

Lets make the jQuery magic. Copy the below code and paste it in the code module we added when starting. Just below the custom buttons we did. 

Wonderful! isn’t it? That is how to change pricing tables in Divi based on plans.
Just let me know if you need any help. Comment below and I will get in touch with you as soon as possible.

Similar Posts


  1. Hi there,
    That is a great trick, however, there is something wrong here.
    I made a short video to show that after the fist click nothing happened

  2. Hello,
    I got an issue
    It was ok but in several days of doing nothing buttons became like this in the browser.
    please helps.

  3. Your style is so unique compared to other people I’ve read stuff
    from. Many thanks for posting when you have the opportunity, Guess I’ll just bookmark this web site.

Leave a Reply

Your email address will not be published. Required fields are marked *