Switching between memberships level or products on the checkout page is easy and can be accomplished in a couple of ways: by using buttons or using a drop down.
Use Buttons
Follow the steps below to switch between membership levels or products using buttons:
- In the WordPress menu click Pages and find the default Checkout core page. It will be the one where you see in the Core Page Type column. Click on this page to edit it.
- Get the static purchase link for the membership level or product your want to allow the customer to switch to. Read this article to learn how to get the static purchase link. For example, the static link could be something like:
http://yourdomain.com/checkout/?pid=4. - Find the place in your HTML where you have inserted your button code and copy and paste the following:
<a href="{purchase_link_url}">Starter</a>
Just replacepurchase_link_url
with your purchase link URL:<a href="yourdomain.com/checkout/?pid=4">Starter</a>
An example of what the final code with button and purchase link would look like, is shown below:<a class="mm-button blue large" href="yourdomain.com/checkout/?pid=4">Starter</a> <a class="mm-button blue large" href="yourdomain.com/checkout/?pid=5">Builder</a> <a class="mm-button blue large" href="yourdomain.com/checkout/?pid=6">Growth</a>
- Save your changes. Now when a customer clicks any of those links the checkout page will reload with the appropriate membership level or product.
Use a Drop Down
Follow the steps below to switch between membership levels or products using a drop down:
- In the WordPress menu click Pages and find the default Checkout core page. It will be the one where you see in the Core Page Type column. Click on this page to edit it.
- Click the Text tab in the upper right corner of the content editor to switch over to using the text editor.
- Find the place in your HTML where you want to insert the drop down and copy and paste the following:
<select name="subscriptions" onchange="window.location=this.options[this.selectedIndex].value;"> <option value="select">Choose a Membership</option> <option value="{purchase_link_url}">{item_name}</option> </select>
- For each membership level or product you want the customer to be able to switch between, add an option by using this template:Just replace
<option value="{purchase_link_url}">{item_name}</option>
{item_name}
with the text you want displayed to the customer in the drop down and replace{purchase_link_url}
with the static purchase link URL associated with the membership level or product. Read this article to learn how to get the static purchase link. For example, the static link could be something like http://yourdomain.com/checkout/?pid=4. You will want to leave the first option as placeholder text, as you will need to change the existing option in order for the link to work.
Here's an example of what a completed drop down menu looks like:<select name="subscriptions" onchange="window.location=this.options[this.selectedIndex].value;"> <option value="">Choose a Membership</option> <option value="yourdomain.com/checkout/?pid=1">Free Membership</option> <option value="yourdomain.com/checkout/?pid=2">Paid Membership</option> </select>