Create a Storefront that sells websites in less than one hour

If you’re looking to create a Website as a Service (WaaS) business without writing any code, you’ve come to the right place. In this tutorial, we will take you through the process of setting up your own WooCommerce storefront, launching new websites automatically, and collecting recurring payments from your customers every month. We’ll also show you how to use different plugins to create plans with varying functionalities, as well as how to manage all your customers’ websites from a single dashboard. If you want a quick 13-min walkthrough of the whole process, please watch the Youtube video.

Overview of the features: #

1. WooCommerce Storefront that sells multiple website subscriptions (you can host this storefront website anywhere or build it into your existing site)
2. Create plans with different functionalities that customers can choose when onboarding
3. Launch new websites automatically after a purchase
4. New websites are launched as a pretty subdomain under your domain
5. Send automatic, customizable confirmation emails to customers with login credentials
6. Collect recurring payments from customers every single month for your website services
   • We use Stripe in this demo, but you can integrate it with anything
7. Upsell customers using add-ons that they can directly purchase from their My Account Page
8. New websites are launched as a pretty subdomain under your domain
9. Customers can connect to their own domain without you needing to provide support
10. From the My Account page, customers can log in to their own website using SSO
11. Manage all your customers’ sites as one using WPCS

This article consists of 3 parts: #

1. Building the Template
2. Configuring the Infrastructure
3. Building the Storefront
4. Creating your Products
5. Testing your Solution

WaaS Plugin Download links #

To get started, you need to sign up for an account in WPCS and download two WaaS plugins called “WaaS Host” and “WaaS Client” from our marketplace.

Step 1: Building the Template #

For our WaaS, we work with plans that we sell through WooCommerce. These plans represent different features, which are plugins in our version. We want certain plugins to be enabled for our customers according to the plans and features we’re selling. However, direct connection to plugins can make it difficult to change the plans in the future. That’s why we use roles. We build it once, and apply it to all. If we change the roles in the version and deploy that, it applies to all, which is a robust and scalable solution.

To create plans, we’re going to define roles to have access to the plugins we set. And in the future, if we want to change our plans, we can do so easily by changes to roles, and the access they have to certain features.

Let’s start.

• Sign up for an account in WPCS
• In the Console, click Actions in the upper right-hand corner to Create new Product
• Give it a name and submit
• Once the Product is launched, enter the Product environment and click Create Version
• Give the Version a name (V1 usually works best)
• Choose WordPress Version 6.0.1
• Choose PHP 7.4 (important!)
• Base the Version on an empty WordPress installation

Wait for the Version to launch, then click on the blue Editor button to open the Development Environment (an empty WordPress installation) to build out your template.

There are two ways to build your plans moving forward:

1. Import an existing instal using the WPCS Migration plugin
2. Building an application from scratch

If you choose to import an instal, view this article to learn about the Migration process when using the WPCS Migration plugin. We continue this tutorial by building the plans from scratch following the steps in the demo video. An overview of the plugins we use to build the application:

• Brizy (page builder)
• WooCommerce
• Stripe Connect for WooCommerce
• WooCommerce Subscriptions
• Tutor LMS
• Tutor Pro
• The WPCS WaaS-Client Plugin

Important: During the build, you need to activate, configure the plugins and create a Snapshot. This way, the settings of the plugins will be saved in the database and are accessible to your customers when they receive their site. If your customers choose a particular plan that activates a plugin, they will also instantly receive the settings you’ve put in.

However, this Storefront is based on a couple of principles to keep in mind:

• WPCS disables access to the plugin folder by default for all your customers (not for you)
• When you create the Template, deactivate the plugins before creating a Snapshot (covered later)
• When a customer buys a website, the Storefront plugin will activate certain plugins that correspond with their plan
• They will not see which other plugins are installed, they only have access to the plugins that are activated
• Again, you can give your customers pre-configured plugins if you have configured these plugins previously and disabled them before creating a Snapshot

Pro tip: You can install new plugins later and make them part of the roles for existing customers. However, these plugins will only become available without configuration, as it’s not possible to send database changes to your tenants. This is possible though by using a Code Snippets plugin.

Step 2: Configuring the WaaS Client #

• After you’ve selected and uploaded your plugins (and possibly pre-configured them also), activate the WPCS Client plugin.
• Enter your Host URL (the URL you’re going to use to host your Storefront website)
• Save changes

