Pro Sites Pricing Tables

How can I use a third party pricing table and pass the information to pro sites and the payment gateway section?

  • Abdul Wajed

    Hi Jason Bowers,

    I hope you are well today. :slight_smile:

    As for third party pricing table, unfortunately, there's no "out-of-the-box" solution that would let you use "external" design or tables prepared with 3rd-party plugins that will pass the information to pro sites and the payment gateway section.

    Implementing third party pricing tables into Pro Sites would require custom development. If you're not a developer yourself, then you could look to hire one on our jobs board: https://premium.wpmudev.org/wordpress-development/

    Please note, no WPMU official staff members are allowed to work on the job board.

    With that said, have you checked out all the different built-in table layouts that come with Pro Sites? Perhaps one of those would be a good alternative :slight_smile:

    Hope this helps! Please let us know if you need any further assistance. :relaxed:

    Have a nice day. Cheers!
    Wajed

  • Adam Czajczyk

    Hello Jason Bowers

    I checked the site and I think this CSS should do the trick:

    @media screen and (max-width:719px) {
        .pricing-column {width:100%!important;}
    }
    @media screen and (min-width:720px) and (max-width:960px) {
    .pricing-column {width:28%!important;}
    }
    @media screen and (min-width:961px) and (max-width:1190px) {
    .pricing-column {width:28%!important;}
    }

    You might want to adjust the values but when tested in browser it makes columns a bit more narrow all the way down to the 720px screen width and below that it just makes them 100% wide, one below another.

    Please note: you might need to make sure that this code is added to your custom css somewhere later/below the code that you have already added in order to style your tables as otherwise it might not work at all.

    how can I get the new site section to be a modal window,

    I'm not sure what do you mean. Do you mean the form that shows up after clicking "Sign up" button to be a modal window? If so, I'm afraid that's not possible currently without custom coding. But if I missed the point, please explain it a bit more.

    how can I add content to my checkout page under the pro sites area

    To add the content above the "pro sites area" (pricing tables and checkout) you can simply edit the Pro Sites checkout page in WP editor in back-end. But to add some content below it, an additional "trick" would be necessary.

    If this is a simple content (e.g. just some text) a CSS should do the job like this:

    .page-id-112 .site-main:after {
    	content:' SOME CUSTOM MESSAGE HERE ';
    	color:#000;
    	font-weight:bold;
    	width:100%;
    	text-align:center;
    	display:block;
    }

    You can, of course, adjust text color, font or font weight but you can't use any HTML there as "content" cannot include HTML.

    If you want to add a HTML content, that would take some JS code instead of this CSS so you would want to create an mu plugin with a code like this inside:

    <?php 
    
    function append_pro_site_content_at_the_end() {
    	?>
    	<script type="text/javascript">
    	jQuery(function($) {
    		$('.page-id-112 .site-main').append(' YOUR HTML CONTENT GOES HERE ');
    	});
    	</script>
    	<?php
    }
    add_action( 'wp_footer', 'append_pro_site_content_at_the_end');

    To create an mu-plugin, create an empty file with .php extension (e.g. "my-custom-pro-site-content.php"), put the code in it and upload it into the "/wp-content/mu-plugins" folder of your Mutlisite install; if there's no "mu-plugins" folder inside "wp-content" folder, create one there.

    Best regards,
    Adam

  • Jason Bowers

    Ok, the responsive styles helped a lot. I'll still need to tweak some things.

    As for the content after the pricing tables, if I use the custom plugin method, is the content going to be on every page or just the pricing table checkout page?


    Some other issues I've noticed

    PayPal says security header is not valid. What's causing this?

    Lastly, what if someone is a current pro sites member and needs to update their payment info. Where can they go in their account to fix that? I would like to give them the ability to update any info kept on file from their account.

  • Predrag Dubajic

    Hi Jason,

    As for the content after the pricing tables, if I use the custom plugin method, is the content going to be on every page or just the pricing table checkout page?

    Suggestions from Adam are using .page-id-112 as a selector, which is a unique selector so the code is applied only to your Pro Site page.

    PayPal says security header is not valid. What's causing this?

    Are you seeing this during the checkout?
    Please check your gateway settings in Pro Sites and make sure that you're not using live mode with sandbox credentials, or other way around.

    Lastly, what if someone is a current pro sites member and needs to update their payment info. Where can they go in their account to fix that? I would like to give them the ability to update any info kept on file from their account.

    We are currently looking into improving UX when updating payment details, as at the moment you will need to go to "Your Account" link from admin bar and in there select your level and select the payment again.
    For Stripe, you will see "Replace Existing Card" option that will update credit card details.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Jason,

    Since the button is in admin bar you will need to hook your CSS to that in order to apply it to Pro Site button.

    Here's an example code that you can add as mu-plugin">mu-plugin on your site and that will do the trick:

    <?php
    function style_pro_sites_button() { ?>
    
    	<style type="text/css">
    		#wpadminbar li#wp-admin-bar-pro-site a span {
    		    color: #fff;
    		    background: #000!important;
    		    border: 1px solid #fff!important;
    		    border-radius: 0;
    		}
    
    		#wpadminbar li#wp-admin-bar-pro-site a:hover span {
    			background: #fff!important;
    			color: #000;
    		}
    	</style>
    
    <?php }
    add_action( 'admin_bar_menu', 'style_pro_sites_button' );

    Also, is Membership 2 required for Pro Sites or the Affiliates plugin? I have it installed for some reason, but I don't know if I need it.

    Membership 2 and Pro Sites are both standalone plugins and one is not needed for another to work, and Affiliates has add-on for Pro Sites integration, which is again in no relation to Membership 2.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.