How do you show a FREE pricing table like on EduBlog?

How do you show a FREE pricing table like on EduBlog?

I can't find any good information on this. All my users get is a small bit of text saying "No thank you, I will continue with a basic site for now."

I want to be able to show features that FREE users receive and compare it to PAID.

Any help would be greatly appreciated.

cheers
Andrew

  • Predrag Dubajic
    • Support

    Hey Andrew,

    Hope you're doing well today :slight_smile:

    This is not something currently possible with Pro Sites but there is a workaround that should work.

    First thing you would need to do is create new level and set price at $0, this will be used as your free level.

    Next thing we need to do is hide the current signup button for that table, you can do that with this CSS code:

    .psts-level-1 .choose-plan-button button {
    	display: none;
    }

    You can use this plugin for adding custom CSS:
    https://wordpress.org/plugins/simple-custom-css/

    After that you should go to Pro Sites > Settings and for free level text change "No thank you, I will continue with a basic site for now." to "Signup" or "Free" or something like that, this will be our new button.

    Now create new mu-plugin or use child theme functions.php to add the code below, this will move your free link in place of old button that we hidden with above CSS code:

    function move_free_button() { ?>
    <script type="text/javascript">
    	jQuery(function() {
    		jQuery('.free-plan-link').prependTo( jQuery('.psts-level-1 .button-box') );
    	});
    </script>
    <?php }
    add_action( 'wp_footer', 'move_free_button' );

    All that is left to do is style the link as other buttons or add it different look since it's free level, here is some CSS to get you started with styling it:

    .free-plan-link a {
        border-bottom: none;
        color: #fff;
        padding: 5px 22px;
        background: #000;
        display: inline-block;
        margin: 0 0 13px -25px;
        text-transform: uppercase;
    }

    Let me know if that works for you.

    Best regards,
    Predrag

  • Justin
    • Site Builder, Child of Zeus

    Hi,

    I really like this post. Only problem ive found is when i input the first snippet of code for hiding the button, the button still shows up on the table end and the free button is above the signup. Is there a workaround?

    thanks!

  • Emil
    • Flash Drive

    Hey i used this, and it worked very well. Only issue i have now is, that it don't apply when the user is already logged in. As i can see it changes from .free-plan-link to .free-plan-link-logged-in

    I tried this:

    function move_free_button() { ?>
    <script type="text/javascript">
    	jQuery(function() {
    		jQuery('.free-plan-link').prependTo( jQuery('.psts-level-1 .button-box') );
    	});
    </script>
    
    function move_free_button() { ?>
    <script type="text/javascript">
    	jQuery(function() {
    		jQuery('.free-plan-link-logged-in').prependTo( jQuery('.psts-level-1 .button-box') );
    	});
    </script>

    But no luck when they are already logged in.

    EDIT: Actually that seemed to have worked, but not really as i thought. I will think about some different approach. It could be nice to add a link "sign up for another site", but it doesnt seem to show.

  • Adam Czajczyk
    • Support Gorilla

    Hello Emil!

    I checked the codes that Predrag and Dimitris suggested and it seems to be working for me for both logged in and logged out users.

    You mentioned that the class name for logged-in user changes and this doesn't work and that also there's no "sign up for another site" link for logged in users. Are you sure that the "Allow multiple blogs" option is enabled on "Pro Sites -> Settings -> General" page then?

    If it's disabled users would be able to "switch plan" only instead of signing up for another site.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Jason!

    I think you are using a custom CSS for that button that starts with:

    .free-plan-link a {
    display:inline-block;
    color:#FFF;
    background-color:#00c75e;

    You'll want to find the

    margin-top:10px;

    inside that CSS block and replace it with this:

    margin-bottom:12px;
    margin-top:-2px;

    This seems to be working well when tested in browser but you might want to adjust these margin values.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.