Changing the Pro sites pricing table on site

Hi,

I have try to change my pro sites settings, but seems not to change anything.
Is there a way to center my icons, like the text in the fourth row, with 1 GB and 10 GB?

Also i want to ask if there is a way to showing the features for free sites in the table too. Instead of the small link under the table where user can choose to continue with free version, i want to show a extra box, with information about free sites, that should look like the other one people can choose to pay for.

Would this be possible?

Best regards,

  • Denitsa

    Hello
    I hope you're doing good and thanks for reaching us!

    You can centre the icons by adding the following code to the Pro Sites -> Pricing Tables -> Styling -> Custom CSS box that's found at the bottom of the page.

    #prosites-checkout-table .feature-section .icon-tick, .feature-section .icon-cross {
          margin: 0 auto;
    }

    Also i want to ask if there is a way to showing the features for free sites in the table too.

    Can you perhaps check the suggestions given here:
    https://premium.wpmudev.org/forums/topic/pro-sites-pricing-table-free-site

    Let me know how this works for you!

    Regards,
    Denitsa

    • Mikkel

      Thank you Denitsa, the first problem is solved.

      I have try to add the code in mu-plugins and then the css to the css part in pro sites pricing table settings, and also in the themes stylesheet file, but the way it shows up look strange.

      This is my code:

      <?php
      
      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: 146px;">Gratis</li><li class="summary " style="height: 100px;"><div class="price price_1"><div class="plan-price original-amount"><span class="whole">0</span><span class="dot">.</span><span class="decimal">00</span><span class="symbol"> kr</span></div><div class="price-plain hidden plan-21-plain">0.00 kr</div><div class="period original-period">hver måned</div></div><li class="sub-title no-title " style="height: 89px;"></li><ul class="feature-section"><li class="feature feature-0 alternate " style="height: 55px;"><div class="feature-indicator"><span class="text">100MB</span></div></li><li class="feature feature-1 alternate" style="height: 80x;"><div class="feature-indicator"><span class="icon-cross"><p></p></span></div></li><li class="feature feature-2 " style="height: 70x;"><div class="feature-indicator"><span class="icon-cross"></span></div></li><li class="feature feature-3 alternate " style="height: 35x;"><div class="feature-indicator"><span class="icon-cross"></span></div></li></li><li class="feature feature-4  " style="height: 45px;"><div class="feature-indicator"><span class="icon-cross"></span></div></li></li><li class="feature feature-5  " style="height: 45px;"><div class="feature-indicator"><span class="icon-cross"></span></div></li><li class="feature feature-6  " style="height: 45px;"><div class="feature-indicator"><span class="icon-cross"></span></div></li><li class="feature feature-7  " style="height: 45px;"><div class="feature-indicator"><span class="icon-cross"></span></div></li><li class="button-box"><button class="choose-plan-button choose-free-plan">Tilmeld</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
      }

      Best regards,

  • Nithin

    Hi Mikkel,

    Hope you are doing good today. :slight_smile:

    Please add the following CSS code, under Pro Sites > Pricing Tables > Styling > Custom CSS

    #prosites-checkout-table > .pricing-column.psts-level-3 > li.sub-title.no-title {
    	height: 52px !important;
    }
    
    #prosites-checkout-table > ul.pricing-column.psts-level-3 > ul > li.feature {
    	height: 48px !important;
    }

    This should correct the way how the cross icon would display, please test, and see whether you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hey Mikkel,

    Hope you are doing good today. :slight_smile:

    The background for a specific field, is different from the first two package. Can this be change so all look like each other?

    Also the bottom, it seems there is missing some space, can this be added too?

    Please add the following CSS code, under Pro Sites > Pricing Tables > Styling > Custom CSS:

    #prosites-checkout-table > ul.pricing-column.psts-level-3 > ul > .feature-1 {
    	background: rgba( 245, 245, 245, 1 );
    }
    
    #prosites-checkout-table > .pricing-column.psts-level-3 > ul > .feature-2 {
    	background: white;
    }
    
    #prosites-checkout-table > .pricing-column.psts-level-3 > ul > .feature-3 {
    	background: rgba( 245, 245, 245, 1 );
    }
    
    #prosites-checkout-table > .pricing-column.psts-level-3 > ul > .feature.feature-4 {
    	background: white;
    }
    
    #prosites-checkout-table > .pricing-column.psts-level-3 > ul > .feature-6 {
    	background: white;
    }
    
    #prosites-checkout-table > .pricing-column.psts-level-3 > ul > .button-box {
    	padding-bottom: 3.5%;
    }

    Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.