Customize the prices table (CSS)

Hello,

We are trying to build a WordPress Multisite and use Pro Sites to allow our users to upgrade their account, however; we can't seem to customise the pricing table to look like our own.

We would like our pricing tables to look like this "wooblr.co/plans".

Could you please assist?

Kind regards,
Ashley.

  • Nastia

    Hello Ashley

    I trust you are doing well today!

    You can customize Pro Sites pricing tables from your dashboard, Pro Sites > Pricing tables > Styling tab.

    I can provide a CSS code that will be close to what you are looking for.

    For the Title try the following CSS code:

    .pricing-column:first-child li.title {
    background: #2c3e50;
        color: #ffffff;
        font-size: 21px;
        font-weight: 400;
        letter-spacing: 2px;
        border: 0px;}

    For Price color

    .price.price_1{
        background: #2ecc71;
        border: 0px;}

    For Sign Up button:

    button.choose-plan-button.register-new {
        background-color: #2ea3f2;
        color: #fff;
        padding: .5em 1em;
        margin: 0;
        display: inline-block;
        font-size: 0.923em;
        font-weight: normal;
        outline: none;
        cursor: pointer;
        border: none;
        font-family: inherit;
        -webkit-appearance: none;
        transition: all 0.15s ease-in-out;
        border-radius: 3px;
        -webkit-font-smoothing: inherit;
        text-decoration: none !important;
        width: 20%}

    Insert the CSS code inside Custom CSS editor in Pro Sites > Pricing tables > Styling tab and save changes.

    For different colors in tables like this:

    You will have to change core files of the plugin. It is beyond the scope of support we can provide in these forums. Please feel free to post a new job in our Jobs & Pros section on https://premium.wpmudev.org/wordpress-development/ so that a skilled developer can do that for you.

    I hope this helps!

    Kind Regards,
    Nastia

  • Panos

    Hello Ashley ,

    Hope you are having a great weekend :slight_smile:

    Could you please try out the following CSS:

    #prosites-checkout-table{
    	text-align: center;
    }
    
    ul.pricing-column{
    	display: inline-block !important;
    	float: none;
    	clear: both;
    
    }
    
    ul.pricing-column.psts-level-0.hidden{
    	display: none!important;
    }
    
    .free-plan-link{
    	margin-left: 0px !important;
    	width: 100%!important;
    	text-align: center!important;
    }

    and let us know how it goes?

    You can try removing the "!important", I placed them in case we need to override any inline custom styles as I noticed there are some.

    Looking forward to your reply!

    Kind regards,
    Panos

  • Ashley

    Hi Panos,

    Thanks for the response :slight_smile:

    The CSS you provided worked to a degree, but I had to tweak it slightly as the columns have a 30px margin-left by default, putting them visually right by 30px. So by changing this to a 15px margin-left and 15px margin-right this has centred them.

    The .free-plan-link worked for when the user is not logged in (I think?) but I needed to add the class .free-plan-link-logged-in to get it to work all the time.

    Here is the CSS I have now used, incase anybody needs it for future reference :thumbsup:

    .pricing-column {
        width: 25% !important;
    }
    
    #prosites-checkout-table{
    	text-align: center;
    }
    
    ul.pricing-column{
    	display: inline-block !important;
    	float: none;
    	clear: both;
            margin-left: 15px !important;
            margin-right: 15px !important;
    
    }
    
    ul.pricing-column.psts-level-0.hidden{
    	display: none!important;
    }
    
    .free-plan-link-logged-in{
            margin-top: 20px !important;
    	margin-left: auto !important;
    	width: 100%!important;
    	text-align: center!important;
    }
    
    .free-plan-link{
            margin-top: 20px !important;
    	margin-left: auto !important;
    	width: 100%!important;
    	text-align: center!important;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.