Domains & Servers

Woohl works best when you split where shoppers browse and where WordPress handles checkout. Use a main domain for the Vue storefront and a secure subdomain for WordPress, WooCommerce, the Woohl plugin, and checkout.

Why two hostnames? Your Vue app talks to WooCommerce through the Woohl plugin APIs on the secure site. Checkout stays on WooCommerce’s native flow (secure subdomain), keeping payment gateways and order handling standard.

Where we recommend hosting

• Vue.js storefront: DigitalOcean (App Platform, Droplet, or static hosting) — our recommended option. Great fit for Node-based builds and predictable scaling.
• WordPress + WooCommerce + Woohl plugin: stays on your existing server at the secure subdomain (e.g. secure.example.com).

DNS checklist

1. Point example.com (and www if used) to your DigitalOcean frontend.
2. Create secure.example.com as an A or CNAME record pointing to your existing WordPress server.
3. In WordPress Settings → General, set WordPress Address and Site Address to https://secure.example.com.
4. In your Vue app .env, set the API base URL to https://secure.example.com.
5. Configure the Woohl plugin to allow your Vue origin (https://example.com) for CORS / allowed domains.

What is Woohl?

Woohl turns your WooCommerce store into a fast, modern headless storefront built with Vue.js. Shoppers browse on the Vue site; WooCommerce still runs products, orders, payments, and inventory on the secure subdomain.

In short: WooCommerce stays the backend (on secure.example.com); Vue.js is the customer-facing storefront (on example.com).

Who is Woohl for?

• Store owners who want better performance and Core Web Vitals without replacing WooCommerce.
• Teams who can set DNS, environment variables, and deploy a second hostname (or who work with a developer).
• Anyone who wants headless WooCommerce with checkout on the secure WordPress domain and browsing on Vue.

What you get

Note: The Woohl Licensing Server runs on the sales site (e.g. woohl.dev). Customers mainly use checkout, email, and My Account → Woohl Licenses.

How it works

1. You purchase Woohl on woohl.dev (or your seller).
2. When the order is paid, a license is created.
3. You get an email with your key and download links.
4. Install the Woohl plugin on secure.example.com and enter the license key.
5. Deploy Vue to example.com (DigitalOcean recommended) and point API URLs to the secure site.
6. Shoppers browse on example.com; checkout completes on secure.example.com/checkout.

Requirements

Secure site (WordPress + WooCommerce)

• WordPress + WooCommerce on https://secure.example.com (or your chosen secure subdomain).
• SSL certificate on the secure hostname.
• PHP and permalinks suitable for REST API (see hosting docs).

Vue site (storefront)

• Node.js + npm/pnpm/yarn for build and deploy.
• DigitalOcean (or similar) to host example.com.

Account

• Use the same customer account at checkout when possible so My Account shows licenses (guest checkout may hide them).

Purchasing & Licensing

After you buy

• Unique license key
• Expiry date
• Link to order and customer when logged in

Where to find it

• Email
• WooCommerce → My Account → Woohl Licenses — key, status, Vue ZIP, plugin ZIP

Renewals

Expired licenses may block validation and downloads until renewed. Reminder emails may be sent before expiry.

Install the Woohl Plugin

Install only on the WordPress site that serves WooCommerce — the secure subdomain.

1. Download the plugin ZIP from email or My Account.
2. Plugins → Add New → Upload → Install → Activate on secure.example.com.
3. Open Woohl settings and enter your license key.
4. Allow https://example.com (your Vue origin) in CORS / allowed domains if the plugin offers it.
5. Confirm checkout works at https://secure.example.com/checkout.

Vue.js Storefront Setup

9.1 Unpack and install locally

1. Download the Vue.js code (ZIP) from My Account or email.
2. Unzip and run npm install (or pnpm/yarn) per the package README.

9.2 Point the app at your secure backend

In .env (or equivalent), set your WooCommerce / WordPress base URL to the secure site:

Your README lists the exact variable names. Also set any checkout URL or redirect so “Checkout” sends users to https://secure.example.com/checkout.

9.3 Deploy to DigitalOcean

1. Build production assets (npm run build or as documented).
2. Create an app or static site on DigitalOcean and deploy the build output.
3. Attach your domain example.com (and www if needed) in DigitalOcean DNS or your registrar.
4. Enable HTTPS.

9.4 Final checks

• Vue loads at https://example.com.
• API calls succeed against https://secure.example.com (no CORS errors in the browser console).
• Checkout completes on https://secure.example.com/checkout.

License Activation

The license system can activate a domain, return status, and enforce activation limits. Enter your key in the plugin on the secure site; detailed API docs are available for developers on request.

Troubleshooting

FAQ