The Ultimate Guide To Building A WordPress SaaS – Part 1 (of 5)

Connect The Template Site To The Store

At this point, you’ve got a good start to your template. Of course, there’s no branding or onboarding flow yet and the user will log in as the full admin.

But it’s a good time to create a product and connect the template site up to it. This way you can test the customer experience during the checkout process. (You will likely be going through the checkout process dozens of times as you tweak your template.)

To do this, you need to go back to the wp-admin area of your OpenSaaS Primary Server. In there you should see a WooCommerce menu option and a Products menu option.

  • Go to PRODUCTSAdd New
  • Give the product a name eg: “WordPress Site Builder” and fill out the description.
  • Under the PRODUCT DATA section, choose SIMPLE SUBSCRIPTION as the product type and enable the VIRTUAL checkbox
  • Under the WORDPRESS SITES tab enable the This Is A WordPress Site checkbox.
  • For the ALWAYS PLACE SITES ON THIS SERVER, choose the CUSTOMER SERVER option
  • For the USE A TEMPLATE SITE option, choose the Template site
  • Click on the GENERAL tab and set a monthly or annual price for your product
  • Assign a product image if you like
  • Click the PUBLISH button in the upper right of the screen.

Your screen might look something similar to below:

Test The Checkout Process

The look of the checkout process will depend on the theme you have installed on the OpenSaaS Primary Server.

Are you confused yet? It’s really easy to confuse the theme and store you’re working on for your template sites vs the one you’re working on with the OpenSaaS Primary Server. We can guarantee that there will be at least one occurrence where you accidentally apply something to your OpenSaaS Primary Server site instead of the template site.

The default theme we install for you on your OpenSaaS Primary Server will have your products on the front page of the site. So, just navigate there and you should see your new product.

Then, ‘purchase’ the product and go through the checkout process. WooCommerce Stripe integration should already be in test mode so there’s no need for a real credit card.

Pro Tip: Use a different browser and STAY LOGGED in. This way you don’t have to keep retyping the checkout data.

After the checkout process is complete you will receive an email with the login information for the new site. It looks something like this:

Of course, you can customize the layout of this message but, for the purposes of this series, it is good enough as-is.

Test The New Customer Experience

With the above email you have everything you need to login to the new site as a customer.

Using a different browser (this is your third browser), login to the wp-admin area. Notice that what you’re seeing is the standard wp-admin look-and-feel since there is no onboarding guide or tweaks to provide a more user-friendly presentation.

Navigate to APPEARANCEKADENCE (Starter Templates)

Wouldn’t it be great if, instead of the bland WP-ADMIN area, this is the screen your customers could be presented with when they login for the first time?

There are two ways we can do this:

  • Easy: Include a link directly to this screen in the welcome email (the one we showed above earlier)
  • Harder: Create a modification that detects the first time login and automatically navigates to this screen.

Ideally we would do both – just in case a customer goes to wp-admin directly instead of using the link in the email.

Create A Running Todo List

Let’s start a todo list of all the things we would like to modify in the template in order to make onboarding for the customer a more pleasant experience.

For this series we’ll keep a running todo list in Appendix A. We’ll start it off with two items we identified above.

Now, what else would make the customer experience better? And what actions would you want to prevent your customers from executing when they get into wp-admin?

Here are some items / ideas to help you get started:

  • Block access to APPEARANCE->THEMES so that the user cannot upload their own theme or change the existing one.
  • Block access to the entire PLUGINS screen
  • Rename ‘Kadence’ to something with your brand – for the purposes of this series we’ll use the brand name ‘Basic Store’
  • Hide the KADENCE LICENSE ACTIVATION menu option
  • Hide some of the Kadence links and blocks.
  • Remove most metaboxes from the WordPress ‘Dashboard’ since they aren’t that important to the site builder experience.

Part 2 of this series covers permissions and locking things down so that your customers cannot perform certain destructive operations. By the end of part 2 you will have a minimum viable product.


This article is updated weekly with new sections – next week we will continue tackling our todo list.

Here is a tentative list of topics for the remaining parts of this series:

  • Part 3: Change terminology to remove 3rd party brand elements and further personalization for your brand. This will be your first introduction to a custom plugin for your template.
  • Part 4: Creating a basic onboarding checklist for your customers (further use of the custom plugin)
  • Part 5: Managing sites after deployment, managing multiple templates, deploying new functionality.

Extras

  • Part 6: Options for handling multiple templates
  • Part 7: One Template, Multiple WooCommerce Products
  • Part 8: Custom Plugin: Add upsell menu options
  • Part 9: Forking plugins, techniques for managing forks and reasons why you would even want to do this

Resources

Building a Template Site For Your WordPress SaaS

History

  • 04-26-2023: Updated to add and clarify information including links to part 2, list of plugins and more.
  • 11-01-2022: Initially published

Request a Demo

Want to see OpenSaas.io in action?  Request a demo - just pick a time from our calendar.

Posted in