{"id":585,"date":"2021-10-08T14:53:41","date_gmt":"2021-10-08T14:53:41","guid":{"rendered":"https:\/\/spyrowptheme.com\/documentation\/?page_id=585"},"modified":"2021-10-08T14:53:42","modified_gmt":"2021-10-08T14:53:42","slug":"spyro-price-switch","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/spyro-price-switch\/","title":{"rendered":"Spyro Price Switch"},"content":{"rendered":"<div  class=\"tatsu-r1WtAK0a4Y tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-rkeYCt06Et\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-rktXcCpEt\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-ry1V50TNF   \"  ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-others-container\"><ul id=\"menu-others\" class=\"menu\"><li id=\"menu-item-594\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-594\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/404-error-after-demo-import\/\" title=\"404 Error after Demo Import\">404 Error after Demo Import<\/a><\/li>\n<li id=\"menu-item-538\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-538\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-performance\/\" title=\"Site Performance\">Site Performance<\/a><\/li>\n<li id=\"menu-item-536\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-536\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/multi-language-support\/\" title=\"Multi Language Support\">Multi Language Support<\/a><\/li>\n<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-translation\/\" title=\"Site Translation\">Site Translation<\/a><\/li>\n<li id=\"menu-item-540\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-540\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/set-up-single-page-site\/\" title=\"Set up Single Page Site\">Set up Single Page Site<\/a><\/li>\n<li id=\"menu-item-534\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-534\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-theme\/\" title=\"Update Theme\">Update Theme<\/a><\/li>\n<li id=\"menu-item-535\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-535\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-plugins\/\" title=\"Update Plugins\">Update Plugins<\/a><\/li>\n<li id=\"menu-item-550\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-550\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/change-log\/\" title=\"Change Log\">Change Log<\/a><\/li>\n<li id=\"menu-item-542\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-542\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/typehub\/\" title=\"Typehub\">Typehub<\/a><\/li>\n<li id=\"menu-item-541\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-541\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/colorhub\/\" title=\"Colorhub\">Colorhub<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-rktXcCpEt.tatsu-column{width: 25%;}.tatsu-rktXcCpEt.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-rktXcCpEt > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-rktXcCpEt > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-rktXcCpEt > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-rktXcCpEt > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-rktXcCpEt.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-rktXcCpEt.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-rktXcCpEt.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-BJgY79ApEt\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HkoVcR6Nt   \" ><style>.tatsu-HkoVcR6Nt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HkoVcR6Nt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"spyro-modules\/\" target=\"_blank\" rel=\"noopener\"><span class=\"tatsu-inline-link-style2\">CATEGORY &gt;SPYRO MODULES<\/span><\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BynPcRpEF   \" ><style>.tatsu-BynPcRpEF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BynPcRpEF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Spyro Price Switch<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ryMKqCTVt   \" ><style>.tatsu-ryMKqCTVt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ryMKqCTVt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Spyro Price Switch as the name suggests is a simple switch that can be used to choose a price\/plan from any two sets of the prices\/plans you\u2019re offering on your website along with a discount card.<\/span><\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\">&nbsp;<\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">When the button is toggled by the user the focus is shifted to the desired pan and the color of that side changes to the set color.&nbsp;<\/span><\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\">&nbsp;<\/p>\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">In order to add the Spyro Price Switch Module to your page first, edit the page using Tatsu and add a section with a column\/row and then add the Spyro Price Switch Module in it.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1Y5qR6VF   \" ><style>.tatsu-H1Y5qR6VF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1Y5qR6VF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Price Switch Content<\/h4>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-Hk4s9RaVY  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1564px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 34.846547314578%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Price-Switch-Price-Switch.png\" ><img class = \"tatsu-gradient-border\" alt = \"Spyro Price Switch - Price Switch\" title = \"Spyro Price Switch &#8211; Price Switch\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Price-Switch-Price-Switch.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-Hk4s9RaVY .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-Hk4s9RaVY.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ryrVj0pEY   \" ><style>.tatsu-ryrVj0pEY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ryrVj0pEY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">In the content tab, you need to add the <strong>Monthly Pan Title<\/strong>, <strong>Annual Plan Title<\/strong>, and the <strong>Discount Offered Title<\/strong> to display to the user on the front end. These are the only three options available in the Content Tab of the Price Switch.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HknViCp4K   \" ><style>.tatsu-HknViCp4K .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HknViCp4K .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Price Switch Style<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1ABsCT4F   \" ><style>.tatsu-H1ABsCT4F .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1ABsCT4F .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using the Style tab you can style the Price Switch with Colors and Typography Options. In colors, you can alter the Title Color, Active Title Color, Switch background Color, Switch Dot Color, Discount Background Color, and Discount Text Color. You can control the typography of the Price Switch using TypeHub or using any custom font.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJD8jR6NF   \" ><style>.tatsu-rJD8jR6NF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJD8jR6NF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Price Switch Advanced Options<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-S1YPjApVK   \" ><style>.tatsu-S1YPjApVK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-S1YPjApVK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can also modify the working and behavior of the price switch with advanced options like <strong>Spacing<\/strong>, <strong>Border<\/strong>, <strong>Box Shadow<\/strong>, <strong>Animation<\/strong>, <strong>CSS Identifiers<\/strong>, and its <strong>Visibility<\/strong>.<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-BJgY79ApEt.tatsu-column{width: 75%;}.tatsu-BJgY79ApEt.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-BJgY79ApEt > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-BJgY79ApEt > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BJgY79ApEt > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-BJgY79ApEt > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-BJgY79ApEt.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-BJgY79ApEt.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-BJgY79ApEt.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-r1WtAK0a4Y .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-r1WtAK0a4Y .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-r1WtAK0a4Y > .tatsu-bottom-divider{z-index: 9999;}.tatsu-r1WtAK0a4Y > .tatsu-top-divider{z-index: 9999;}.tatsu-r1WtAK0a4Y .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/spyro-price-switch\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-585","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=585"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/585\/revisions"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}