Custom pricing table for Pro Sites

Hi all,

I think I read all the form posts about styling the pricing table for Pro Sites but cannot figure this one out.

I have a custom pricing table on my site with three plans and only a monthly payment option. I managed to integrate this table in the Pro Sites checkout page. But the problem is that Pro Sites generates it's pricing buttons dynamically. Is there a way to hard code a button for each plan? I think it can be done with the $level variable somehow.

I already bought the pricing table plugin from WebFX. It looks great but it's gonna take heaps of hours CSS'ing to style it the way I like.

Does anybody have a suggestion?

Thanks!
Justin

  • aecnu

    Greetings Justin,

    Welcome to WPMU DEV!

    I managed to integrate this table in the Pro Sites checkout page. But the problem is that Pro Sites generates it's pricing buttons dynamically. Is there a way to hard code a button for each plan?

    Not that I am aware of, I will not say it is impossible but how do we hard code a dynamic button?

    This is most certainly possible but not by default with the plugin, it would take some custom coding. In this case, you should take a look at modifying the plugins CSS first.

    However, there is this option as well that you will want to check out to ease the pain of doing this manually: https://premium.wpmudev.org/forums/topic/pro-sites-custom-checkout-screen-plugin#post-298165

    Thank you for being a WPMU DEV Community Member!

    Cheers, Joe

  • jjanson

    Hi Joe,

    Thanks for your response.

    I already bought the plugin you linked to and it looks great. But it would take too much CSS'ing to get it in the same format of my pricing table.

    However, yesterday I got the buttons working the way I want to. I'm pretty sure it is not the best code ever but it works for me. Here's what I did.

    // Changed code for custom pricing grid
    
    		if (in_array(1, $periods)) {
    			  $current = ($curr->term == 1 && $curr->level == $level) ? ' opt-current' : '';
    			  $selected = ($sel_period == 1 && $sel_level == $level) ? ' opt-selected' : '';
    
    				$content .= '<table><tr>';	
    
    				$content .= '<td>';
    				$content .= '<div>';
    
    				$content .= '<h2>Basic</h2>';
    				$content .= '</div>';
    
    	 			foreach ($levels as $level => $data) {
    
    					if ($level == 1) {
    
    				$content .= '<table id="psts_checkout_grid"><td class="level-option"><div class="pblg-checkout-opt'.$current.$selected.'">
    										<input type="hidden" value="'.$level.':1"/>
    										<input type="radio" name="psts-radio" class="psts-radio" id="psts-radio-1-'.$level.'" value="'.$level.':1" />
    										<label for="psts-radio-1-'.$level.'">
    										Select Basic Plan
    										</label>
    										</div>
    										</td>
    										</table>';
    
    					}
    				} 
    
    				$content .= '<div>';
    
    				$content .= '<ul>';
    					$content .= '<li>';
    					$content .= ' <span>Some content in the first column</span>';
    					$content .= '</li>';
    				$content .= '</ul>';
    
    				$content .= '</div>';
    
    				$content .= '</td>';
    
    				$content .= '<td>';
    				$content .= '<div>';
    
    				$content .= '<h2>Professional</h2>';
    				$content .= '</div>';
    
    	 			foreach ($levels as $level => $data) {
    
    					if ($level == 2) {
    
    				$content .= '<table id="psts_checkout_grid"><td class="level-option"><div class="pblg-checkout-opt'.$current.$selected.'">
    										<input type="hidden" value="'.$level.':1"/>
    										<input type="radio" name="psts-radio" class="psts-radio" id="psts-radio-1-'.$level.'" value="'.$level.':1" />
    										<label for="psts-radio-1-'.$level.'">
    										Select Professional Plan
    										</label>
    										</div>
    										</td>
    										</table>';
    
    					}
    				} 
    
    				$content .= '<div>';
    
    				$content .= '<ul>';
    					$content .= '<li>';
    					$content .= ' <span">Some content in the second column</span>';
    					$content .= '</li>';
    				$content .= '</ul>';
    
    				$content .= '</div>';
    
    				$content .= '</td>';
    
    				$content .= '<td>';
    				$content .= '<div>';
    
    				$content .= '<h2>Business</h2>';
    				$content .= '</div>';
    
    	 			foreach ($levels as $level => $data) {
    
    					if ($level == 3) {
    
    				$content .= '<table id="psts_checkout_grid"><td class="level-option"><div class="pblg-checkout-opt'.$current.$selected.'">
    										<input type="hidden" value="'.$level.':1"/>
    										<input type="radio" name="psts-radio" class="psts-radio" id="psts-radio-1-'.$level.'" value="'.$level.':1" />
    										<label for="psts-radio-1-'.$level.'">
    										Select Business Plan
    										</label>
    										</div>
    										</td>
    										</table>';
    
    					}
    				} 
    
    				$content .= '<div>';
    
    				$content .= '<ul class="pricing-plan-details-list">';
    					$content .= '<li>';
    					$content .= ' <span>Some content in the third column</span>';
    					$content .= '</li>';
    				$content .= '</ul>';
    
    				$content .= '</div>';
    
    				$content .= '</td>';
    
    				$content .= '</tr></table>';

    By using if ($level == 1) I created three separate buttons for each plan in it's own column. And it still passes the correct info to PayPal. This way you can integrate any price table you want with Pro Sites.

    I hope this helps someone else too.

    Cheers!
    Justin

  • PC

    Thanks for your post pablogy,

    Its a pretty old thread and the originator is no longer an active member and he did not share what file he changed the code in.

    For custom checkout you can use something like : https://premium.wpmudev.org/forums/topic/pro-sites-custom-checkout-screen-plugin#post-298165

    If you have further questions, kindly create a new thread and provide a link to this thread.

    Cheers
    PC
    Sales &Support