WordPress Membership Site Full Build (with WooCommerce)

Building A WordPress Membership Site With Breakdance

Breakdance’s powerful feature set gives you all the tools you’ll need to create a full-featured membership site using WooCommerce and absolutely no specialized membership plugins. This tutorial will walk you through the creation of a fully functional membership site and will cover the following topics:

• How to setup WooCommerce.
• How to create a WooCommerce subscription product.
• Setting up monthly and one-off purchases.
• Setting up a custom post type using Advanced Custom Fields.
• Setting up custom fields using Advanced Custom Fields.
• Using Conditions and Dynamic Data to display your content to paying members.

Step 1: WooCommerce Setup

Before you get started, you’ll need to make sure you have WooCommerce installed and set up on your WordPress site.

1. From the WordPress admin panel, go to Plugins and click Add New.
2. Search for WooCommerce, then install and activate it.
3. Follow the WooCommerce setup wizard to get your store set up properly.
4. Make sure you’ve set up payments for your WooCommerce store.

Creating The One-Off Purchase Product

A one-off product is for selling access to a specific piece of content. This is different from a true “membership” because it allows customers to support you while only paying for access to the specific content that they want to consume. Not all membership sites have this option, but if you want to have it available on yours, here’s how you can set that up.

1. In the WordPress admin panel, go to Products and create a new product.
2. Name the Product appropriately.
3. Set the Product Type to “Virtual” in the WooCommerce product details area.
4. Set the price, image, description and other details for the product.
5. Click Publish.

Repeat this step for any one-off products you want to offer on your membership site.

Note: Make sure to write down or remember the IDs of all products that you set up, because we’ll use these in a later step. Product IDs are visible when you hover over the product name in the WordPress admin panel on the Products page.

Creating The Subscription All-Access Pass

If you plan to offer a subscription-based option for getting access to your membership site’s content, you will need to install WooCommerce Subscriptions. Once that is activated, you can create a subscription product.

1. Go to Products in the WordPress admin panel.
2. Add a new product.
3. Setup the product details, such as name, description, and product image.
4. For Product Type choose “Simple subscription” and tick the “Virtual” checkbox.
5. Choose a price for your product, as well as a billing interval.
6. Click Publish.

Step 2: Creating The Custom Post Types And Custom Fields

Since we’re creating a membership site, we need some content that gets unlocked when people pay for access. We could use the default Post post type, but this can create some confusion if we’re also going to have a public facing blog. To keep things nice and organized, we’ll create a custom post type that houses our content, but is linked to our WooCommerce products so that we can sell access to the content as needed.

In this tutorial we recommend (and provide instructions based on) using Advanced Custom Fields, but you can use any plugin that allows you to create post types and custom fields.

1. In the WordPress admin panel, click Plugins.
2. Click Add New and search for “Advanced Custom Fields.”
3. Find, install, and activate Advanced Custom Fields.

Creating A Custom Post Type

1. Go to ACF in the WordPress admin menu and click Post Types.
2. Click Add Post Types.
3. Input the desired labels and let ACF auto-generate the post type key.
4. No other modifications to the post type are necessary.

Adding Custom Fields

1. In the WordPress admin menu, click ACF > Field Groups.
2. Add a new field group.
3. Name it “Content Fields” or something else appropriate.
4. Add a Number field and name it “Linked Product.”
5. Scroll down to Location Rules and make sure the field is assigned to the post type you created previously.
6. Click Save Changes.

You’ll also need a custom field for each product.

1. Go back to ACF > Field Groups and add another field group.
2. Name it “Product Fields.”
3. Add aURL field and name it “Paid Content URL.”
4. Scroll down to Location Rules and make sure the field is assigned to the Product post type.

Step 3: Creating Your Paid Content Posts And Product Connections

Now you need some content to sell access to. Note that if you created an “all access” style subscription product, it does not need a specific piece of content associated with it because purchases will get access to all paid content.

