New to the community? Start here

Customizing the Registration/ membership signup page.

How do I customize the membership to look like a table to show the differences of each membership. If you want to see what I made for the kind of thing I am looking for http://love-enterprise.net/membership-account/sign-up/

This is what I got with the short code http://love-enterprise.net/register-2/

Sat, 25 Jul 2015 18:59:31
  • Adam
    • Support Gorilla

    Hey Spencer,

    I hope you’re well today and thank you for your question!

    I took a look at both sites in question. I’m impressed – the first one is really nice looking!

    As for customizing the second one. What you see there is a default “look-and-feel”. Since the page is based on shortcodes (and not a “virtual page”:wink: you should be able to use custom CSS rules to make it look whatever you like.

    The easiest way to do this is to create a child theme of your current theme in order to be able to safely add your own style or to install a Simple Custom CSS plugin that lets you add your own CSS rules right through the dashboard.

    What you may want to do would be to identify all the necessary class names/element’s IDs. I usually use Chrome’s or Firefox’es DevTools for this. Take a look here please:

    https://developer.chrome.com/devtools/docs/dom-and-styles

    Knowing elements class names you should be able to add your custom rules. For example, to match the color of the signup buttons of the Membership 2 register page with the color of the buttons of your example page, this code should do the job:

    .ms-signup-button {background:#F44D00!important;}

    I hope this gets you in a right direction but if you need any further assistance or I’ve missed something here, let me know please and I’ll be glad to help!

    Cheers,

    Adam

  • SSTech
    • Site Builder, Child of Zeus

    So I don't have to code a bunch of CSS, is there a way I can just copy the signup button code for the membership register and then paste that in to the button url of the table and format I have already created. It looks like there is some hidden ids that tell the system what membership they selected so I can't just copy the button, the screenshot shows what I need. Hope that makes sense.

    Thanks, in advance.

    [attachments are only viewable by logged-in members]

  • Adam
    • Support Gorilla

    Hey Spencer!

    If I understand you correctly you’re using some kind of a “pricing table” (or similar) plugin, right?

    Unfortunately I don’t really see how this could be customized this way. These “buttons” on Membership 2 page are not a simple links but HTML forms including some data that’s being passed to the plugin with a POST type request (so it’s not send through URL).

    One of the essential parameters here is WP nonce (see here) which is created dynamically so there’s absolutely no way to include it in “static” URL.

    That being said, I think CSS is the best way to go here and if you need any further assistance with it, don’t hesitate to ask. I’ll be glad to help!

    Cheers,

    Adam

  • SSTech
    • Site Builder, Child of Zeus

    I am not very good with css. I can edit it to point but I can’t create it, I basically know enough to get into trouble. :slight_smile:

    I tried to take the HTML of the page `div class=”ms-bottom-bar”>

    <input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”0b3389e8bd”><input type=”hidden” name=”_wp_http_referer” value=”/associate-registration/”><input class=”wpmui-field-input wpmui-hidden ” type=”hidden” id=”membership_id” name=”membership_id” value=”292″><input class=”wpmui-field-input wpmui-hidden ” type=”hidden” id=”action” name=”action” value=”membership_signup”><input class=”wpmui-field-input wpmui-hidden ” type=”hidden” id=”step” name=”step” value=”payment_table”><button class=”wpmui-field-input button ms-signup-button membership_signup wpmui-submit button-primary” type=”submit” id=”submit” name=”submit” value=””>Signup</button> </div>`

    It shows up but then it doesn’t link to the page. I reworked the template a bit and it is better,

    is there a way to order the membership plans?

  • Predrag Dubajic
    • Support

    Hey @Spencer Cook,

    Hope you had a nice weekend :slight_smile:

    Have you considered using shortcodes in your template?

    For example you can use shortcode like the one below and just use ID of desired membership to link it to the correct membership:

    [ms-membership-buy id="5" label="Signup"]

    Membership ID’s can be seen in Membership 2 > Memberships panel, in far right column.

    Let us know if this will work for you.

    Best regards,

    Predrag