Improve the Payment Page for Membership Pro 2 / Upfront

I want to edit the payment page of my membership plugin.

Can someone help me find the correct page to edit in Upfront?

I don’t want to edit more than one page, but I want to put some more information on the checkout page (company details, a nice message to release purchase anxiety, etc).

I noticed the ‘Membership’ page runs off a single shortcode ([ms-membership-signup])

If I insert that shortcode via Upfront, will it work the same as it does when entered via the typical page editor? There are only a few elements which I’d like to add to the page and I hope I don’t have to edit a different checkout page for each membership I have.

This is a link to the registration page (new user only)

This is a link to a payment page (logged in user only)

  • Michael Bissett
    • Recruit

    Hey Daniel,

    I noticed the ‘Membership’ page runs off a single shortcode ([ms-membership-signup])

    Yep, and each step of the checkout process would leverage this page. For inserting the content you’re looking to add, you’d need to write a custom PHP function, and hook into one of the filters or actions inside of:

    /membership/app/view/frontend/class-ms-view-frontend-payment.php

    Like the “ms_view_frontend_payment_form_start” action:

    add_action( 'ms_view_frontend_payment_form_start', 'supreme_test_content' );

    function supreme_test_content() {
    echo 'Insert test content here';
    }

    Or the “ms_view_frontend_payment_form” filter:

    add_filter( 'ms_view_frontend_payment_form', 'supreme_test_content' );

    function supreme_test_content($html) {
    $html .= 'Insert test content here';
    echo $html;
    }

    This would definitely be a custom endeavor.

    If I insert that shortcode via Upfront, will it work the same as it does when entered via the typical page editor?

    Nope, the shortcode needs to be placed in the content area the typical page editor would use:

    Kind Regards,

    Michael

  • Daniel
    • The Incredible Code Injector

    Thank you, Michael!

    I want to stay away from ‘cu$tom’ development.

    If I maintain the typical page editor and add elements around it, would that work?

    If it does work, is there a way to do the following:

    1. Hide the division that has the post-title (MEMBERSHIPS)

    2. Reduce the margin above the content (#post-3757 > div.upfront-output-wrapper.upfront-postpart-wrapper.c20.clr.part-contents > div)

    3. Hide the legend (Join Membership)

    If I can do that much through CSS and Upfront, I can make a page that is suitable to my intent and gets me away from ‘cu$tom’.

    Thank you,

    Daniel

  • Michael Bissett
    • Recruit

    Hey Daniel,

    If I maintain the typical page editor and add elements around it, would that work?

    As long as you're okay with the elements being displayed on all pages in the checkout process, then that should work. In having a fresh look at this, though, you would need to edit both of these pages:

    /memberships/

    /register-2/

    And if the "Post Data" element isn't already in place for a page, you'll want to replace the content there with that:

    When you've got that inserted onto the page, you'll want to create a preset for this, like what I've done here:

    That way, any CSS changes made via the "Edit Preset CSS" option there will only apply to this preset (and not effect other pages on your site).

    You can make the CSS changes in there, but I would also advise testing out your CSS changes by going through the checkout process is a private browser session (Chrome's got Incognito Mode), and test your CSS changes there.

    Since I mentioned Chrome, we've got an article on the Chrome Developer Tools, you'll want to have a peek at that:

    Leveraging Chrome Developer Tools for WordPress Development

    When it comes to cooking up CSS changes, that's what I use. :slight_smile:

    Kind Regards,

    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.