Presenting your pricing options clearly and briefly is crucial for converting visitors into customers. However, with multiple plans and features, traditional pricing tables can become overwhelming.
The switcher, a powerful tool that lets you showcase different pricing plans with a simple click. Imagine your visitors effortlessly toggling between monthly and yearly options, or comparing different feature sets within a single table. Sounds great, right?
This guide will walk you through adding a switcher to your Elementor Pricing Table. We’ll equip you with the knowledge and tools to create an engaging and informative pricing experience.
Steps to Add the Switcher to the Pricing Table in Elementor
First, before we start the tutorial, we want to ensure that you’ve already upgraded to Elementor Pro. The Price Table widget itself is one of the exclusive features that is only accessible on the Pro version.
Step 1: Activate the Nested Elements Feature
You must activate the Nested Elements and Flexbox Container features to add the switcher to your pricing table. For your information, Nested Elements is available on Elementor version 3.10 or above, so we recommend you update to the latest version of Elementor.
Go to the Elementor settings dashboard, then navigate to the Features tab. Afterward, find the Nested Elements and Flexbox Container options to activate them.
Once you activate those features, apply them by clicking the Save Changes button.
Step 2: Add the Nested Tabs Widget
Go to your Elementor editor, and we will start everything from scratch, so create a new page and then edit it with Elementor.
Once you enter the Elementor editor, add the Tabs widget from the widget panel, then drag and drop it into the canvas area.
Now, you will see that the Tabs widget is located in the parent/main container. The widget has two areas, the first area is used to hold the tabs, and the second is used to display the content of the tabs. In this case, we will use it for pricing table content (see the image below).
Explore the Tabs widget settings to edit and style up all your tabs.
Step 3: Add the Pricing Table Content
Next, we will add the pricing table widget in the content area of the Tabs widget.
First, we will start with the first tab. To add pricing table content, click the plus icon (+) and choose your preferred layout. For this example, we chose three containers.
Afterward, add the Price Table widget to each container, then tweak and style it up as you like.
That’s it. Repeat the step to add content to other tabs. Don’t forget to save or publish your page if you want to.
The Bottom Line
This article explains how to overcome the challenge of presenting complex pricing plans clearly by adding a “switcher” to your Pricing Table widget using the Nested Tabs by Elementor.
This tool allows visitors to easily compare different options, like monthly vs. yearly plans or different feature sets, leading to a better user experience and potentially higher conversion rates.
