Create a Pricing Table with Monthly/Yearly Toggle Switch in WordPress using Elementor

In this tutorial, I'll create a Pricing Table with Monthly/Yearly Toggle Switch in WordPress using Elementor.

✅Contact me for any WordPress related Project:

✅Get Elementor Pro:

✅Get Domain & Webhosting(SAVE 50%):

✅Get all the code snippets:

Today, I’ll show you how to create a pricing table on your WordPress website using Elementor. In Elementor when you are using the Elementor pricing table widget, you don’t have so much option to customize the design and layout of the pricing table. I’ll show you how to make a 100% customizable pricing table and how you can make a monthly yearly pricing table switch with that. And for this you don't need any WordPress pricing table plugin.

Here I give a 20% discount for the yearly subscribed users. That’s why the price has decreased for the yearly plan. Finally, we will make it fully responsive from the tablet and mobile devices.

First, we have created the toggle section which we have build by using the Text Editor and Divider widgets. We also use some custom CSS and JavaScript code to convert the divider widget into a Elementor pricing table toggle button. We also add a 20% discount badge for our yearly plan.

Then, we created our pricing table design. But, we didn't make that with the default Elementor price table widget. By using the heading, text editor, button and icon list widgets we make the WordPress pricing table. Then, we make the pricing tables fully responsive for our tablet and mobile devices.

After that, we duplicate the whole pricing table section and make another version for the yearly plan and hide the first section initially. Finally, by adding the JavaScript code we fully make it work. Here we also need to add some CSS classes with the toggle button and with the 2 sections.

For these whole tutorial, you don't have to have any kind of Elementor pricing table plugin. So, that’s how you can create this kind of fully responsive customizable pricing table and add a toggle button with that. If you enjoy this kind of Elementor tips and tricks, Elementor advanced design and Elementor custom CSS related video don’t forget to like and subscribe. And if you want me to help you for any WordPress related project feel free to contact me through my website.

✅Contact me for any WordPress related Project:

✅Get creative templates on my Template Shop:

[Xeeshan]

Great tutorial! Thanks a lot!

For initial postion left to right :
edit in the code 2 lines

selector .elementor-divider:after{

left: var(--padding); change it

}
selector.monthly .elementor-divider:after{
left: calc(100% - var(--size) - var(--padding)); change it
}

and change the table id

Thank you

[teamactivemedia]

This was such an easy to follow, effective and clean solution. Thank you for sharing this, I'm so thrilled I didn't have to use a plugin.

[DanZL]

Is there any ways of adding multiple toggle buttons and tables on the same page? I created the first pricing table and it worked! Then I duplicated everything from the first and created the next one below the first. I also changed the classes of individual tables and the JS but still the first toggle is changing the second pricing table? :(

[kmanekfnd]

레전드다 이거. 이 사람은 워드프레스 엘리멘터 최고의 강의들을 올립니다.

[kevinmarshall]

Hey there. While everything worked perfectly on Chrome and Firefox on my laptop, the moment I tried this on my iOS device, the toggle button loaded on the wrong side and didn't work correctly too. I discovered that it was also happening exactly this way in Safari on my laptop. The following replacement of code fixed this for me and keeps it working consistently on all browsers:
Replace: left: calc(100% - var(--size) - var(--padding));
With: left: calc(100% - 23px - 5px);

Thanks!

[fabienbedot]

Great tutorial! It helped me a lot. You have a real gift for explaining simply and taking the necessary time. This is very rare. Bravo and thanks again!

[Fuseek]

I truly appreciate your tutorial bro. Just finished editing my website by following this tutorial. Also, if anyone can't make the column appear larger than the other column, try to adjust the margin instead the padding.

[ErickGerber]

This is amazing! Thanks so much for making this tutorial! I was looking at all kinds of different plugins but with this, you don't need any extra plugins cluttering up your website. Amazing!

[emirkaankaraman]

Hi thank you so much for your sharing, but I have a problem, When I am in elemontor, the button works properly, however when ı saved and look the preview on my home page, it doesn't work, so What can I do? Could you help me?

[DudiKroyzer]

Excellent tutorial♥♥
How to make pressing the switch also change the color of the button (circle)
I want the button to be white for the first price and black for the second price
Thanks

[silverfoenix]

Very beautiful work, the way you combine Javascript with CSS to make your vision website reality is
I have this idea of when hitting a button (try for free), instead of going to checkout product you instead make a contact form section appear for that pricing option (same background color style), when changing your mind the contact form replaces with another!
It might be you next video idea!

[ComebackGAWD]

Worked like a charm. I don't even know how to code!

[HansOey]

Thanks for this tutorial! Very concise and clean finish.

[bradymills]

This is incredible! Thank you for this amazing tutorial.

[DavidHunterinOttawa]

JITU, really fantastic tutorial on how to implement a pricing table toggle in Elementor. Thank you so much! You saved me a lot of time. And it works perfectly the first time. fyi, I didn't bother using custom columns for the pricing tables - I just used the default pre-built pricing table blocks - works great.

[avromd]

Excellent! Thank you so much for providing this resource. I knew it could be easily done in Elementor. 🙏

[elendipity]

This video was super easy to follow, but I have an issue now :)
So I created everything, but, after I finished, I had to add something on the icon list. The problem is that I couldn't find the "year" tiers, it kind of hid somewhere after I put the HTML code. So I removed the HTML section, I copied the new monthly tiers and re-create the yearly one from then. Then I added the HTML section and code. The toggle works perfectly, but the "old" yearly planned now appears always (iin my preview), but the problem is that in my backend in elementor it seems still hidden somewhere so I can't delete it, how can I delete it?

[victor.nunez.]

Hello, i need your help! The pricing table with slide testimonial not function correctly. Please!

[spicyboi]

DUDE You Saved My life . Amazin Channel. Keep going !

[AdamKiss-sfbf]

Thank you so much! Very detailed and helpful. As a beginner, I could do everything. 10/10