{"id":104145,"date":"2023-02-07T17:32:27","date_gmt":"2023-02-07T12:02:27","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104145"},"modified":"2023-02-07T17:32:27","modified_gmt":"2023-02-07T12:02:27","slug":"pricing-table-in-elementor-switcher","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/pricing-table-in-elementor-switcher\/","title":{"rendered":"How can you show Yearly\/Lifetime\/Monthly pricing table with switcher Widget?"},"content":{"rendered":"\n<p>If you have a SASS product or service with some pricing plan like monthly, yearly, lifetime, etc. you can use the Switcher widget to show the different pricing plans comparatively.<\/p>\n\n\n\n<p>Showing a pricing table or any content in The Plus Addons for Elementor Switcher widget is very simple, by using an Elementor template.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Switcher widget, <a href=\"\/docs\/switcher-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/switcher?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Here we will show a monthly and yearly pricing table.&nbsp;<\/p>\n\n\n\n<p>For this, we need to create separate templates for both monthly and yearly pricing tables.<\/p>\n\n\n\n<p>To create an Elementor template<\/p>\n\n\n\n<p>Go to <strong>Dashboard<\/strong> &gt; <strong>Templates <\/strong>&gt;<strong> Saved Templates<\/strong>Click on <strong>Add New<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"828\" height=\"468\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/elementor-template.png\" alt=\"elementor template creation steps\" class=\"wp-image-102996\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/elementor-template.png 828w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/elementor-template-300x170.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/elementor-template-768x434.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/elementor-template-600x339.png 600w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<p>In the popup, choose the template type and the name of your template, then click on <strong>Create Template<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-template-name-1024x682.png\" alt=\"elementor template name\" class=\"wp-image-104146\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-template-name-1024x682.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-template-name-300x200.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-template-name-768x511.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-template-name-600x399.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-template-name.png 1092w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you are in the Elementor page builder, you can use The Plus Addons for Elementor Pricing Table widget to create your pricing table.<\/p>\n\n\n\n<p>Once done, save the page to create your template.<\/p>\n\n\n\n<p>You can follow the same process to create a yearly pricing table template.<\/p>\n\n\n\n<p>Once the templates are created, add the Switcher widget on the page and go to the <strong>Content 1<\/strong> tab change the Title as you like, in the <strong>Select Source,<\/strong> choose <strong>Template<\/strong> and set <strong>Content Type<\/strong> as <strong>Template<\/strong>.<\/p>\n\n\n\n<p>Then from the <strong>Elementor Templates<\/strong> dropdown, choose your template. Here it is the Monthly pricing table.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"269\" height=\"665\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/switcher-template-1.png\" alt=\"switcher template 1\" class=\"wp-image-104147\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/switcher-template-1.png 269w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/switcher-template-1-121x300.png 121w\" sizes=\"(max-width: 269px) 100vw, 269px\" \/><\/figure>\n\n\n\n<p>Follow the same process to add the Yearly pricing table template in the <strong>Content 2<\/strong> section and save the page.<\/p>\n\n\n\n<p>That\u2019s it! Now your users can see two different pricing tables and compare them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1151\" height=\"656\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/pricing-table-toggle-preview.gif\" alt=\"pricing table toggle preview\" class=\"wp-image-104148\"\/><\/figure>\n\n\n\n<p>Also check, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/anchor-link-to-elementor-switcher-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to set an anchor link to a Switcher Template in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104381,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,545],"class_list":["post-104145","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-switcher"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104145"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104381"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104145"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}