Advanced Pricing With Toggle

Updated on September 3, 2024
Table of Contents

With this widget, you can create a beautiful pricing toggle table.

LIVE WIDGET LINK

Required Setup

  • Elementor FREE Plugin installed & activated.
  • You need to have the WDesignKit plugin installed and activated.
  • Make sure you’ve created an account and logged into it.
  • Make sure you’ve downloaded the Advanced Pricing With Toggle widget.

How to Activate the Advanced Pricing With Toggle Widget?

Go to 

  • WDesignKit → Widgets. 
  • Search the widget name and select Elementor as the Page Builder.
  • Click on the Download icon.

How to Use the Advanced Pricing With Toggle Widget in Elementor?

Add the Advanced Pricing With Toggle widget to the page.

Content

In the Switch 1 section, you have to add the content for the first switcher one.

By enabling the Tooltip toggle, you can add a tooltip on the second switcher.

Once enabled you can add the tooltip content in the Tooltip Title field.

Then in the Title field, you can add the switcher 1 button text.

From the Select Items section, you can add pricing table items for the first switcher. 

In the Title field, you can add the table item title.

By enabling the Banner Show toggle, you can add a highlighter text for the table item.

In the Subtitle field, you can add a subtitle to the table item.

From the Pricing Number field, you can add a price.

In the Price Month field, you can add the paying term.

You can add a symbol like a currency symbol in the Dollar Sign field.

By enabling the Display Discount toggle, you can add a discount text and price.

Then by enabling the Display Offer toggle button, you can add an offer badge to the table.

From the Url field, you can add a link to the button.

You can add a button title from the Button Title field.

From the Button Description field, you can add a description to the button.

Then you can manage the text color, background, button text color, button color and button border of the 

item.

You can click on the + Add Item button to add more table items in the first switcher.

Then from the Switch 2 section, you can add content for the second switcher.

Here you’ll find the same options available in the Switch 1 section.

Connection

From this tab, you can connect the Advanced Pricing With Toggle widget with the Toggle Pricing Features Table widget.

In the Connection ID field, you can add an ID to connect with the Toggle Pricing Features Table widget.

Extra Shape

By enabling the Show toggle, you can add a circle shape on both sides of the items, and you can customize their background as well.

From the Style tab, you can further customize the table style.

Now you’ll see a beautiful toggle pricing table.

How to Connect the Advanced Pricing with Toggle Widget with the Toggle Pricing Features Table Widget?

To connect the Advanced Pricing with Toggle widget with the Toggle Pricing Features Table widget, add both widgets on the page and add the content accordingly.

Then in the Advanced Pricing with Toggle widget go to the Connection tab and add an ID in the Connection ID field.

After that add the same ID in the Connection tab of the Toggle Pricing Features Table widget.

Now both the tables are connected if you toggle the switch on one table, it will automatically toggle the switch on the other table as well.

With this feature, you can create an advanced toggle pricing table.

Related Docs
123