Styling Pro Sites vs. Hooking our own page to it

Adding more than four levels doesn't look good in pricing tables of Pro Sites. We would like to be able to add more, as well as grouping them, so we could have some "higher use levels" in a separate section.

Another workaround for us would be to connect some other pricing tables template that comes with our theme.
So when a member clicks to sign up for a level in this custom pricing table, should be redirected to the registration page and Pro Site level is selected already.

Any feedback from associated developers, about hooks/filters that could help our devs to work on this, would be appreciated!

  • Lindeni Mahlalela

    Hello us-Sunnah

    I hope you are doing great today. Thank you for contacting us regarding your needs.

    I think the best option if your theme already has a pricing table, it would be better for you to use these tables and have groups of levels on separate pages and link from the buy button of each package from the pricing table to the Pro Sites page.

    Firstly, you need to copy the following code and paste it on your theme's functions.php file or create a new .php file, paste the code and upload it to your website to the folder 'wp-content/mu-plugins'

    add_action('wp_footer', 'psts_level_script' );
    function psts_level_script(){
    	if ( is_page('pro-site') ): ?>
        <script type="text/javascript">
    		jQuery(document).ready( function(){
    			//hide the pro-site pricing table
    			jQuery("#prosites-checkout-table").hide(); 
    
    			//select the level based on url
    			jQuery("input[name='level']").val('<?php echo esc_attr( $_GET['level'] ); ?>');
    
    			//show the blog details form
    			if ( jQuery("input[name='level']").val() != "" ) {
    				jQuery("#prosites-signup-form-checkout").removeClass('hidden');
    			}
    		});
    	</script>
        <?php
    	endif;
    }

    Secondly, on your pricing table specify the purchase or subscription url in the following format:

    <a href="http://youdomain.com/pro-site?action=new_blog&level=XYZ">Signup</a>

    Where XYZ is the level corresponding to that button/link in the pricing table. Replace XYZ for each Pro Sites level.

    If you have a form to collect the data from the user then you can also add those to the redirect url and use and extend the script to include the following two lines just above the "//show the blog details form" line so you will have these three lines in script:

    //select the level based on url
    jQuery("input[name='level']").val('<?php echo esc_attr( $_GET['level'] ); ?>');
    jQuery("input[name='blogname']").val('<?php echo esc_attr( $_GET['blogname'] ); ?>');
    jQuery("input[name='blog_title']").val('<?php echo esc_attr( $_GET['blog_title'] ); ?>');

    and the redirect url will be something like this:

    <a href="http://youdomain.com/pro-site?action=new_blog&level=' . $level . '&blogname=' . $blogname . '&blog_title=' . $blog_title . ">Signup</a>

    You will have to populate the variables in the url based on user input.

    Please refer to this thread which addresses a similar request but using gravity forms for accepting user input from a form then pass the data to the Pro Site page and pre fill the form with the data from the url.

    I hope this helps. Please let us know if you need any further assistance and we will always be happy to help in any way possible.

    Have a nice day.
    Mahlamusa

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.