Adding Shortcode Function to a Button or a Workaround

Hey! I am sorry I think this seems like an easy one but I can't find it on the forums! So I have created a membership page that I would like to allow people to purchase. I have a button created on my homepage for them to Buy Now. So how do I get that button to work? I have found the shortcodes for subscriptions and buttons but it doesn't seem like the button is meant to work with shortcodes? Is there a hyperlink that I can plug in that will allow this to happen. I thought it was /memberships but that takes them to a page that requires another click to "sign up". I would like this button to take them right to their Cart with the membership in the cart. Support access is open, the button I want to make work is on the homepage under the Hunting Journal listing on the left of the page.
Thanks!
Tony

    Adam Czajczyk

    Hello Tony,

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

    I understand that you would like to put a button on a homepage that would let user become members of the specific membership. I checked the homepage and I'm not quite sure which button should that be as I can only see two button pointing to some newsletter signup there.

    That said, let me suggest a "general" solution that should work nicely there:

    1. Using Upfront put a "Text" module on the page where you would want to display the button
    2. Put following shortcode into that text module:

    [ms-membership-buy id="2225"]">[ms-membership-buy id="2225"]

    3. Save Upfront

    You might then use some CSS to style the button. If you have any additional questions on this or need more assistance, let me know please.

    Kind regards,
    Adam

    Tony

    Hi Adam,
    Thank you for your help on this matter. I have the sign up link added to the website. I am however not super proficient at CSS and would like my button to be a little more attractive than the simple Sign Up text.

    Can you help me get started on that. I searched the forums for a post with a place for me to get started and I struck out. I would like the button to say BUY NOW and look similar to the other buttons on my site. Like the button for the product adjacent to this product.

    Thanks for any help you can provide!
    Tony

    Patrick

    Hi there Tony

    I hope you're well today!

    Seeing that you weren't comfortable with making the required edits, and had granted support access, I logged into your site and added them for you.

    To get the button display custom text instead of the default, your shortcode needed to be changed to include the label parameter, with whatever you like added there:

    [ms-membership-buy id="5" label="BUY NOW"]

    I see you have an Upfront theme active on that site. Assuming you want that "BUY NOW" button on your homepage to look the same as other buttons there, this was the CSS needed to get that done:

    .ms-membership-buy {
    font-family: Oswald;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.8;
    border: 2px solid #548685;
    border-radius: 4px 4px 4px 4px;
    background-color: #69a8a6;
    width: 100%;
    display: block;
    text-transform: uppercase;
    padding: 3px 10px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    text-align:center;
    }
    
    .ms-membership-buy a, .ms-membership-buy a:hover {
    color: #ffffff;
    }
    
    .ms-membership-buy:hover {
    background-color: #548685;
    transition: all 0.3s ease-in-out;
    }

    For the borders on the registration form fields, I added this CSS:

    .ms-form-element .wpmui-field-input {
    border: solid 1px #ddd;
    width:50%
    }

    I hope this helps, and wish you a great day!