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

How to change pricing tables in Divi based on plans

How to change pricing tables in Divi based on plans

Hello Divi lovers. This is another updated version of my posts. (I am updating these as Divi has come a long way after I post this first.). 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 but wanted to add some pricing tables which can be changed based on the operating systems. That means we need to change the table with a button click. There was no in-built option for that so I decided to do some custom coding there.

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

So, below is what I did. Not what I did for the client but this is something similar I did to show you the functionality.

How to change pricing tables in Divi based on plans

Nice trick. right? So, let me show you how I did that step by step.

Step One – Add buttons section

First, add a new section. This is where we are going to have our buttons and the custom code(jQuery). We are not using the Button Modules here. Instead add a Code Module and paste the below HTML snippet there. underneath that code module, add another Code Module. Just keep it empty for now. We will need that later for the jQuery code.

<div id="btn-group">
  <a id="windows-btn" href="#" onclick="return false">Windows</a>
  <a id="linux-btn" href="#" onclick="return false">Linux</a>
</div>
How to change pricing tables in Divi based on plans

Tip: It’s always a good practice to properly label(admin labels) what you add to the design. You will see how much it can help when working on larger pages.

You can style your buttons the way you want. A nice way is to add a small icon infront of the text.

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).

Learn more about adding custom CSS to your WordPress site here.

/*__Pricing Tables__*/

#btn-group {
   text-align:center;
   margin:10px auto;
}
 
#btn-group a {
   padding:10px 20px;
   color:#fff;
   cursor:pointer;
   font-size:20px;
}

#windows-btn{
   background-color:#289df1;
   border-top-left-radius:6px; 
   border-bottom-left-radius:6px; 
}
 
#windows-btn:hover{
   background-color:#1e76b5;
}
 
#linux-btn {
   background-color:#ff2135;
   border-top-right-radius:6px; 
   border-bottom-right-radius:6px; 
}
 
#linux-btn:hover {
   background-color:#cc1d2d;
}

Step Two – Create the pricing tables

Add a new section with two Rows (One column). Here we are going to add our pricing tables. I am using the top Row to put my Windows Pricing Tables and the bottom row for 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.

How to change pricing tables in Divi based on plans
divi theme settings
Divi theme added class
How to change pricing tables in Divi based on plans

Finally, we have to hide one table. Go to the Row Settings on which you want to hide when loading. Settings > Advanced > Custom CSS. Then add display: none to the main element. See the image below.

divi row settings

Step Three: Change pricing tables with jQuery

Let’s do the jQuery magic. Copy the below code and paste it into the code module we added when starting. Just below the buttons HTML code.

<script>
  jQuery(document).ready(function( $ ){

    $('#windows-btn').click(function(){
      $('#windows-table').show();
      $('#linux-table').hide();
    });
    
    $('#linux-btn').click(function(){
      $('#windows-table').hide();
      $('#linux-table').show();
    });

   });
</script>

Wonderful! isn’t it?

That is how to change pricing tables in Divi based on plans. This can be used in many cases in real life. Try and let me know if you needed any help. Use the comments area below and I will get in touch with you as soon as possible.

Similar Posts

6 Comments

  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
    Thanks

  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 *