Change the pricing format in the pricing tables

Is it possible to display the pricing as monthly even if the annual price is selected?

As of now, if the user selects the annual plan it shows the annual with the discount applied but I would like to show the monthly price if the annual is selected, for example, if the user selects a year in advance the monthly price will $1.50 instead of $2.00.

Thanks in advance!

  • James Morris
    • WordPress Enthusiast

    Hello kelivi

    I hope you are well today.

    This issue has been flagged for our SLS Team (code experts) so that they can dig into this issue further for you. An update will be posted here as soon as more information is available. Thank you for your patience while we sort through this issue.

    Best regards,

    James Morris

  • James Morris
    • WordPress Enthusiast

    Hello kelivi,

    Unfortunately, I cannot give an ETA on how long it will take to look into this. Our SLS Team deals with the more complex code issues, so it can take a bit more time for them to look into such issues. As soon as one of our SLS Team members have a potential solution for this, they will reply back here.

    Thank you for your patience while our team sorts through this.

    Best regards,

    James Morris

  • Ivan
    • Developer

    Hi kelivi !

    You could try adding the following snippet in a MU plugin ( more info about MU plugins is here )

    <?php
    function wpmu_prosites_change_prices( $content ) {
    	$upload_dir = wp_upload_dir();
    	$filename = $upload_dir['baseurl'] .'/custom_js/prosites_change_prices.js'  ;
    	if ( file_exists( $upload_dir['basedir'] .'/custom_js/prosites_change_prices.js' ) ) {
    		wp_enqueue_script( 'prosites_change_prices',  $filename, array( 'jquery' ), null, true );
    		add_action( 'wp_footer', create_function( '', 'wp_print_scripts( "prosites_change_prices" );' ) );
    	}
    
    	return $content;
    }
    
    add_filter( 'psts_primary_checkout_table', 'wpmu_prosites_change_prices');

    And also, create {wordpress_folder}/wp-content/uploads/custom_js/prosites_change_prices.js file via FTP with the following code

    (function($){
    	$('#prosites-checkout-table .pricing-column:not(.psts-level-0)').each(function(){/home/ioannup/WPMU/wpmu.mu/wp-content/uploads/custom_js/prosites_change_prices.js
    		var origin = $(this).find('.price.price_12').html();
    		var monthly = $(this).find('.level-summary.price_12 .monthly-price.original-amount').html();
    		var description = $(this).find('.level-summary.price_12').html().replace(/That.*A /m, 'A ');
    		$(this).find('.level-summary.price_12').html( description );
    		$(this).find('.price.price_12').html( monthly + '<div class="period">every month</div>');
    		$(this).find('.level-summary.price_12').append( origin );
    	});
    })(jQuery);

    On my side, it looks like that

    Is it OK?

    Best,
    Ivan.

  • kelivi
    • Flash Drive

    Ivan

    I also what the annual tab to be the default first tab.
    i.e When a user lands on the pricing page, they see the annual prices first. They can see quarterly & monthly price by clicking on the little tabs.

    In this other please;
    Annually (default) > Quarterly > Monthly.

    Thanks in advance!!!

  • Ivan
    • Developer

    Hi kelivi !

    Please, change the code of the prosites_change_prices.js file to

    (function($){
    	//reversing the order of periods
    	select = $('#prosites-checkout-table select');
    	select.children().each(function(i,option){select.prepend(option)});
    	//selecting annually period
    	$('input[name=period]').val('12');
    	//editing texts for annually period
    	$('#prosites-checkout-table .pricing-column:not(.psts-level-0)').each(function(){
    		var monthly = $(this).find('.level-summary.price_12 .monthly-price.original-amount').html();
    		var saving = $(this).find('.level-summary.price_12 .savings-price.original-amount').html();
    		$(this).find('.level-summary.price_12').html( '<div>Billed annually</div><div>Save <strong>' + saving + '</strong></div>');
    		$(this).find('.price.price_12').html( monthly + '/month');
    	});
    })(jQuery);

    You should have got this result

    Best,
    Ivan.

  • Ivan
    • Developer

    Hi kelivi !

    I'm not sure why it doesn't work for you, maybe you have different settings of the plugin and selectors are different.
    If you provide me with additional login credentials, I can look into it more.

    https://premium.wpmudev.org/contact/#i-have-a-different-question
    Please visit our private Contact page and complete the form with the following information:

    Subject: "Attn: Ivan Svyrskyi"

    In the Message box, please provide the following:

    - link back to this thread for reference
    - any other relevant urls

    - Admin login:
    Admin username
    Admin password
    Login url

    - FTP/SFTP credentials
    host
    username
    password
    (and port if required)

    Note: Don't send any credentials via this forum because it's public forum.

    Best,
    Ivan.

  • Ivan
    • Developer

    Hi kelivi !

    I have done it on your site. Now it looks like

    If you don't see changes - try to hit this combination on the Prosites' page CTRL+SHIFT+R or to clear cache of your browser.
    I changed code of the prosites_change_prices.js file to

    (function($){
    	//reversing the order of periods
    	select = $('#prosites-checkout-table .period-selector-container');
    	select.children().each(function(i,option){select.prepend(option)});
    	//selecting annually period
    	$('.period-selector-container input[value="price_12"]').trigger('click');
    	//editing texts for annually period
    	$('#prosites-checkout-table .pricing-column:not(.psts-level-0)').each(function(){
    		var monthly = $(this).find('.level-summary.price_12 .monthly-price.original-amount').html();
    		var saving = $(this).find('.level-summary.price_12 .savings-price.original-amount').html();
    		$(this).find('.level-summary.price_12').html( '<div>Billed annually</div><div>Save <strong>' + saving + '</strong></div>');
    		$(this).find('.price.price_12').html( monthly + '/month');
    	});
    })(jQuery);

    Best,
    Ivan.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.