October 30, 2023

How to Add a Pricing Table Toggle with Elementor & Custom CSS

Play Video

A Pricing Table Toggle is a feature that many website owners want but don’t know how to implement. In this tutorial, we’ll walk you through the process of adding a pricing table toggle to your website using Elementor and custom HTML/CSS code.


Please make sure you have the following installed and activated:

Understanding the Toggle Button

The toggle button allows your website visitors to switch between different pricing options, such as monthly and annual plans. This enhances user experience and can potentially increase conversions.

Implementing the Codes in Elementor

  1. Open Elementor
    Launch Elementor and navigate to the page where you want to add the pricing table toggle.
  2. Add HTML Widget
    Insert an HTML widget at the top of your container.
  3. Paste the Smaller Code
    Paste the smaller code from ElementHow into the HTML widget.
    Paste the Smaller Code
  4. Add Your Pricing Tables
    Insert your pricing tables below the HTML widget. You can use Elementor’s built-in pricing table widgets for this.
    Add Your Pricing Tables
  5. Insert Another HTML Widget
    Add another HTML widget below your pricing tables.
  6. Paste the Longer Code
    Paste the longer code from ElementHow into this second HTML widget.
    Paste the Longer Code

Tip: You can customize the colors in the HTML/CSS code to match your brand.

Adding Multiple Pricing Tables

  1. Create Child Containers
    Make sure all items for the monthly option are in one container and all items for the annual option are in another.
  2. Insert Pricing Tables
    Add your pricing tables to these child containers.
    Adding Multiple Pricing Tables
  3. Update and Preview
    Save your changes and preview the page to see the toggle in action.

Supplementary Resources

Pricing Table Toggle – Conclusion

Adding a pricing table toggle to your website doesn’t have to be complicated. With Elementor and a bit of custom HTML/CSS, you can enhance your website’s functionality and user experience.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
How to Add a Pricing Table Toggle with Elementor & Custom CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.