Customizing the pro-sites checkout page

Hi, I am trying to customize the pro-sites checkout page.

There is a part solution mentioned here

Any guidance with this would be very helpful, also there are 100's of request for help to customize the checkout page, with no solution, but a reference to use the checkout page content.

I am already doing that on my main-site like this.

However I do-not want the check-out pricing grid as displayed by pro-sites, i.e. in the order it displays the prices and the tenures.

There is a part solution in this post.

If you could guide me to complete this Javascript function, then we could pull out the details of pricing for a level and tenure.

This functionality would help a lot of us pro-sites fans.

Thanks for your help in advance.

Best Regards,
Santosh

  • Jack Kitterhing

    Hi there @Santosh,

    Hope you're well today and thanks for your question.

    To complete customize the checkout process, we're looking at minimum 600-800 lines of code, someone else that done this actually used 3000 lines of custom code, which I'm afraid is beyond the scope of what we could offer.

    But I'll include one of our developers @Hoang Ngo to see if he can point you in the right direction here.

    Thanks!

    Kind Regards
    Jack.

  • Hoang Ngo

    Hi @Santosh,

    I hope you are well today

    Due to this post
    https://premium.wpmudev.org/forums/topic/step-by-step-instruction-for-using-custom-pricing-grids-with-pro-sites

    Firstly, you will need to create the my-script.js, and paste this code in the file

    function my_awesome_pro_sites_wrapper(level, duration) {
      jQuery('psts_level').value(level);
      jQuery('psts_period').value(duration);
    }

    And then, you will need to use this code to include the new javascript

    function my_scripts_method() {
        wp_register_script( 'pricing-table', get_template_directory_uri() .'/js/my-scripts.js', array('jquery'));
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'pricing-table' );
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    And now, you can call the function my_awesome_pro_sites_wrapper in your footer. Hope that will help :slight_smile:

    If you have any issues please don't hesitate to let us know so we can assist

    Best regards,
    Hoang

  • Santosh

    Dear Hoang,

    Thanks a ton for your assistance, a quick question, when I call the function "my_awesome_pro_sites_wrapper" what will it return?

    For e.g. if I call my_awesome_pro_sites_wrapper(1, 1) i.e. level 1 for duration one month.

    Would it return the link for the button for the particular duration, or would it do something else, or do i need to write the code within the function my_awesome_pro_sites_wrapper to generate the button code?

    Thanks, Best Regards
    Santosh

  • Hoang Ngo

    Hi @Santosh,

    I hope you are well today

    I'm sorry for this inconvenience, just to clarify, what you need now is make the checkout form work like the original ?

    If that, please check the file /pro-sites/pro-sites.php, function 'checkout_grid'.

    That's the function handler the code output price table. Also, please note that pro-sites will need the period for the checkout can working properly. In your checkout page, I see they have many level, but don't have period, but in this case, we can hard code the period by 1 month.

    The most important for the checkout form, is you will need to have the right form parameter when submitting.

    Example

    <input type="hidden" value="1" name="period" id="psts_period">
    <input type="hidden" value="1" name="level" id="psts_level">

    The period is the subscription time, you can make it as 1. Level is depend on your level id.

    Both of them will required for a prosites checkout grid.

    Hope those information can help you :slight_smile:, If you have any issues please don't hesitate to let us know so we can assist.

    Best regards,
    Hoang