Create Better Divi Headers

Free Download: Divi Pricing Sections with Monthly-Yearly Switch

by | Aug 30, 2018 | 153 comments

Today’s freebie is the Divi Pricing Section layouts with a switch allowing you to switch among two different pricing types or periods, for example, monthly vs yearly. If you want to provide your customers with two different payment choices then these sections are exactly what you need. Check out the demo preview below or click the button to view the live demo.

Demo

How To Download

This download is available to our subscribers only, to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.

The existing subscribers don’t need to subscribe again, they always receive the updated freebies package to their confirmed email address automatically.

Requirements

There are no any special requirements for these section layouts, however, it is advised to use the most recent versions of Divi.

Installation

The download .zip file includes all of the previously available free section layouts plus the newly added two Pricing section layouts.

After you receive the email with the download link and download the freebies .zip file, unzip it and find the divi-pricing-tables folder containing the pricing section layout folders of both Pricing Section layouts(2-table and 3-table sections), each of them containing a JSON file and the custom CSS file as well as the README.txt file with installation instructions.

The installation is straight forward. First import the JSON file of the section layout into the Divi Library.

Then add the CSS from the CSS file into the Custom CSS field on Divi -> Theme Options page or to you child theme style.css file.

Next, open the page or post where you would like to have the Pricing section and add the imported section from the Divi Library.

Save everything and you’re done! At this point you will have a working custom Pricing section with a monthly-yearly switch.

How To Customize

Please note that the pricing switch won’t work in Visual Builder, you will see both pricing sections at the same time being able to customize them like any other section. The 2-table Pricing section will look like this in VB:
And the 3-table Pricing section will look like this in VB:
When customizing the section layouts don’t forget to check the custom CSS as well since some of the custom styling is applied using custom CSS, for example, the active switch button background color.

I hope you’ll find these free pricing sections useful, go ahead and subscribe now to grab your copy for FREE!

