Pro Sites pricing tables incompatible with Divi Theme

With the latest Divi Theme installed, the Pro Sites default pricing tables are distorted and missing the features list as shown in the below screenshot of the default checkout page.

  • Dimitris

    Hey there Matt,

    hope you're doing good and don't mind chiming in! :slight_smile:

    Unfortunately, there's no way to redirect the form into another page without some heavy custom plugin coding.
    In order to style it though, you can use simple CSS rules. Unfortunately, I don't owe your theme so it's a bit difficult to proceed here. If you could provide us with a sketch of what you're trying to accomplish though, I'd be more than happy to provide you with the required CSS. :slight_smile:

    Ward regards,
    Dimitris

  • Matt

    I was browsing through the forums and couldn't find any good examples of the Registration Form re-styled.

    Do you have any eye catching design examples and corresponding CSS code to clean up the Registration Form layout so it flows smoothly with the Pricing Tables? I'm looking to present potential buyers with a smooth signup process and the default Pricing Tables + Registration Form feels very Wordpress 1.0ish.

  • Adam Czajczyk

    Hello Matt!

    I'm sure we could help you with some styling but personally I'm not a designer and to tell you the truth I usually can manage "reproducing" rather than "creating" the design :slight_smile: I suppose some of my colleagues here may be better if it comes to that.

    I think however that you may want to ask for inspiration on a Members forum here:
    https://premium.wpmudev.org/forums/forum/members

    Other members of our community often share great inspirations and are willing to help so this may be a good shot. Of course, when you find out how would you like that to look like, we'll be more than happy to help you to achieve that.

    Best regards,
    Adam

  • Dimitris

    Hey there Matt,

    hope you're doing good today! :slight_smile:

    I created a simple stylesheet for you, feel free to add this either in your theme's custom CSS textarea (if it exists) or via a plugin like Simple Custom CSS, and play with it considering colors and paddings/margins. :wink:

    .pricing-column {
        background: transparent;
    }
    .pricing-column .title {
        border-color: transparent;
        background: transparent;
        border-width: 0;
    }
    .pricing-column .title::after {
    	display: none;
    }
    .pricing-column .summary {
        border-color: transparent;
    }
    .pricing-column .summary .price {
        background: transparent;
        color: #262e32;
        font-size: 35px;
    }
    .pricing-column .summary .price .period {
        margin: 20px auto;
    }
    .pricing-column .sub-title {
        border-color: transparent;
    }
    .pricing-column .feature-section {
        border-color: transparent;
    }
    .pricing-column ul li {
        height: auto !important;
    }
    .feature-indicator {
        display: none;
    }
    .pricing-column .feature-section .feature-text {
        padding-bottom: 0;
    }
    .pricing-column .button-box {
        border-color: transparent;
    }
    .pricing-column .button-box button {
        width: 66%;
    }
    .psts-level-1.pricing-column .title {
        color: green;
    }
    .psts-level-2.pricing-column .title {
        color: purple;
    }
    .psts-level-3.pricing-column .title {
        color: blue;
    }
    .pricing-column.featured {
        border: 1px solid lightgray;
        padding: 23px 16px;
        background: white;
    }

    Have a good one,
    Dimitris :slight_smile:

  • Dimitris

    Hey Matt,

    I made some more changes in the CSS, please replace previous snippet with this instead:

    /*
     Theme Name:     2016 Child Theme
     Template:       twentysixteen
     Version:        1.0.0
    */
    
    /* Add Custom CSS after this line */
    .pricing-column {
        background: transparent;
    }
    .pricing-column .title {
        border-color: transparent;
        background: transparent;
        margin-bottom: 30px;
    }
    .pricing-column .summary {
        border-color: transparent;
    }
    .pricing-column .summary .price {
        background: transparent;
        color: #262e32;
        font-size: 35px;
    }
    .pricing-column .summary .price .period {
        margin: 20px auto;
    }
    .pricing-column .sub-title {
        border-color: transparent;
    }
    .pricing-column .feature-section {
        border-color: transparent;
    }
    .pricing-column ul li {
        height: auto !important;
    }
    .feature-indicator {
        display: none;
    }
    .pricing-column .feature-section .feature-text {
        padding-bottom: 0;
    }
    .pricing-column .button-box {
        border-color: transparent;
    }
    .pricing-column .button-box button {
        width: 66%;
    }
    .psts-level-1 .pricing-column .title {
        color: green;
    }
    .psts-level-2 .pricing-column .title {
        color: purple;
    }
    .psts-level-3 .pricing-column .title {
        color: blue;
    }
    .pricing-column.featured {
        border: 1px solid lightgray;
        padding: 23px 16px;
        background: white;
    }
    .alternate {
        background: transparent;
    }
    .pricing-column.psts-level-0 {
        visibility: hidden;
        width: 11.25% !important;
    }
    @media screen and (max-width: 569px) {
      .pricing-column:not[.psts-level-0] {
          width: 100%!important;
      }
      .pricing-column.psts-level-0 {
        display: none;
    	}
    }

    About the "Sign Up" string, this should be "translated" in order to be changed.
    Here's a complete manual page about translations.
    https://premium.wpmudev.org/manuals/using-wpmu-dev/translations/
    Feel free to post back here if more assistance is required on this! :slight_smile:

    Warm regards,
    Dimitris

  • Adam Czajczyk

    Hello Matt!

    Could you please edit a bit the code that Dimitris shared with you? Replace this part:

    @media screen and (max-width: 569px) {
      .pricing-column:not[.psts-level-0] {
          width: 100%!important;
      }
      .pricing-column.psts-level-0 {
        display: none;
    	}
    }

    with this one:

    @media screen and (max-width: 569px) {
    .pricing-column.psts-level-0 {
        display: none;
    	}
    	.pricing-column {
          width: 100%!important;
      }
    
    }

    According to my "in-browser" tests this should do the job :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.