Create an actual buy now button in protected content

How do I create an actual "buy now" button on a product page, so that users don't have to go to the subscriptions page and find the membership they want. I know the shortcode that creates a link, but that just blends in with the rest of the page it's not an actual button

  • Michael Bissett

    Hey @ryan, hope you're doing well today! :slight_smile:

    Also, when using that shortcode, if a visitor clicks the link, it skips the registration process, and they go strait to paypal, which results in them paying but no new user being created, this is a big problem for me!!!!

    I see what you mean here, that's definitely a problem. :disappointed:

    I've informed the developer about it, as this should be taking users to the "Create an Account" page first. In regards to the styling of the button though, could you provide a link to the page where this button is stored?

    I could cook up some example CSS code that you could use in the meantime to turn that link into a button (you could insert that into a plugin like Simple Custom CSS). :slight_smile:

    Kind Regards,
    Michael

  • Philipp Stracker

    Ryan, we've fixed the guest-purchase issue.
    Thanks a lot for making us aware of this issue!!

    The latest verison 1.1.1.4 contains a ton of bugfixes and improvements, especially the registration/invoicing/trial-period functions of the plugin got a huge review and are much more stable now.

    About the buy-now button:
    We decided to create a link and not a button for this, becaue we wanted the process to be accessible by a single URL and not a HTML form with submit button. This makes it easier to display the button at different places on your website (or outside your website)
    My suggestion is to use CSS to style the link as a button, like this here:

    /* move the button to own line to make it stand out more */
    .ms-membership-buy {
      display: block;
      margin: 1em 0;
      text-align: center;
    }
    /* style the link to look like a button */
    .ms-pay-button {
      background: #CCC;
      color: #FFF;
      display: inline-block;
      padding: 8px 20px;
      text-decoration: none;
      border-radius: 4px;
    }
    .ms-pay-button:focus,
    .ms-pay-button:hover {
      background-color: #00A0D2;
    }

    If this is not what you meant then please give us some feedback with more details so we know what to look for or change :wink:

    Thanks, Philipp

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.