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.

Hosting

• Vue.js storefront: Hosting is included in your plan — your storefront is deployed and hosted by WOOHL.
• 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 WOOHL using the CNAME provided in your dashboard. (Self-hosting? Point to your own server instead.)
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. WOOHL deploys your Vue storefront to example.com — hosting is included. Point your domain using the CNAME from your dashboard and set 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)

Using WOOHL hosting (included in your plan): No server or build tools required — we handle deployment for you.

Self-hosting (advanced): The following are required if you choose to host the Vue storefront yourself:

• 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 your Vue origin in CORS / allowed domains. If using WOOHL hosting: enter the WOOHL-assigned origin shown in your dashboard. If self-hosting: enter your own domain (e.g. https://example.com).
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 your own server similar to DigitalOcean

1. Build production assets (npm run build or as documented).
2. Create an app or static site on your server and deploy the build output.
3. Attach your domain example.com (and www if needed) in server 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