Introduction & Overview

The Print Barcode Labels for WooCommerce Products & Orders plugin is a complete, enterprise-grade retail automation system designed by Webkul. It bridges the gap between digital e-commerce inventory and physical store operations by enabling store owners to generate, customize, and print high-quality barcodes for WooCommerce products, orders, and coupons.

Using a visual drag-and-drop label designer and a local WebSocket print server, the plugin translates labels into Zebra Programming Language (ZPL) or high-resolution canvas print streams to automate label printing at checkouts and warehouse operations.

Complete Execution Flow Architecture

Here is how the browser-based WooCommerce backend communicates securely with local thermal label printers:

sequenceDiagram
    autonumber
    actor Merchant as Merchant / Cashier
    participant Browser as WooCommerce Admin (React/JS)
    participant Server as Local Node Print Server (SSL WS)
    participant Printer as Zebra / Thermal Label Printer

    Note over Merchant, Browser: Visual Label Design & Settings
    Merchant->>Browser: Selects products/orders & clicks "Print"
    Note over Browser: auto-print.js converts HTML elements
    Browser->>Browser: Render label layout to canvas (html2canvas)
    alt Printing Mode: ZPL Command Stream
        Browser->>Browser: Convert pixels to ZPL monochrome hex stream
    else Printing Mode: Image/Raster
        Browser->>Browser: Convert canvas to raw PNG base64 stream
    end
    
    Browser->>Server: Connects via secure WebSocket (wss://localhost:8080)
    Browser->>Server: Send print command payload (ZPL or base64)
    Note over Server: Node socket listener parses request
    Server->>Printer: Send raw print job to system default printer driver
    Printer->>Printer: Feed, print & cut barcode label sticker

Core Customer & Staff Workflows

1. From the End-Shopper's Perspective

  • Automatic Package Labeling: Upon placing an order, the system can automatically print a package routing label. Cashiers immediately slap this label on the bag or box for shipping or customer pickup.
  • Frictionless Pick-ups & Returns: Orders are tagged with unique barcode identifiers representing the WooCommerce Order ID. When returning an item, the customer presents the barcode slip. Clerks scan it to retrieve the order instantly.
  • Physical Voucher Discounts: Customers receive physically printed coupon labels. Scanning the coupon at the POS register instantly applies the coupon discount to their cart.

2. From the Cashier & Packer's Perspective

  • Scan-to-Fulfill: fulfillment workers print order stickers in bulk, stick them on shipments, and scan the outer barcodes to verify package contents and update status.
  • Instant Inventory Lookup: Cashiers scan product UPC/EAN barcodes using hardware scanners. The e-commerce backend pulls up stock levels, pricing, and details in real-time.

3. From the Store Owner / Admin's Perspective

  • Drag-and-Drop Editor: Design and resize labels visually with customizable columns, paddings, and font sizes under WooCommerce Addons > Barcode Labels.
  • Zero-Click Auto-Printing: Hook into woocommerce_thankyou order hooks to command physical label printers automatically as soon as a customer checks out.

[!TIP] Performance Recommendation: Always use ZPL (Zebra Programming Language) mode for thermal label printers. It transmits lightweight vector instructions instead of heavy images, completing print jobs in milliseconds.