Show Prosite Annual plans first (before monthly plans)

Hello,

I wonder if it is possible to display the Annual plans in Prosite before the Monthly plans?!

I'd like to show the annual plans first and make that the default view, so when someone go to my PRO site page they see the benefits of having annual vs monthly plans.

Here's an example:

Thanks in advance.

  • Nahid

    Hey GeekMaster !
    Hope you are having a great day!

    You can re-order the period selectors of the checkout page using the following Custom CSS:

    .period-selector-container {
        display: flex;
    }
    .period-selector-container label:nth-of-type(3) {
        order: 1;
    }
    .period-selector-container label:nth-of-type(2) {
        order: 2;
    }
    .period-selector-container label:nth-of-type(1) {
        order: 3;
    }

    You can place this in your WordPress Dashboard->Appearance->Customize->Additional CSS or a custom CSS option in your theme or a custom CSS plugin or even in your child theme's style-sheet (style.css file).

    To make the Annual period show by default, you'll have to go an extra mile and add the following Javascript code in your child theme's functions.php file or a mu-plugin :

    function defaultPrositePeriod() {
    ?>
    <script type="text/javascript">
    	jQuery( document ).ready( function( $ ) {
    		$('#prosites-checkout-table .period-selector-container input[checked="checked"]').prop('checked', false);
    		$('#prosites-checkout-table .period-selector-container input[value="price_12"]').prop('checked', true);
    		$('#prosites-checkout-table .summary .price_3').addClass( "hide" );
    		$('#prosites-checkout-table .summary .price_1').addClass( "hide" );
    		$('#prosites-checkout-table .summary .price_12').removeClass( "hide" );
    	} );
    </script>
    <?php
    }
    add_action( 'wp_footer', 'defaultPrositePeriod' );

    Alternatively, you can also add the <script type="text/javascript">...</script> part in a custom Javascript plugin.

    Note: You might have to clear all your server side and browser cache after adding the code to see the change in action.

    Hope this helps. Let me know if this works for you. Thanks!

    Best,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.