For each one-off content product in WooCommerce, you’ll need to:

1. Copy the name of the product from WooCommerce.
2. Create a new post in your custom post type with the same name.
3. Add some content into the post’s body. This is what users are paying to access.
4. Find the Linked Product custom field and paste in the correlating WooCommerce product’s ID.
5. Publish the post.

Finally, you’ll need to get the URL of each piece of paid content you’ve created and paste it into the Paid Content URL field for the corresponding WooCommerce product.

Step 4: Designing Your Site In Breakdance

Now that all of our data is set up on the back-end, it’s time to design our site using Breakdance. For most Breakdance sites, there are a few steps you should complete when you first begin your design:

1. Create a Header under Breakdance > Headers in the WordPress admin panel. Set its Location to “Everywhere.”
2. Create a Footer under Breakdance > Footers in the WordPress admin panel. Set its Location to “Everywhere.”
3. Create a Home Page.
   1. To create a home page, create a new page in the WordPress admin panel under Pages.
   2. Next, go to Settings > Reading and tick the A static page option under Your homepage displays.
   3. Finally, in the Homepage dropdown, choose the page you just created.

With those generic setup steps out of the way, we can start designing our home page.

Designing The Home Page

In this tutorial, we will make use Breakdance’s Design Library feature. We’ve prepared a special design set that contains this tutorial’s design so that you can easily import it with one click.

1. Go to Breakdance > Settings > Design Library in the WordPress admin panel.
2. In the Custom Design Sets field, paste this URL: https://patreontut.instawp.xyz
3. Edit your new home page in Breakdance.
4. Click the Add button and then click Library at the top of the Add panel.
5. In the Library dialog, click the Design Set dropdown and choose https://patreontut.instawp.xyz.
6. Near the top right of the Library dialog, click Import Global Settings.
7. Finally, click add to page for each section of the home page that you want to use.

Make sure to adjust the design and content to match your site after importing it, including pointing any links or buttons at the proper products.

You can also design the home page from scratch if you don’t want to use the same Patreon-like layout.

Designing The Single Product Template

Next we’re going to design the template that will display our WooCommerce products.

1. Go to Breakdance > Templates in the WordPress admin panel.
2. Click Add Template and choose Single Product.
3. Edit the template in Breakdance.
4. Click Add, search for Product Builder, and click or drag to add it to the design.
5. Return to the Add panel and search for Notification. Click or drag to add it directly below the product’s Add to Cart button.
6. Select the Notification element and, in the Properties panel:
   1. Set the Title to something like “You already have access to this.”
   2. Set the Description to something like “Click the link below to view the content.”
   3. Change the Link Text to something like “View Product.”
   4. Click the dynamic data button for the Link field and, in the Dynamic Data chooser, find the Paid Content URL field to insert it.
7. With the Notification Bar element still selected, go to the Settings tab in the Properties panel and expand the Conditions section.
8. Click Edit Conditions.
9. Click Add Condition.
10. For the first condition, choose the type “Product”, operand “is not”, and in the value field select your subscription product.
11. Click AND to add an and condition.
12. For the second condition, choose the type “Purchased Product”, operand “is one of”, and in the value field select “Current Product.” (Note: If you don’t see this condition in your Conditions panel, you may need to add it. Find full instructions in the tutorial video description on YouTube.)
13. Click Add Condition to add an or condition.
14. For the or condition, choose the type “User Subscriptions”, operand “is one of”, and in the value field write the ID of the subscription product you created earlier. If you don’t have a subscription product, skip this step.
15. Click AND to add an and condition after the one you just set up.
16. For this condition, choose the type “Product”, operand “is not”, and in the value field choose the subscription product. If you don’t have a subscription product, skip this step.
17. If you have a subscription product, you can duplicate the Notification Bar element and update the text to reflect the message you want subscribers to see if they’re looking at the subscription product page.
18. On this Notification Bar element, remove all previously created conditions and setup these instead:
    1. Type: “Product”, operand: “is”, value: the subscription product.
    2. AND type: “User Subscriptions”, operand: “is one of”, value: the ID of the subscription product.

