ProSites Featured Tables Free Option

I am offing a free option and several paid options for this site. Is the a way to get the free options to show up on the featured tables? I can't add the free option as a level because there is not price attached to it, but I would like to compare it to the other options (In terms of what space allocation and services it comes with.)

  • Vinod Dalvi

    Hi Carlen,

    I hope you are well today and thank you for your question.

    Currently the free option is displayed as link "No thank you, I will continue with a basic site for now" below the pricing table as shown in the attached screenshot.

    You can edit the pricing table content using the filter prosites_post_pricing_table_content declared as following to show the free option in the table.

    $content = apply_filters( 'prosites_post_pricing_table_content', $content, $blog_id );

    Best Regards,
    Vinod Dalvi

  • Ash

    Hello @Carlen

    I hope you are well today.

    Do you want something like the attached screenshot? I have used the following code, but the code will be different in your case:

    add_action( 'wp_footer', 'wp_footer_cb' );
    function wp_footer_cb(){
        ?>
        <script type="text/javascript">
        jQuery(function($) {
          var _link = $('#psts-free-option').attr('href');
          $('.free-plan-link-logged-in').remove();
          var html = '<ul style="width: 25%; " class="pricing-column psts-level-3 "><li class="title" style="height: 101px;">Free</li><li class="summary " style="height: 124px;"><div class="price price_1"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">40</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-21-plain">$40.00</div><div class="period original-period">every month</div></div><div class="level-summary price_1">Take advantage of <strong>extra savings</strong> by paying in advance.</div><div class="price price_3 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">50</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-23-plain">$50.00</div><div class="period original-period">every 3 months</div></div><div class="level-summary price_3 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$16.67</div><div class="monthly-price-hidden hidden">$16.67</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$70.00</div><div class="savings-price-hidden hidden">$70.00</div></strong> by paying for 3 months in advanced.</div><div class="price price_12 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">60</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-212-plain">$60.00</div><div class="period original-period">every 12 months</div></div><div class="level-summary price_12 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$5.00</div><div class="monthly-price-hidden hidden">$5.00</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$420.00</div><div class="savings-price-hidden hidden">$420.00</div></strong> by paying for 12 months in advanced.</div></li><li class="sub-title no-title " style="height: 29px;"></li><li><ul class="feature-section"><li class="feature feature-0 alternate" style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-1 " style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-2 alternate" style="height: 65px;"><div class="feature-indicator"><span class="text">100MB</span></div></li></ul></li><li class="button-box"><button class="choose-plan-button">Choose Plan</button></li></ul>';
          $('#prosites-checkout-table').append(html);
          $('#prosites-checkout-table > ul').css({
            width: '25%'
          });
        });
        </script>
        <?php
    }

    If you please let me know what content you want to show in last column, I may try to give some code to you.

    Cheers
    Ash

  • Ash

    Hello @m33

    Please try this updated code:

    add_action( 'wp_footer', 'wp_footer_cb' );
    function wp_footer_cb(){
        ?>
        <script type="text/javascript">
        jQuery(function($) {
          var _link = $('#psts-free-option').attr('href');
          $('.free-plan-link-logged-in').remove();
          var html = '<ul style="width: 25%; " class="pricing-column psts-level-3 "><li class="title" style="height: 101px;">Free</li><li class="summary " style="height: 124px;"><div class="price price_1"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">40</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-21-plain">$40.00</div><div class="period original-period">every month</div></div><div class="level-summary price_1">Take advantage of <strong>extra savings</strong> by paying in advance.</div><div class="price price_3 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">50</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-23-plain">$50.00</div><div class="period original-period">every 3 months</div></div><div class="level-summary price_3 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$16.67</div><div class="monthly-price-hidden hidden">$16.67</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$70.00</div><div class="savings-price-hidden hidden">$70.00</div></strong> by paying for 3 months in advanced.</div><div class="price price_12 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">60</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-212-plain">$60.00</div><div class="period original-period">every 12 months</div></div><div class="level-summary price_12 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$5.00</div><div class="monthly-price-hidden hidden">$5.00</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$420.00</div><div class="savings-price-hidden hidden">$420.00</div></strong> by paying for 12 months in advanced.</div></li><li class="sub-title no-title " style="height: 29px;"></li><li><ul class="feature-section"><li class="feature feature-0 alternate" style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-1 " style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-2 alternate" style="height: 65px;"><div class="feature-indicator"><span class="text">100MB</span></div></li></ul></li><li class="button-box"><button class="choose-plan-button">Choose Plan</button></li></ul>';
          $('#prosites-checkout-table').append(html);
          $('#prosites-checkout-table > ul').css({
            width: '25%'
          });
        });
        </script>
        <?php
    }

    Hope it helps :slight_smile: If it doesn't work, please create a new thread in https://premium.wpmudev.org/forums/#question (you can tag me in there if you want)

    Cheers
    Ash

  • Anthony

    Could this not be done better in psts_pricing_table.php, albeit hacking the plugin file directly?

    Could this snippet of code not simply show the free register if able to assign a check to the free level, else show the normal code for the remainder levels?

    $content .= '<li class="row"><div class="column"></div>';
    		foreach ( $levels as $level_id => $level ) {
    			$content .= '<div class="column">
    			          <a href="#" class="button choose-plan" data-level="' . $level_id . '" data-level-name="' . strtolower( $level ['name'] ) . '">Choose Plan</a>
    		            </div>';
  • Ash

    Hello @Anthony

    I hope you are well today.

    Could this not be done better in psts_pricing_table.php, albeit hacking the plugin file directly?

    To be honest, it's not a good idea. As when you will update the plugin, the changes will be lost. So, every time you need to make the changes when you update the plugin.

    Could this snippet of code not simply show the free register if able to assign a check to the free level, else show the normal code for the remainder levels?

    Not sure what you mean :slight_frown: But this code won't make the table as like the original poster wanted.

    If you have any more question on this, please feel free to create a new thread here: https://premium.wpmudev.org/forums/#question

    Cheers
    Ash

  • Carlen

    Ashok,

    I took a few weeks off on this because there were so many pricing table changes coming out I figured that it would either make my solution obsolete, or that a free option would be integrated.

    I am now ready to make my site live, but it looks like the free option comparison isn't built in Yet. The code you offered before also seems to no longer work. Specifically, it doesn't replace the "No thank you, I will continue with a basic site for now." And, the column it adds is below the others and the button does not link to anything.

    A replacement code like you offered before could be great.

  • Vinod Dalvi

    Hi Carlen,

    To make it work could you please try using the following code?

    add_action( 'wp_footer', 'wp_footer_cb' );
    function wp_footer_cb(){
        ?>
        <script type="text/javascript">
        jQuery(function($) {
          var _link = $('#psts-free-option').attr('href');
          $('.free-plan-link-logged-in').remove();
          var html = '<ul style="width: 25%; " class="pricing-column psts-level-3 "><li class="title" style="height: 101px;">Free</li><li class="summary " style="height: 124px;"><div class="price price_1"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">40</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-21-plain">$40.00</div><div class="period original-period">every month</div></div><div class="level-summary price_1">Take advantage of <strong>extra savings</strong> by paying in advance.</div><div class="price price_3 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">50</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-23-plain">$50.00</div><div class="period original-period">every 3 months</div></div><div class="level-summary price_3 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$16.67</div><div class="monthly-price-hidden hidden">$16.67</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$70.00</div><div class="savings-price-hidden hidden">$70.00</div></strong> by paying for 3 months in advanced.</div><div class="price price_12 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">60</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-212-plain">$60.00</div><div class="period original-period">every 12 months</div></div><div class="level-summary price_12 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$5.00</div><div class="monthly-price-hidden hidden">$5.00</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$420.00</div><div class="savings-price-hidden hidden">$420.00</div></strong> by paying for 12 months in advanced.</div></li><li class="sub-title no-title " style="height: 29px;"></li><li><ul class="feature-section"><li class="feature feature-0 alternate" style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-1 " style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-2 alternate" style="height: 65px;"><div class="feature-indicator"><span class="text">100MB</span></div></li></ul></li><li class="button-box"><button class="choose-plan-button choose-free-plan">Choose Plan</button></li></ul>';
          $('#prosites-checkout-table .free-plan-link').before(html);
          $('#prosites-checkout-table .free-plan-link').remove();
          $('#prosites-checkout-table > ul').css({
            width: '25%'
          });
    
          $('#prosites-checkout-table .choose-free-plan').click(function(){
          	$('#prosites-signup-form-checkout').removeClass('hidden');
          });
    
        });
        </script>
        <?php
    }

    Best Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Carlen,

    Is there any way I can hook the "sign-up" button into the javascript, so people can see which one they have selected, i.e., Switching the ul class from "not-chosen-plan" to "chosen-plan"?

    You can achieve this using the following updated code.

    add_action( 'wp_footer', 'wp_footer_cb' );
    function wp_footer_cb(){
        ?>
        <script type="text/javascript">
        jQuery(function($) {
          var _link = $('#psts-free-option').attr('href');
          $('.free-plan-link-logged-in').remove();
          var html = '<ul style="width: 25%; " class="pricing-column psts-level-3 "><li class="title" style="height: 101px;">Free</li><li class="summary " style="height: 124px;"><div class="price price_1"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">40</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-21-plain">$40.00</div><div class="period original-period">every month</div></div><div class="level-summary price_1">Take advantage of <strong>extra savings</strong> by paying in advance.</div><div class="price price_3 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">50</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-23-plain">$50.00</div><div class="period original-period">every 3 months</div></div><div class="level-summary price_3 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$16.67</div><div class="monthly-price-hidden hidden">$16.67</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$70.00</div><div class="savings-price-hidden hidden">$70.00</div></strong> by paying for 3 months in advanced.</div><div class="price price_12 hide"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">60</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-212-plain">$60.00</div><div class="period original-period">every 12 months</div></div><div class="level-summary price_12 hide">That\'s equivalent to <strong>only <div class="monthly-price original-amount">$5.00</div><div class="monthly-price-hidden hidden">$5.00</div> Monthly</strong>. A saving of <strong><div class="savings-price original-amount">$420.00</div><div class="savings-price-hidden hidden">$420.00</div></strong> by paying for 12 months in advanced.</div></li><li class="sub-title no-title " style="height: 29px;"></li><li><ul class="feature-section"><li class="feature feature-0 alternate" style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-1 " style="height: 65px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li><li class="feature feature-2 alternate" style="height: 65px;"><div class="feature-indicator"><span class="text">100MB</span></div></li></ul></li><li class="button-box"><button class="choose-plan-button choose-free-plan">Choose Plan</button></li></ul>';
          $('#prosites-checkout-table .free-plan-link').before(html);
          $('#prosites-checkout-table .free-plan-link').remove();
          $('#prosites-checkout-table > ul').css({
            width: '25%'
          });
    
          $('#prosites-checkout-table .choose-free-plan').click(function(e){
          	var parent = $( e.currentTarget ).parents( 'ul' )[ 0 ];
          	$( parent ).addClass( 'chosen-plan' );
            $( parent ).siblings( 'ul' ).addClass( 'not-chosen-plan' );
          	$('#prosites-signup-form-checkout').removeClass('hidden');
          });
    
        });
        </script>
        <?php
    }

    Cheers,
    Vinod Dalvi

  • Carlen

    Hi Vinod,

    Thank you. This is perfect!

    For anyone else who wants this. I modified the last section of the code just a bit to removed the "chosen-plan" class from the other options just in case the user switches between the free option and the other options a few times it wouldn't get stuck with the other options highlighted.

    $('#prosites-checkout-table .choose-free-plan').click(function(e){
          	var parent = $( e.currentTarget ).parents( 'ul' )[ 0 ];
          	$( parent ).addClass( 'chosen-plan' );
            $( parent ).siblings( 'ul' ).addClass( 'not-chosen-plan' ).removeClass( 'chosen-plan');
          	$('#prosites-signup-form-checkout').removeClass('hidden');
          });
  • Ash

    Hi there

    You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name 'mu-plugins'. If there is no folder in that name, then create a folder, name it 'mu-plugins', create a file inside that, give any name you like and paste the code in there. You don't need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.