Important: The Host URL must contain: http:// yourdomain.extension (http://rosweide.com used in the example.) Make sure there’s no “/” at the end.

Navigate to the Roles tab and start creating roles that correspond to the different plans that you will offer.

Every time to define a new role name, and add the new role, the WaaS Client plugin will generate a list of all plugins that you can select for each plan that you will offer in your soon-to-be-made Storefront.

In our example, we create a Leadpage, LMS, and eCommerce plan and select plugins accordingly.

Important: We also define 2 “add-ons” plans. These will only be visible via the My Account page after purchase and serve as the upsells that your customers can use to upgrade their plans and unlock new plugins.

As you can see, these upsells have the same features as the LMS and eCommerce plan above. Save changes when you’re done.

Before you create a Snapshot, navigate to Settings > Permalinks > Common Settings.

Make sure the Common Settings are set to Post Name and save changes

Go back to the WPCS Client Product Environment and create a Snapshot of your Version.

This will create the Template that you will use to launch your customers’ websites (we call those tenants in WPCS.)

In the next section, we will use WPCS as the hosting infrastructure of the Storefront website.

Step 3: Building the Storefront and connecting to WPCS #

You can choose to host the Storefront on WPCS or any other hosting provider. For this example, we’ll use WPCS. Navigate to the All Products via the left-hand menu in the WPCS Console to launch a new Product that we call “WPCS Storefront demo”.

Once the Product is ready, create a new Version based on the same principles as with the Client Product:

• Name it (V1 works best)
• Select WordPress Versions 6.0.1
• Select PHP 7.4
• Base it on an Empty WordPress installation
• Submit
• Once the Version is ready, click on the blue Editor button to open up the development environment for your Storefront Product

For the Storefront setup, we need only 6 plugins:

• Woocommerce (Ecommerce)
• Woocommerce Stripe (Payments)
• Woocommerce Subscriptions (Subscriptions)
• Self-service plugin Woocommerce (Add-on and dashboard features inside the subscriptions)
• SMTP (Emails)
• WPCS Host Plugin (Connects with the WPCS Client Plugin)

Important: You can use any other plugin later on to stylize and customize your storefront. However, these are the 6 plugins that we need to setup our Storefront checkout flow, automatically launch our new websites, and let our customers self-service their subscription.

• Important: do not activate any of the plugins yet. There’s a specific order
• We’ll start with WooCommerce, as shown below
• Go back to the plugin overview and start by activating the WooCommerce plugin and go through the initial setup

In this tutorial, we didn’t bother with design (yet). We picked the free Storefront theme. You can always change it later.

Once WooCommerce is configured, go back to Plugin Overview and activate Stripe.

Important: If you’re following along with this tutorial in test mode, make sure to “enable test mode” under Settings in your Stripe overview (see screenshot below)

• Click on “Edit account keys” and grab your API keys from Stripe

After Stripe is set up, go back to Plugin Overview and activate WooCommerce Subscriptions.

Once activated, go to Settings and uncheck the box that says: “Allow multiple subscriptions and products to be purchased simultaneously.”

You’re selling one website at a time, so you want to uncheck that.

After WooCommerce Subscriptions is set up, go back to Plugin Overview and activate Self-service plugin Woocommerce.

Once activated, go to Settings and check the box that says: “Allow adding a new product.”

You want your customers to manage their account and upgrade themselves, so check that box.

Next, go to Plugin Overview and activate SMTP and go through the setup manual.

Important: In our tutorial we use a test account for Mailgun. This only allows domains provided by Mailgun so it’s possible that you get an error from WP Mail such as below. Most likely it will work, but we recommend to setup a proper Mailgun account so that you’re sure that everything works well and looks the part for your customers.

Finally, activate the WPCS Host Plugin. See below for the WPCS.io Admin Menu. You don’t have to do anything yet.

After activating the WPCS Host Plugin, the next step is to create an API Key in the Client Product that you created in part 1.

Important: Quickly pop over to Settings > Permalinks > Common Settings and make sure the Common Settings are set to Post Name and save changes.

Go back to the Client Product you created in part 1 and go to API Keys in the blue left-hand vertical menu.

Create an API Key and give it a name.

Copy the API keys one by one and go back to your Storefront.

