We launched the multi-tenant WordPress Marketplace! 🎉

Create a Storefront that sells websites in less than one hour

Learn how to create a complete Website as a Service (WaaS) business in less than an hour. Zero code required.

This is a full in-depth tutorial blog with screenshots that take you through each step of the process. If you want a quick 13-min walkthrough of the whole process, please watch the Youtube video.

Overview of the features:

In one hour, you will have set up:

  1. A 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 tutorial consists of 3 parts:

  1. Building the template and configuring the infrastructure to host your customers’ websites
  2. Building the Storefront and connecting to WPCS
  3. Overview of the Customer Journey

WaaS Plugin Download links:

For this Storefront to work, you need the 2 WaaS plugins called “WaaS Host” and “WaaS Client” by Abdy Tawfik that you can download for free in our Marketplace (click here).


1. Building the Template

For our Website as a Service, we’re working with plans which we’re selling 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.

The problem with a direct connection to plugins, is that if you choose to change the plans in the future, how would you do that? You’d need to do it manually or manually code for every tenant.

There’s a better solution, using Roles. Build it once, apply it to all. If you 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 (it’s free for 30 days, no credit card required)
  • 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
  • Navigate to plugins to start building your plans. There are two ways:
    1. Import your existing sites using the WPCS Migration plugin
    2. Install and import the plugins in the same way as we do in the demo video

What follows are a few screenshots and explanations of the WPCS Migration plugin to get you started.

The rest of this tutorial covers building out the plans from scratch the way we do it in the demo video. An overview of the plugins we use in the demo video, including the WaaS Client video will be listed below.

  • If you’re migrating your existing sites, download using the link above
  • Then, upload the plugin and activate
  • After activating, a WPCS pop-up will appear at the top of the Plugins page
  • Click Get Started to navigate to the WPCS Migration Dashboard
  • From the WPCS Navigation Dashboard, you can fill in the API region and API keys that you can get from your WPCS Product Environment.
  • Please have a look at the Migration Plugin tutorial linked above or follow along with this tutorial in which we cover how to retrieve API keys also.
  • Upload the WaaS-Client.zip file that you downloaded earlier, alongside the plugins that you’ve chosen to make up your different plans
  • You can find a list of the plugins that we use in the demo video below
  • The plugins we use to create the different plans are:
    • Brizy (page builder)
    • WooCommerce
    • Stripe Connect for WooCommerce
    • WooCommerce Subscriptions
    • Tutor LMS
    • Tutor Pro
    • The WPCS WaaS-Client Plugin

Important: during the build, you can activate the plugins, configure them, and then deactivate them again if you want. This way, the settings of the plugins will be saved in the database. 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.
  • If you have any questions, please share your question in our Facebook Community. We’re always looking to improve and share insights with everyone.
  • 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 (I use http://rosweide.com in my example)
    • 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 (see below)

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)
    • Give it a new and add some comments to know what you did
  • While you wait for the Snapshot to create, head back over to the All Products via the left-hand menu in the WPCS Console to launch a new Product that we call “WPCS Storefront”.
  • This Product will host the Storefront website.
  • You don’t have to host this particular website on WPCS. You can host it anywhere and even build it on top of your existing website.
  • In the next section though, we will use WPCS as the hosting infrastructure of the Storefront website

2. 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:
    1. Woocommerce (Ecommerce)
    2. Woocommerce Stripe (Payments)
    3. Woocommerce Subscriptions (Subscriptions)
      1. Buy online and upload yourself (see below)
    4. Self-service plugin Woocommerce (Add-on and dashboard features inside the subscriptions)
      1. Buy online and upload yourself (see below)
    5. SMTP (Emails)
    6. WPCS Host Plugin (Connects with the WPCS Client Plugin)
      1. This is Plugin #2 that you download at the top of this article

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 and website

A List of the 6 plugins we need to set up the Storefront
  • As shown in the screenshots below, you need to manually upload 3 of the 6 plugins:
    • WooCommerce Subscriptions
    • Self-service plugin Woocommerce
    • WPCS Host Plugin
  • 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.
  • For now, we’re setting up the automations. Design can come later
  • Once WooCommerce is configured, go back to Plugin Overview and activate Stripe
Activate Stripe and connect your Stripe account (in this tutorial we set our Stripe account to “Test”)
  • 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
  • Important: always make sure to Save Changes for every action
  • 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.
  • Go through the setup manual
  • In our tutorial we use Mailgun, but feel free to connect your favorite mail service
  • WP Mail SMTP WP Forms has a very friendly setup manual, just fill in API Keys and Domain Name (in our case from Mailgun)
  • Make sure to select the right Region (the Mailgun region, this has nothing to do with the WPCS Datacenter Region)
  • 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.
  • But first…

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 nice name
Important: create the API Key in the Client Product, not the Storefront Product
  • 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
Create a new tenant based on your newly-made Snapshot (we called it V1) and give the tenant a name
  • 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“.
  • On the website where you purchased the domain, change the A records to the 3 IPs listed below and change the CNAME record to public.eu1.wpcs.io as listed below also

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

  • 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!


Overview of the Customer Journey

You’re ready to test your Storefront. Head over to the website and go through the check out flow. We’ve added screenshots below as a reference.

Ask yourself:

Test out our 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

Summary

Leverage the dominant cloud achitecture for SaaS and productise your website business with WPCS.

Using this storefront, you can build product-based WordPress solutions that compete with proprietary giants like Shopify, but are built upon an open-source ecosystem that is superior in every comparison.

The benefits of using WPCS and this Storefront are:

Full ownership of your product

No vendor lock-in. Client sites can easily be migrated to and from the platform

0 Coding skills required

Use your excisting WordPress skills. No additional skillsets are needed

Easy setup from start to scale

Leverage an easy to use cloud interface to build scalable WaaS solutions\

Bring MRR upstream

Using WPCS, you can expand the retainer model over the entire lifecycle of a customer

Related articles

Create a Storefront that sells websites in less than one hour

Create a complete Website as a Service (WaaS) business in less than an hour. Zero code required.

Migrate to WPCS with WPCS Migration Plugin

You can get your sites up and running on the WPCS platform using our free WordPress Migration plugin

Build a Shopify SaaS Clone using WordPress, WooCommerce, WPCS & Kubernetes

Build a WPCS Product in 5 Steps

Build a scalable WordPress SaaS or WaaS (Website as a Service

How to automate your Website as a Service (WaaS) - Storefront included!

How to automate the sale and launch of your websites using a storefront with the WPCS API, WooCommerce, and Uncanny Automator.

Webinar: Merge Sites, Automate, and the Versioning System

Merging your agency’s website portfolio in WPCS where each website has a different tech stack, automate your business with a storefront, and continuously develop your sites like a SaaS.

Plugin name

Author

Description

Create a complete Website as a Service (WaaS) business in less than an hour. Zero code required.

Code Snippet