Designing The Single Custom Post Type Template

Now we need to create a template for our custom post type which contains our paid content.

1. Go to Breakdance > Templates in the WordPress admin panel.
2. Click Add Template and choose Single Post.
3. Hover over the newly created template in the templates list and click Settings.
4. Rename the template as needed.
5. Under Location, choose your custom post type.

Everything else for this template can remain at the default settings. Save the template and then edit it in Breakdance.

First, let’s design the Section that will be shown for paying members.

1. Add a Section.
   1. In the Properties panel for the Section, expand the Layout section and set Align to “center.”
   2. Set Gap to “32px.”
   3. In the Properties panel, go to Settings > Conditions, click Edit Conditions, and click Add Condition.
   4. The first condition should have the type “User Subscriptions”, operand “is one of”, and in the value field type the ID of your subscription product.
   5. Click Add Condition to add an or condition.
   6. This or condition should have the type “Dynamic Data > User Purchases (ID)”, operand “contains”, and in the value field click the dynamic data button and choose the Linked Product field. Click the dynamic data chip for the Linked Product field, open the Advanced panel, and add a pipe (|) in the Prepend and Append fields.
   7. This conditions setup ensures the content is only shown to users who have subscribed or purchased access to this specific piece of content.
2. Add a Notification Bar element.
   1. Adjust the content as desired to promote your subscription option, as this notification will be shown to customers who have bought access to this individual product but have not subscribed to your membership plan yet.
   2. Make sure to update the Link in the Properties panel to point to your subscription product.
   3. In the Properties panel, go to Settings > Conditions, click Edit Conditions, and click Add Condition.
   4. This condition should have the type “User Subscriptions”, operand “is none of”, and in the value field write the ID of the subscription product.
   5. This conditions setup prevents this Notification Bar from being shown to users who have already subscribed.
3. Add a Post Content element.
   1. In the Properties panel for the Post Content element, expand the Size section and set Width to “700px.”

Next, we need to add a Section that will be shown to visitors who have not paid for access to this content.

1. Add a Section.
   1. In the Properties panel for the Section, go to Background > Type and choose “image.”
   2. Set a background image for the Section.
   3. Open the Overlay panel and set a dark, transparent overlay color to de-emphasize the background image.
   4. In the Properties panel for the Section, go to Layout > Align and center the content.
   5. In the Properties panel, go to Settings > Conditions, click Edit Conditions, and click Add Condition.
      1. The first condition should have the type “User Subscriptions”, operand “is none of”, and in the value field write the ID of the subscription product.
      2. Click AND to add an and condition.
      3. The and condition should have the type “Dynamic Data > User Purchases (ID)”, operand “does not contain”, and in the value field click the dynamic data button and choose the Linked Product field. Click the dynamic data chip for the Linked Product field, open the Advanced panel, and add a pipe (|) in the Prepend and Append fields.
      4. This conditions setup ensures this Section is only shown to users who don’t have access to the content.
2. Add an Icon Box.
   1. In the Properties panel, update the Title and Text to promote users to sign up to access the content.
   2. Open the Button panel and set the Text as desired, then point the Link at your subscription product.

Conclusion

Now it’s time to test! Make sure you test various permutations of purchases, subscriptions, logged in, and logged out statuses to ensure you’ve set up all conditions correctly.

The concepts explored in this tutorial, while presented in a specific scope, are broadly applicable to building advanced sites where conditions are needed to ensure only specific users meeting specific requirements have access to specific parts of the site. With Breakdance’s conditions feature, you’re able to quickly and powerfully setup display logic that not only enhances the experience visitors have on your site, but introduces functionality that previously required a dedicated plugin.