Whenever we introduce a new major version we like to create a new demonstration service around it. This helps us to make sure that what we’re sending out the door has some basis in reality.
Last year we introduced a demonstration service for WPCloudDeploy and our WooCommerce integrations called WPCloudPanel. We used it as a showcase on how WPCD could be used to quickly build out a mini version of CloudWays.
With the large scope of enhancements being introduced with WPCD 5.0, we decided to upgrade WPCloudPanel to show-off even more of the functions possible with WPCD and WooCommerce.
In the process of updating this service we ended up adding more than two dozen tweaks to the WPCD and WPCD WOOCOMMERCE code-base.
These tweaks make the WPCD core and WooCommerce integration much more useful for real-world deployment. We would not have even known these were needed unless we attempted to build out a real service offering.
The remainder of this article discusses what we’ve done with WPCloudPanel and, hopefully, gives you some food for thought as to what you might be able to accomplish with WPCD 5.0.
Three Products in One
WPCloudPanel now offers three product types instead of just one:
- An Agency Product
- Servers (a mini Cloudways style service – this was the original product offered in 2021)
- Sites billed by the day
Three distinct non-corelated product offerings in one service is far more than what our customers would usually offer. Most of our customers will likely not build out anything this complex. But we wanted to see what we could accomplish within a week or so with the latest version of WPCD and our WooCommerce integration.
By combining these three services into a single site we look to demonstrate the following:
- How to offer a WaaS with template sites
- How to offer a WaaS where each customer gets their own private VPS
- How to create a mini Cloudways style service
- How to offer standard WP sites with a custom control panel for customers
- How to conditionally vary the WPCD UI based on the product type
Probably the most complex part of creating these new service offerings was the required custom code to handle the various UI changes needed for each individual product type.
For example, the control panel for the Agency product was required to be stripped down to the barest bones while it required almost all features to be available for the Sites Billed by the Day product.
If a customer owned both products then the UI for the control panel needed to adapt based on which product was being shown.
By using a bit of custom code, we can examine the product type being displayed and conditionally strip out things that aren’t needed for that type.
In the image above you’ll see the site list with two different product types. The first item in the list is for the Sites Billed by the Day product.
The second item is for the Agency product.
If you drill into each of them you’ll see that they are very different as well:
The first image (or the one on left if viewing on a desktop) is for the Sites Billed by the Day product. The second one is for the Agency product.
The ability to vary the UI based on the product type is not something that is in the core WPCD product. But because everything is based on WordPress, all it took was a couple of standard WP style hooks to conditionally strip out the tabs we needed based on the product being used. A single user could purchase any of the three products and end up with a UI and security that was appropriate for each product.
Before we continue we probably should describe the three different service offerings.
WP Agency WordPress Infrastructure Control Panel
This product is an an all-in-one WordPress Infrastructure Management Panel for your WordPress focused agency. It combines server deployment, site management and customer billing using WordPress and WooCommerce.
From an implementation perspective it gives the customer a VPS with one WP site. That WP site is pre-configured with WPCD on it along with WooCommerce and some other plugins.
It is a demonstration of using WPCD to deploy a server and a template site as a single WooCommerce purchase.
It is basically a SaaS version of the full suite of WPCD products, pre-configured on a site and private server to make it easier for agencies to get started.
This service require only the most basic control panel – this is because we (the WPCloudPanel admins) will be responsible for maintaining the VPS and site. So only some launch links and the ability to set a domain are needed.
The Agency customer would be responsible for any servers, sites deployed and customizations they make to create a branded product offering for their agency.
So, for this product type, we conditionally remove most tabs and elements from the control panel. This was implemented as a custom extension for WPCloudDeploy.
This product is a mini version of Cloudways. We deploy a server at a provider of your choice taken from our pre-configured list of providers, regions and sizes.
Admins can quickly add or remove products from the offered product list.
As with Cloudways, customers do not get full access to the servers, leaving it to the WPCloudPanel staff to manage them.
With this service, we needed to bypass the standard WooCommerce store to make it easier for customers to quickly find the provider and related offers. We used NinjaTables for this and, as you can see from the above image, the UI looks nothing like a WooCommerce product page.
We used the standard WPCD security options to remove tabs in the control panel that were unsuitable for this product. No custom code was needed to tweak the panel for customers using this product.
WordPress Sites By The Day
This product simply deploys a site to a preconfigured pool of servers, billing the customer by the day.
It’s perfect for temporary sites where you need something more powerful than your usual sandbox sites.
It’s positioned as a middle ground between underpowered sandbox sites and full-featured WP hosts that bill by the month or year.
Customers using this product will see a standard WPCD control panel. We used the standard WPCD security options to remove tabs that were unsuitable for this product – no custom code was needed.
We knew going into this project that we would require a bit of custom code.
Imagine if you will the idea of writing custom code for something like Plesk, cPanel or WHCMS. The learning curve would be quite steep.
With WPCD, there is still a learning curve but but it’s drastically reduced because of your existing WordPress and WooCommerce knowledge.
For example, with the WPCloudPanel Agency product, we have a server and a site that must both be present in the cart before checkout. This needs to be validated so that customers don’t accidentally purchase one without the other.
Since you already have WooCommerce skills you probably already know (or can easily find) the checkout validation hooks to prevent a nonsensical cart from being checked out.
The other type of custom code we had to write involved manipulating the default WPCD front-end UI to add/remove items based on the type of product. As mentioned earlier, each of the three product types have different UI requirements.
The custom code for that was just PHP manipulation of an existing array that was triggered with a filter hook.
Of course, the only reason we had to write these in the first place was because we are handling three unique products with different target audiences on the same site – something most of our customers will likely not need to handle.
We’ll continue to iterate on this site as we add more features to WPCD and its WooCommerce integration.
Feel free to give the site a whirl but keep in mind that all charges are real!
We really hope you find it a useful resource as you ponder what you might be able to do with WPCD and WooCommerce.
Automatic Notification Of New Articles
Sign up to get automatic notifications of new articles. This is a different list than our standard list - you only get new articles once a week (usually on Mondays). No other emails will be sent unless you sign up for our general list as well.
Follow us on Twitter! We post a lot of cool things there first. Click the bird below!