WPCS currently has 2 regions: eu1 and us1. For this tutorial, we used eu1. Paste API Keys one by one.

Important: the Tenants Root Domain will be the domain that you will use for your storefront. Even if you haven’t set that up yet, fill it in here in exactly the way you see below.

Save changes

Go back to the Storefront Product and Deploy a Snapshot for your Storefront. This creates a template that we’ll use to build the actual Storefront website.

Additional information: In WPCS, the Version serves as the development environment for all your websites. In the example of the Storefront, we’ll only host 1 website: the storefront website, but you could theoretically host thousands. In this case though, it means that the Version serves as the staging environment for your one storefront website. Every time you deploy a new snapshot, the changes you made in the plugins and themes in the Version will be instantly sent over to the storefront website. Head over to WPCS.io if you want to learn more about this.

When the Snapshot is ready, go to the Actions button in the upper right-hand corver and select Create tenant.

Go over to the blue Actions button in the upper right-hand corner and select Create tenant.

Once the tenant is ready, click on the temporary domain to access the tenant overview. From here, go over to the blue Actions button in the upper right-hand corner and select “Add Domain“.

In your DNS registrar, change the A records to the 3 IPs listed below and change the CNAME record to public.eu1.wpcs.io as listed below:

Yay!

It’s time for a quick check before you move on to creating the actual products:

• The order of activating and configuring the plugins is:
  • WooCommerce
    • Quick setup, you can stylize later
  • Woocommerce Stripe
    • Enable Test mode in Stripe
    • Insert API Keys
    • Save changes
  • Woocommerce Subscriptions
    • Mixed checkout > Uncheck multiple subscriptions checkout
  • Self-service plugin Woocommerce (allows for add-ons inside subscriptions)
    • Check: Allow adding new product
  • WP SMTP
  • WPCS Host Plugin
• Create API Keys in the Client Product, not Storefront
  • Set the right WPCS region
  • Copy/paste API Keys
  • Enter root domain in the correct way
• Check if Permalinks is set to Post Name
• Deploy Snapshot and then create new tenant based on Snapshot
• Add domain to the tenant and wait to verify. Set as main domain
• You’re ready to build the products

Step 4: Creating your Products #

Go to the WP-admin of your Storefront tenant, the one for which you have just switched the domain.

Go to Products and create a New Product.

Select the role that you have defined in your Client Version by using the downdown menu in the upper right-hand corner.

Create a Product in your Storefront tenant

Select the role using the dropdown menu in the upper right-hand corner

• Change the Product Data from Simple Product to Simple Subscription
• Finish your product in the normal way: give it a description, an imagine, etc.
• For the add-ons: create a new category

Important: The slug for the add-on must be called “add-on” (see below)

• When you create an add-on product, make sure to check that category in your Product overview and uncheck other categories (see below)
• Finish making all your products in this way

The slug for the add-on must be called “add-on”

Check the add-on in your Product Categories and uncheck other categories. You are now ready to start testing your storefront!

Step 5: Test out your Service #

• Has the website (tenant) successfully provisioned?
  • You can check in the WPCS Console after you make a purchase
• Do we have the right temporary domain name?
• Have the emails come into our inbox?
  • You can customize this later
• Can we log in via the My account page?
  • Your customers can log in using single-sign-on via the Subscription Page in My Account
• Do we have access to the right functionalities within our Tenant?
• Is the plugins tab invisible to the user?
• Can I make an upsell by adding an add-on in My Account
  • Just add the add-on to your subscription, wait a few moments, then refresh the wp-admin of your new website
• Can I change DNS settings and switch domain from My Account?

Adding a domain name #

• Grab a domain and enter the details in My Account page
• Add DNS details in the registrar
• Is it added automatically to WPCS?

Buying an upsell #

• Purchase a product
• Open the tab Subscription on the My Account page
• Purchase an add-on
• Refresh the Tenant
• Cancel add-on
• Refresh Tenant

Conclusion #

Creating a Website as a Service business is a great way to offer website solutions to customers without needing any coding experience. With the help of WooCommerce, WPCS, and some key plugins, you can create a robust and scalable WaaS platform that can grow with your business. By following the steps outlined in this tutorial, you can set up your own WaaS business in less than an hour, and start collecting recurring payments from your customers every month.