In this tutorial, you’ll learn how to change pricing tables based on plans. The Pricing Tables Module is already a good way to show the pricing of your services to costumers. But, let’s add this little twist and make it even better.

If you want to learn how to make it work, follow this simple and quick tutorial. I hope you learn a thing or two about CSS and jQuery in this tutorial.

Animated GIF  - Find & Share on GIPHY

How to change pricing tables based on plans in Divi

Preview

You have probably seen websites that sell services the option to pay monthly or annually. Did you ever wonder what’s the code used to achieve this kind of feature?

Ready? Let’s do it!

Adding the codes

First of all, add some CSS code inside Divi > Theme Options > Custom CSS:

.btn {
  border: 3px solid #43a047;
  background: transparent;
  padding: 10px 30px;
  color: #43a047;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .1em;
  cursor: pointer;
}

.btn:hover {
  color: #fff;
  background: #43a047;
}

.et_pb_sum {
  position: relative;
  top: 7px;
  color: #000;
}

This code is used to style the buttons monthly and annually with the class .btn and to vertical centralize the table title.

Secondly, add the jQuery code to enable different price tags based on the current plan selection.

Go to Divi > Theme Options > Integration > Add code to the < head > of your blog:

jQuery(document).ready(function( $ ){
    
  //Change pricing tables based on plan
  $("#monthly").click(function(){
    $(".monthly-basic .et_pb_sum").text("$35/monthly");
    $(".monthly-pro .et_pb_sum").text("$50/monthly");
    $(".monthly-premium .et_pb_sum").text("$90/monthly");
  });
  $("#annually").click(function(){
    $(".annually-basic .et_pb_sum").text("$320/annually");
    $(".annually-pro .et_pb_sum").text("$490/annually");
    $(".annually-premium .et_pb_sum").text("$870/annually");
});
  
  });

Remember to put the code inside <script> tags.

You can also use a plugin to better handle all your custom codes inside Divi.

Change the prices to better suit your needs.

Adding the layout to a page

First, create a section and add text-align: center inside Section Module Settings > Custom CSS > Main Element.

Then, create a Code Module and paste the following code to create the buttons to switch between monthly and annually.

<button id="monthly" class="btn">Monthly</button><button id="annually" class="btn">Annually</button>

Finally, create a row with 3 columns and add a Pricing Tables Module for each column.

Then, inside each Module, add the CSS classes you wrote inside the jQuery code.

01. Pricing Tables Module Settings > Custom CSS > CSS Class: monthly-basic annually-basic

02. Pricing Tables Module Settings > Custom CSS > CSS Class: monthly-pro annually-pro

03. Pricing Tables Module Settings > Custom CSS > CSS Class: monthly-premium annually-premium

To reach the layout design similar to the one in the demo, just go to Pricing Tables Module Setting > Advanced Design Settings – and add your own design inspirations.

Conclusion

I really hope you managed to learn how to change pricing tables based on plans. It’s an awesome feature if you are selling products or services on the internet and want to show different plan prices based on payment methods.

What did you think about this tutorial? Are you familiar with JS code inside websites?

Comment below or send me an email. Love getting feedback from you.

See ya!