BetterLABEL — WordPress Plugin

Custom wine label designer for Commerce7 stores. Connects to the BetterLABEL SaaS backend for image storage and order creation.

Requirements

• WordPress 6.0+
• PHP 8.0+
• A Commerce7 store (tenant ID required)
• A BetterLABEL license key

Installation

1. Copy the betterlabel-plugin/ folder into your WordPress installation:

   wp-content/plugins/betterlabel/

2. In the WordPress admin go to Plugins → Installed Plugins and activate BetterLABEL.

3. A new BetterLABEL menu item will appear in the left sidebar.

Configuration

Go to BetterLABEL → Settings and fill in:

Save settings. A warning banner will appear at the top of the admin until both the license key and tenant ID are configured.

Adding Products & Labels

Label Products (bl_product)

These are the wine bottles / products that customers will customize.

1. Go to BetterLABEL → Label Products → Add New.
2. Fill in:
   • Title — product name shown in Step 1
   • Content — short description (optional)
   • Featured Image — product photo (shown in the selection grid)
   • SKU — the Commerce7 product SKU (used when adding to cart)
   • Price — display price, e.g. $34.99 (cosmetic only)

Label Options (bl_label)

These are the label templates that appear as the "frame" overlay on the canvas.

1. Go to BetterLABEL → Label Options → Add New.
2. Fill in:
   • Title — label name shown in Step 2
   • Featured Image — the label PNG/transparent overlay (1215×1065 px recommended)

Adding the Designer to a Page

Place the shortcode anywhere in a page or post:

[betterlabel]

The shortcode renders the full 3-step wizard:

1. Choose Your Wine — grid of bl_product posts
2. Choose Your Label — grid of bl_label overlays
3. Customize & Checkout — canvas editor + Add to Cart

The wizard is hidden on mobile and replaced with a "please use a desktop" notice.

How It Works (Architecture)

Browser (visitor)
    │
    │  Step 3: Upload image
    ▼
WordPress AJAX  (admin-ajax.php)
    │  action=betterlabel_upload_image
    │  action=betterlabel_create_order
    ▼
BetterLABEL SaaS Backend  (betterlabel-saas.miriondo-f3d.workers.dev)
    │  POST /upload-image   → stores PNG, returns public URL
    │  POST /create-order   → calls Commerce7 API with license_key + tenant
    ▼
Commerce7 API  (api.commerce7.com)

The plugin never exposes your license key to the browser. All calls to the SaaS backend are proxied server-side through the WordPress AJAX handlers.

C7 App (Standalone Mode)

The c7app/ folder contains a standalone HTML app that can be listed in the Commerce7 App Store, usable without WordPress.

Usage

Open c7app/index.html with URL parameters:

index.html?tenant=my-winery&primaryColor=%2399293e

In C7 App mode the designer calls the SaaS API directly (no WordPress involved). Products and labels are loaded from:

• GET {saasUrl}/products?tenant=…
• GET {saasUrl}/labels?tenant=…

Verification Checklist

After setup, confirm the following:

• [ ] Go to Settings → BetterLABEL, enter tenant + license key, save.
• [ ] Create one Label Product with a featured image and SKU.
• [ ] Create one Label Option with a featured image (PNG with transparency).
• [ ] Create a WordPress page with [betterlabel] in the content.
• [ ] Visit the page — the 3-step wizard should render.
• [ ] Upload a photo in Step 3 and confirm the canvas updates.
• [ ] Click Add to Cart — check the browser Network tab for a successful AJAX call to admin-ajax.php?action=betterlabel_create_order.
• [ ] Confirm the Commerce7 side cart opens after a successful order.
• [ ] Search all plugin files for wilson-creek-winery — should return no results.

File Structure

betterlabel/
├── betterlabel.php                    # Plugin entry point
├── uninstall.php                      # Cleans DB options on uninstall
├── includes/
│   ├── class-betterlabel-loader.php   # Hook registration
│   ├── class-betterlabel-cpt.php      # CPTs: bl_product, bl_label
│   ├── class-betterlabel-settings.php # Admin settings page
│   ├── class-betterlabel-ajax.php     # AJAX proxies → SaaS
│   ├── class-betterlabel-shortcode.php# [betterlabel] shortcode
│   └── class-betterlabel-assets.php   # CSS/JS enqueue
├── admin/views/
│   └── settings-page.php              # Settings page HTML
├── public/
│   ├── css/betterlabel.css            # Designer styles (uses --bl-primary)
│   ├── js/betterlabel-designer.js     # Canvas editor core
│   └── views/designer-template.php   # 3-step wizard HTML
└── c7app/
    ├── index.html                     # Standalone C7 App entry point
    └── js/c7app-init.js               # C7 App config + data fetching

Customization

Change the primary color per-site

In BetterLABEL → Settings → Primary Color, pick any hex color. The plugin injects it as a CSS variable:

:root { --bl-primary: #your-color; }

All buttons, borders, and highlights update automatically — no CSS editing needed.

Override styles

Add CSS to your theme or via Appearance → Customize → Additional CSS. All plugin elements are scoped inside .bl-designer-wrap and #smartwizard.

Uninstalling

Deactivate and delete the plugin from Plugins → Installed Plugins. All options (betterlabel_license_key, betterlabel_c7_tenant, etc.) are automatically removed from the database by uninstall.php.

Custom post type data (bl_product, bl_label) is not deleted automatically — remove those posts manually before uninstalling if desired.

Support

• Owner: Gorilion
• Developed by: Mariano de Iriondo (Gorilion) — mariano@gorilion.com
• Issues: contact Gorilion at gorilion.com