View Live Demos & Get Divi MadMenu

    Download FREE Divi Sections

      153 Comments

      1. Michael

        Hi, ive tried to upload the section, but nothing shows. Could you please help?

        Reply
        • Ivan Chiurcci

          Hi Michael.

          Is this happening in Divi Builder or frontend? This can be a caching issue, try clearing cache and check again. Also check the console for any JS errors on your website.

          Reply
      2. Lonni Sandbjerg

        Hi Ivan! Super great freebie. I really love it.
        When I downloaded the files, I didn’t get a css file? (I’m a newbie)

        Reply
        • Ivan Chiurcci

          Hey Lonni!

          Sorry for the late reply. The latest version of the freebie does not come with a separate CSS file, the CSS is already included into the layout using a Code module, you can edit the CSS right in the Divi Builder after adding the section layout to your page.

          Reply
      3. Damien

        Hi ivan, the plugin works perfectly. Just looking for how to adapt it for tablets. Using the 3 tabs, but it only displays 2 tabs + 1 below on tablets.

        Reply
        • Ivan Chi

          Hi Damien.

          Try setting the pricing table width to 100% for tablet, it’s set to 50% by default.:

          @media all and (max-width: 980px){
          .dvcs_pricing .et_pb_pricing_table {
          width: 100% !important;
          margin: auto;
          }
          }

          Hope this helps.

          Reply
      4. Tom

        This layout is wonderful thank you so much !
        Could you help me with a little edit ? I woul like to move the currency symbol. Currently it is at the left top and i want it at right top.
        How do i need to edit in the css ?
        Best Regards

        Reply
        • Ivan Chi

          Hi Tom.

          Try adding some margin-left to the currency symbol, use browser dev tools to find the correct selector.

          Reply
      5. Ray

        Hope you can help with this I know it’s,s free but having an issue with mobile.

        When we click the yearly it changes but we get an overlap at the bottom of the page. When we click monthly it looks great any idea how to fix this?

        Reply
        • Ivan Chi

          Hi Ray.

          Maybe it’s a caching issue, try clearing it and see if that helps.

          Reply
      6. Benjamin

        Hi there! I absolutely love this layout, thank you so much for creating.

        I’ve got everything figured out for the most part, however I am having a weird issue where the primary pricing table middle column is supposed to have white text (on dark background), which shows fine in the Divi visual builder, but when I exit the text is dark.

        I’ve tried clearing cache on everything multiple times… but nothing seems to fix it. I have also looked everywhere for custom CSS and can’t seem to find a place to adjust this either, unless I am missing something. Any help you can provide would be super helpful.

        Thanks!

        Reply
        • Ivan Chi

          Hi Benjamin.

          Happy to know this layout is helpful for you. Did you try setting the middle table body text color using that table’s Design->Body Text->Body Text Color setting(or the parent module’s same setting, try both)?

          Reply
          • Benjamin

            Sorry for the late reply, I didn’t receive a notification for the comment for some reason. Yes, I did check that in the first place before checking the custom CSS, I just double checked and tried again.

            Reply
            • Ivan Chi

              I’ve checked your page again and see that the middle(featured) pricing table text is white, so, if you still see a dark text then you should clear cache on your end, or use a different browser/private window.

              Reply
          • Benjamin

            You can ignore that and delete this thread, I figured it out!

            Reply
            • Ivan Chi

              OK, glad to hear that :)

              Reply
          • alex

            Hi! I love this concept, but I want to just use it to toggle between whole divi sections (instead of just the pricing tables). How could I accomplish this? Thanks!

            Reply
      7. Steven

        I would like this free file however have not yet received the email. Please send this to me. I have subscribed.

        Reply
        • Ivan Chi

          Hi Steven. You should have received it by now, please check your inbox again.

          Reply
      8. Archana Patil

        please provide the code for 3rd button.
        thank you

        Reply
      9. Grant Boshoff

        Hi Ivan!

        Thanks for this great freebie! We have been using on our site for about a year now and it has been working perfectly, but I have just noticed today that the monthly/yearly switcher has stopped working. I have not made any website changes in many months, so I can only assume that it must have been due to an automatic WP update.

        Are you able to offer any advice on how I might debug this? I am not a JS expect at all, so I don’t know where to start.

        Reply
        • Ivan Chi

          Hi Grant.

          Please use the JS code from the latest version of this freebie, the email with the link to download the updated version has been sent on Dec. 26, 2020, find that email and download the freebie. The updated JS code is in the Code module of the corresponding layout, replace the old JS on you site with the updated code, clear cache and check again.

          Reply
      10. Shari

        Hi Ivan

        Thanks for your awesome module :)

        I have implemented this on my site with a 3col + 2col under first button and 3 col + 2col under 2nd button.
        All are visible on the first button, but once you click on the 2nd button they are stacked underneath each other and for the life of me I cannot figure out what I need to alter to fix this.

        I hope you may have a moment to help me. Thanks in advance

        Reply
        • Ivan Chi

          Hi Shari.

          Try this CSS:

          .dvcs_pricing:not(.dvcs_active) {
          position: absolute !important;
          }

          .dvcs_pricing.dvcs_active {
          position: relative !important;
          }

          Use !important only if it does not work without !important.

          Reply
          • Shari

            Ivan, you are a legend! – it worked (without !important) yaaaaay!

            Thank you so much for helping me out, I really appreciate it.

            Have an awesome day :)

            Reply
      11. Mathis

        Hi there,

        Amazing Freebie ! I downloaded it and used it on my site, however both pricing tables literally disappear when I click on the lifetime option. What could have gone wrong ?

        Thanks you and have a great day,

        Regards,

        Mathis Claudel

        Reply
        • Ivan Chi

          Hi Mathis.

          Hard to tell without inspecting the page. Please use the browser dev tools to inspect the page and find out what CSS is hiding the active section. Check also the Console for any JS errors.

          Reply
      12. Miyo

        This is perfect what i was looking for.
        But where to find the custom css to change. Since is installed with json.
        Not sure where to find your custom css to edit.

        I checked button custom , page custom css but unable to find your custom css which is injected with the json file.

        please help

        Reply
        • Ivan Chi

          Hi Miyo.

          You can find the custom CSS in the Code module of the section layout, just switch Divi Builder to Wireframe mode and you will see it. Same with the JS code.

          Reply
      13. Sam Riegsecker

        For some reason when I click the annual button, it throws me to the top of the page and doesn’t toggle anymore. Not sure how to fix that.

        Reply
        • Ivan Chi

          Hi Sam,

          this issue might be happening because in WP 5.6 the old version of jQuery is dropped and some of the functions are deprecated now.

          To fix it you’ll need to edit the JS code in the Code module of the Pricing section layout.
          Open the Code module and replace all instances of the

          .click(function(event) {...

          to

          .on("click", function(event) {...

          and the

          $(window).load(function() {...

          to

          $(window).on("load", function() {...

          Hope this helps.

          Reply
          • Jürgen Fae

            Hi
            thx – I had the same issue. this resolved it for Chrome, but the problem is still there on Safari. any idea?

            Reply
      14. Jeff

        This is wonderful! I’ve been able to customize everything with one exception – on my life site, beneath the table, I get a giant blank space. This isn’t visible on my Divi editor and I have no bottom padding specified anywhere. Is it part of your code, or do you know why it would be happening? I’ve linked to the development page. Thank you so much!

        Reply
        • Ivan Chi

          Hi Jeff.

          You’ve set the min-height of the row to 1513px, just remove it in the Row Settings->Design->Sizing.

          Reply
          • Jeff

            My god, thank you. So simple and I did not notice it!

            Reply
      15. David Hamby

        Hi Ivan,

        Thanks SO much for these layouts–they’re fantastic! Like others, unfortunately, the toggle isn’t working (showing both pricing tables). l’ve tried the suggestions you’ve given to others (cleared cache, ensured there’s only 1 active CSS class, checked Divi Theme Options settings, etc.) Clearly I’m missing something. Any tips?

        Reply
        • David Hamby

          Hey! Pretend I don’t exist. I’ve solved my problem by actually reading. Crazy how that works.

          Reply
      16. Selina Charmaine

        Hi Ivan,

        Thanks for this great plugin. I’ve installed and set up but when viewing on the live site the ticks which would replace the “+” in the backend (as well as the “-” things that are not included) are showing as back arrows “<" and also have a tiny numbered bullet list. Not sure what has gone wrong. Please advise.

        Reply
        • Ivan Chi

          Hi Seline.

          Make sure the icon code has the backslash character, it should look like this: content: “\4e”. So, the correct CSS is this:

          .dvcs_pricing_b .et_pb_pricing li>span:before {
          content: "\4e";
          }

          Find and fix it in the custom CSS of the freebie.

          Reply
      17. Francis

        I have 4 column toggle module. Is it possible to have these effect ?? wich when i click the button I have antoher information\
        Thanks in advance.

        Francis

        Reply
      18. Ray John

        Hi Ivan,

        Thanks for this freebie!

        Would there be any way to make the columns equal in size? And what would be the best way to contain the contents of the columns, as I have lots of items and it exceeds the table itself.

        Thanks in advance!

        Reply
        • Ivan Chi

          Hi Ray,

          do you mean making all pricing tables of the same height? You can do that by adjusting the padding in the module settings.
          Not sure what you mean in your second question, sorry.

          Reply
      19. Wilson Wilson

        Hey! I keep trying to subscribe but I keep getting the message unauthorised

        Reply
        • Ivan Chi

          Hi Wilson. That’s weird, can you please try a different email address?

          Reply
      20. Marc

        I tried to put a comment. I’m looking for the code to add a third button for a third choice. Where is it ? Thank you very much.

        Reply
        • Ivan Chi

          Hi Marc.

          These pricing sections are desgned to have 2 buttons. If you want to add additional buttons you’ll have to edit both the CSS and JS code.

          Reply
          • Marc

            Sorry for 2 comments. Well I succeed on the JS but something is wrong with the CSS because if i follow the logic the third price table doesn’t show on edit visual builder. It works but need to edit from the library and reupload it always.

            Any idea on it or are you going to develop a version 3 buttons ?

            Reply
            • Ivan Chi

              Make sure the absolute positioning and z-index are not applied in VB, the price table is there but is hidden behind.

              I don’t have any plans for a 3-button version at the moment but who knows… :)

              Reply
            • Shanks

              Hi Marc,
              Did you manage to get this working? 3 tabs? I am also trying to add one extra tab, edited CSS and JS but still, something is missing

              Reply
              • Shanks

                Update : Ok, I got it, Thank you Ivan for this post

              • Ivan Chi

                You’re welcome, Shanks. Glad you’ve sorted it out.

              • 0zz

                Hi Shanks,
                Im not good with CSS or JS i need help in adding just one more table so that ill be able to learn and understand how to add more wish you could help :(

              • nik

                Hey Sharks,
                how did you fix the problem?
                thx

              • Lara Vyenne

                Hi Shanks or Ivan,

                Can you please share your code for the third button? I couldn’t make it work and I really need it.

      21. Marc

        Hi, thank you very much for your work. I would like to add a third button for a third list of prices. How can i do that ?

        Reply
      22. Rod Dagan

        hi signed up but no go with the download just a mailerlite thankyou

        Reply
        • Ivan Chi

          Hi Rod,

          that’s the subscription confirmation email, you need to confirm your email address first and after that you’ll receive another email with the download link.

          Reply
      23. Philip

        Hey Ivan! Thank you for creating this freebie! I just have a problem after I have added the section my page, I can’t save the page anymore. When I remove your sections, it works well. Would be really great if you could help me out with that.

        Error text:
        An error has occurred while saving your page. Various problems can cause a save to fail, such as a lack of server resources, firewall blockages, plugin conflicts or server misconfiguration. You can try saving again by clicking Try Again, or you can download a backup of your unsaved page by clicking Download Backup. Backups can be restored using the portability system while next editing your page.

        Contacting your host and asking them to increase the following PHP variables may help: memory_limit, max_execution_time, upload_max_filesize, post_max_size, max_input_time, max_input_vars. In addition, auditing your firewall error log (such as ModSecurity) may reveal false positives that are preventing saves from completing.

        Lastly, it is recommended that you temporarily disable all WordPress plugins and browser extensions and try to save again to determine if something is causing a conflict.

        Reply
        • Ivan Chi

          Hi Philip.

          Make sure all the PHP variables mentioned in the error message have values matching or greater than the recommended values in Divi->Support Center. The Pricing Section is a normal JSON file like any other Divi layout, it should not cause any issues. You might want to contact ET support regarding this issue as well.

          Reply
          • Andy Kennedy

            Hi there @Philip,

            I’m wondering if you ever found a solution to this problem? I am having the same issue as you reported above…. Very frustrating as this module is an excellent piece of work by @Ivan.

            Thanks,

            Reply
        • Andy Kennedy

          Hi Philip,

          Did you get a solution to this? I am having the same issue..

          Reply
        • Ben

          Hi Philip! It works now? I have the same problem and nothing works for me! I try everything..memory_limit etc.
          But when i try to save it screwed my page!

          Reply
          • Ivan Chi

            Hi Ben. The live demo works without any issues, I’ve updated Divi to the latest version(it’s 4.9.7 at the time of writing this) and don’t see any issues, it just works.

            Make sure you install it properly and you should not have any issues unless there is something else interfering(cache, conflicts with some other CSS and JS, host issues, etc.), you need to troubleshoot that. It’s just a normal Divi Builder section layout with some simple custom CSS and JS applied to it which should not cause the issue you’re having.

            Btw, if you had the old version installed (which required adding the custom CSS manually from a file after adding the section to your page) then you need to remove that CSS and add only the freebie section into your page, the latest updated freebie already contains both the CSS and JS code in the Code modules.

            Hope this helps.

            Reply
      24. Joe Styer

        Hi Ivan

        How long do you need to wait for the confirmation email so I can get the download link. Been waiting quite a while.
        Thank You

        Reply
        • Ivan Chi

          Hi Joe.

          You will not receive the confirmation email because you are an existing subscriber and your email address has already been confirmed.

          I’ve recently updated all the freebies for the latest version of Divi and sent the email with download link to all subscribers on November 17, 2019. Please search for the email from Divicio.us and download the package from there.

          If it arrived into your spam folder then “unspam” it so that you don’t miss our emails in the future.

          Reply
      25. Billy the Kid

        Hi Ivan!
        Man, you deserve a high five for this amazing Freebie! ?
        Nevertheless, it’s showing me some bugs on my end. I hope you don’t mind taking a look.
        1. While hovering on the buttons, text disappears. It must be something related to the styling CSS part I guess?
        2. Most important, while scrolling & hovering on the annual price table, there’s a glitch where the table appears and disappears like a broken lamp.
        I leave you the URL on the comment box below
        Thanks you so much in advance!
        PS. Pricing table is at the bottom of the page.

        Reply
        • Ivan Chi

          Hi Billy.

          1. Please check my comment below about using a stronger selector for switch button colors.
          2. That glitch is happening because the pricing table positioning is overridden(changes from absolute to relative) on hovering over. Add this CSS to prevent that:


          .dvcs_pricing_2.et_hover_enabled:hover {
          position: absolute;
          }

          Hope this helps.

          Reply
      26. Julie Dulong

        Hi Ivan,

        Great layout, thanks!

        I’m having some issues with the button styling though.

        I’ve changed the hover state background-color in the css but the font color doesn’t work (should be #ffffff;) no matter what I try.

        Can you help?

        Reply
        • Ivan Chi

          Hi Julie.

          Use a stronger selector in custom CSS because it is being overridden by the Button module settings. Try this:


          body #page-container .et_pb_button.dvcs_switch_btn_1.dvcs_active,
          body #page-container .et_pb_button.dvcs_switch_btn_1.dvcs_active:hover {
          background-color: #ed0265!important;
          color: #ffffff!important;
          }

          I added the .et_pb_button class to the selector and it seems to work. Do the same for the second button.

          Reply
          • Julie Dulong

            Awesome! That did it.

            Thanks again for the help and the terrific layout!

            Reply
            • sylappan

              How can i get Toggle Switch with price table code

              Reply
              • Ivan Chi

                Hi sylappan. You need to subscribe, this freebie is exclusive to subscribers.

      27. Adam

        Hi Ivan
        Thank you for the great module. I have subscribed I also confirmed my email address. Unfortunately I haven’t received welcome email with the download link. Hope you get this sorted soon.
        Thank you

        Reply
        • Ivan Chi

          Hi Adam.

          Sometimes delivery may take a bit longer, please check again later.

          Reply
      28. Julie Croyal

        Hello there, I ask to download your awesome freebie yesterday but I didn’t receive anything :( (even in y spam box). Can you do anything for me ?

        Reply
        • Ivan Chi

          Hi Julie.

          The confirmation email has been sent to your email address, please confirm your email and after that you’ll receive the Welcome email with the download link.

          Reply
          • JC

            Tks !

            Reply
      29. Gab

        Hi Ivan,

        Great plugin. I’m new to Divi, CSS, and am in no way techie, but have been able to make tailor your plugin to my needs.

        Having some trouble switching the button style to the button style that’s saved to my library. Any tips?

        Reply
        • Ivan Chi

          Hi Gab.

          The button background color can be changed in the Button module settings but the active button background color needs to be changed in the custom CSS provided, it is commented accordingly.

          Reply
          • Gab

            Thanks for the reply Ivan. I’m able to change the colors, but I guess the better word choice would be I’m struggling to change the button to look like other buttons on our site. I tried using one from the library we had but it wouldn’t let me insert it into the module.

            Reply
            • Ivan Chi

              There is nothing special about the buttons(they are regular Button modules) except for the custom CSS classes assigned to them in Button Settings->Advanced->CSS ID&Classes->CSS Class (starting with dvcs_switch_btn_). These classes need to be there for the switch to work properly, so, if you add your own buttons just copy their classes and it will work.

              Also make sure the row containing the switch buttons has the dvcs_pricing_switch_row class assigned to it.

              Reply
              • Gab

                Thanks, Ivan for the quick response! I will definitely give it try.

              • Gab

                Hi Ivan! Was able to get the button switched, but having a slew of problems (even my developer is too) in trying to change the selection buttons above the pricing tables.

                I’ll change the colors in the side panel, but the color changes are not appearing. It’ll allow me to show/hide icon, but the actual button itself – no change in color (desktop or hover). Any help or direction is greatly appreciated.

              • Ivan Chi

                Hi Gab.

                Do you mean the active button colors? You need to change it in the custom CSS, please read my replies to Cameron and Julie Dulong, might be helpful.

              • Gab

                We tried Ivan and it’s still not working. We followed what you said regarding CSS, comments, etc. My developer said to ask you the following:

                Ask him to look at the page and see where the yellow is coming from and why button 2 is staying blue and not changing yellow on hover.

                This is the URL: staging.scholarshipinformer.com/join-scholarship-edge

                Any guidance is helpful. We’re just trying to locate where the yellow is coming from exactly.

              • Ivan Chi

                Hi Gab.

                The button-1 yellow hover color is set in the buttom module settings, and the button-2 is not changing to yellow on hover because you’ve set it’s hover color to blue in the button module settings. Change it to yellow, clear cache and try again.

                P.S. Why doesn’t your developer inspect the page himself? :)

              • Gab

                I didn’t get a notification that you had replied, so I apologize for the late response!!! And he did!!! I think maybe we had reached our mental capacity trying to get it to work. I appreciate your fast response and for building a great plugin :-)

      30. Ben Rickard

        Hi Ivan,

        Loving the pricing module, thanks. I’m trying to get the two tables the same size but when I flag both of them (or neither of them) as featured the right hand table is still a bit bigger. How can I make them the same size? Thanks! Ben

        Reply
        • Ivan Chi

          Hi Ben.

          Try adjusting the Spacing for each of the tables in module settings.

          Reply
          • Ben Rickard

            That worked, thanks very much!

            Reply
      31. Joonas

        I can’t seem to add the pricing tables from the imported section from the Divi Library. I imported them normally to the library and added the CSS. I can’t see the pricing tables in visual builder. Any idea what am I doing wrong?

        Reply
        • Joonas

          Ahh, never mind, just got it working! Thanks for the freebies, Ivan!

          Reply
          • Ivan Chi

            Ok, glad you’ve sorted it out, Joonas. You’re welcome :)

            Reply
      32. test

        nice

        Reply
      33. Alex

        Hello Ivan,

        thank you for that but before download : should I use another module instead of pricing one ? Can I display other content that juste a pricing tab ?

        Thanks

        Reply
        • Ivan Chi

          Hi Alex.

          It should work with other modules too. Just copy the custom CSS classes added to the Pricing Tables modules(dvcs_pricing_b_1&dvcs_pricing_b_2 for two-tables demo and dvcs_pricing_1&dvcs_pricing_2 for three-tables demo) and add them to the modules you want to use.

          Reply
      34. irfanullah

        Hello, I have done the subscribe. but I can’t receive a download link.

        Reply
        • Ivan Chi

          Hi Irfan,

          it shows as sent, please check your inbox again(and maybe spam folder too).

          Reply
          • Alex Barkley

            how long after confirming the subscription will I receive the download link

            Reply
            • Ivan Chi

              Normally, it’s sent immediately after confirmation.

              Reply
      35. Nick

        Hi Ivan,
        I’m not getting the change from when I save. It keeps showing both of them…

        financialwebpro.com/pricing

        It still shows both… any advice?

        Reply
        • Nick

          also im no good at CSS at all so Im not sure how to keep both monthly and yearly styles the same but I know how to change the wording etc

          Reply
          • Ivan Chi

            The easiest way to apply the same styling to both yearly and monthly pricing tables is to duplicate the one you want use and then change the content in Divi Visual Builder. Make sure only one of the modules has the dvcs_active class otherwise the switch won’t work.

            Reply
        • Ivan Chi

          Hi Nick,
          you didn’t add the custom CSS that comes with the freebie, add it and it will work.

          Reply
          • Nick

            I did add it in the theme options page

            Reply
            • Nick

              Youre talking to a new guy to css etc so Im still not sure what im doing wrong :(

              Reply
              • Nick

                I deleted everything and started again and got the same result, not sure what I am doing thats not allowing it to work…

            • Ivan Chi

              Please clear cache after you apply the CSS, I think it is a cache issue. And maybe also disable CSS minification if it is enabled.

              Reply
              • Nick Fisher

                i don’t know why but its working perfectly now – if I have more questions I will reach out.
                Thanks Ivan!

              • Ivan Chi

                You are welcome Nick. Glad to know it works :)

          • Nick

            not sure if you got my other messages they aren’t showing…. still not working after deleting and reinstalling 3 times :(

            Reply
            • Ivan Chi

              Reinstalling won’t fix it, most probably it’s a caching issue, clear cache and try again.

              Reply
              • Nick Fisher

                I use chrome and tried that and its still not working

              • Ivan Chi

                Try disabling the Minify And Combine CSS Files option in Theme Options and also the Static CSS File Generation option in Theme Options->Builder->Advanced, then purge cache and see if it works.

            • Nick

              Ivan,
              Im trying to get both the colour schemes to look the same but it wont work in the divi builder, can you pls advise?
              I just want the details to change not the colours, if that makes sense.
              Im very new to this and willing to give you temp access to see what I’m doing wrong if you’d like…
              thanks in advance

              Reply
              • Ivan Chi

                Nick,

                as I’ve already suggested in one of my replies, just duplicate the pricing table module you want to use and then change the content in Divi Builder.

                Make sure only one of the modules has the dvcs_active class otherwise the switch won’t work. The CSS class must be in Pricing Tables Settings->Advanced->CSS ID&Classes ->CSS Class input field.

                If you are still having issues feel free to contact me by filling in the support contact form.

      36. Chris

        THIS is golden – saved me so much time & exactly what I wanted

        Reply
        • Ivan Chi

          Thanks, Chris. I’m glad it helped :)

          Reply
      37. Nikolaj

        Hi Ivan
        Any chance that you can find time to answer my question? I LOVE your pricing table, but when I make 5 columns, one is forced down. It seems like they are to wide to fit in 5 in a row. Can I do anything to fix it?

        brandbjergnet.dk/priser-og-praktisk/

        Reply
        • Ivan Chi

          Hi Nikolaj,

          please try the CSS snippet I suggested in my previous reply to your question, it should work.

          Reply
      38. Nikolaj

        Can you help with understanding why I can´t make 5 columns? No matter what I do, the 5th column goes below the others…

        Reply
        • Ivan Chi

          Did you try the CSS snippet I suggested in my previous reply? It should work (also make sure you clear the cache).

          Reply
      39. Nikolaj Hygebjerg

        Hi
        I love the table, but whenever I make 5 columns, the fifth is pushed down – no matter how I try to change the settings. Can I somehow make space for 5 columns?

        Reply
        • Ivan Chi

          Hi Nikolaj,

          you can fix this by setting the pricing table width to 20%, try this:

          .et_pb_column .et_pb_pricing_table {
          width: 20% !important;
          }

          Hope this helps.

          Reply
          • Nikolaj Hygebjerg

            Ah sorry that I have kept spamming you! I couldn´t see my answer before now! Where do I put the CSS? In Userdefined CSS in Advanced tab? Because that won´t work for me :(

            Reply
            • Nikolaj Hygebjerg

              Found it. Sorry for being stupid. Thank you very much!

              Reply
              • Ivan Chi

                OK, glad you’ve figured it out :)

      40. Rachel Schoen

        How do you make the 3-column version stack on responsive tablet & mobile, rather than have 2 tables and 1 straggling? Thank you.

        Reply
        • Ivan Chi

          Hi Rachel,

          by default the pricing tables have a width of 50% on tablets which causes the first two tables align next to each other and the third one moves down. To prevent this from happening the width of a pricing table should be assigned a value greater than 50% so that two tables do not fit into the screen next to each other but stack. So, try the following CSS snippet:

          @media all and (min-width: 768px) and (max-width: 980px) {
          .et_pb_column .et_pb_pricing_table {
          width: 60% !important;
          max-width: 60% !important;
          margin: 15px auto;
          }
          }

          I’ve set a random width of 60% and aligned the tables to center using the margin property.

          Hope this helps.

          Reply
          • Rachel Schoen

            Thanks so much Ivan – you saved the day! This design is VERY nice –– super easy to customize, too. Appreciate your work!

            Reply
            • Ivan Chi

              Glad to be helpful :)

              Reply
      41. Rachel Schoen

        In the 3-column version, how can I get the tables to stack up one on top of another rather than have 2 on tablet?

        Reply
      42. Cameron

        Awesome plugin solution! Quick question: the only color I can’t change using the module is the button that switches between monthly and annual. It is purple and I can’t seem to change it. Any ideas?

        Reply
        • Ivan Chi

          Hi Cameron,

          you can change the active button text color and background color in the custom CSS provided, find the following snippet and adjust the colors per your needs:

          /* set switch button-1 active background color */
          body #page-container .dvcs_switch_btn_1.dvcs_active,
          body #page-container .dvcs_switch_btn_1.dvcs_active:hover {
          background-color: #8300e9 !important;
          color: #ffffff !important;
          }
          /* set switch button-2 active background color */
          body #page-container .dvcs_switch_btn_2.dvcs_active,
          body #page-container .dvcs_switch_btn_2.dvcs_active:hover {
          background-color: #e02b20 !important;
          color: #ffffff !important;
          }

          Reply
          • Kristina

            Hi, can you explain in more detail where I can access this CSS classes so I can influence it? If I try to access in json file which I import later, the json file does not want to import inside Divi library. Thank you

            Reply
            • Ivan Chiurcci

              Hi Kristina.

              First import the section layout into Divi Library and add it to your page, then find the Code module in the layout, it contains the custom CSS and JS code, and edit the code there.

              Hope this helps.

              Reply
              • Kristina

                Hi Ivan,
                Thank you for the fast response. I already imported it, but the problem is that I can’t find the CSS. When going to the Advanced setting, Custom CSS is empty, that is why I tried changing json file itself. Do you have any suggestions?
                Thanks a lot!

              • Ivan Chiurcci

                Kristina, the custom code is added using a Code module but not the section Custom CSS fields. Just switch Divi Builder to Wireframe Mode and you will see the Code module labeled accordingly. Click to open the Code module settings modal and you’ll see the code there.

      43. tom

        Hi nick,

        Your plugin looks very good. i want to give it a try.

        thank you

        Reply
        • Ivan Chi

          Hi Tom,
          I’m glad you like it (I am not Nick though :) )

          Reply
      44. Richard Zimbalist

        Thanks for all your work on this! I seem to be encountering an issue though in which both tables are being list under “monthly” and “yearly” comes up blank? It worked fine when I originally imported it, this started to occur for some reason after customizing the front end color palette. Any suggestions on how to fix this? The temporary url is speakers.ignitemedicalco.com/pricing-table-monthly-yearly-switch/ Thanks in advance!

        Reply
        • Ivan Chi

          Hi Richard,
          only one of the Pricing modules should have the dvcs_active class but in your case both of them have it. This is because you duplicated the active one and customized it without removing the dvcs_active class from it. To fix this issue just remove it from the second module, you can do that in Pricing Table Settings->Advanced->CSS ID&Classes

          Reply
          • Richard Zimbalist

            Ahhh perfect thanks!

            Reply
      45. Ethan

        Thanks for the great work, How can I add more pricing options, 5 in my case?

        Reply
        • Ivan Chi

          Hi Ethan,
          do you mean 5 different switches (like Monthly/Yearly/Weekly etc.) or pricing tables (like Personal, Agency, etc.)? You can have only two switches but you can add any amount of pricing tables in Pricing module settings. Hope this helps.

          Reply
      46. Florens Yildiz

        Very nice option to have :)
        it looks great, so great that i am using it on my new website.

        where do i change the colors of the text in the pricetable ? when i try to in the table settings it does not work and i cant find anything in the css to make it work..

        Reply
        • Ivan Chi

          Hi Florens,
          thanks for using it. You should be able to change the text color in module settings. If you don’t see changes on frontend then try clearing cache.

          Reply
          • Florens Yildiz

            Thanks :) i found out that it was in the individual settings inside the pricemodule

            Reply
            • Ivan Chi

              Ok, great. You’re welcome :)

              Reply
      47. Petr Holusa

        This is nice but on prices tables I very missing second price. Mostly clients want show discounted price and actual price.

        Reply
        • Ivan Chi

          Hi Petr.
          These pricing sections make use of the Divi core Pricing Tables module which unfortunately lacks the feature you need.

          Reply
      48. Nick Haddad

        This is spectacular, great work Ivan!

        Reply
        • Ivan Chi

          Thank you, Nick!

          Reply

      Submit a Comment

      Your email address will not be published. Required fields are marked *

      Get FREE Divi Layouts

      Download 20+ Divi templates for FREE!

      Please confirm your email address to complete your subscription. Thank you!

      Copy link