Skip to main content

WooCommerce Integration

Enabling Designer on a Product​

  1. Go to WooCommerce → Products → Edit a product
  2. In the right sidebar, find the DesignLab meta box
  3. Check Enable product designer
  4. Select which DesignLab product to use
  5. Update the product

Customer Experience​

When a customer visits the product page:

  1. They see an "Open Designer" button
  2. Clicking opens the full-screen design editor
  3. They can add text, images, shapes, QR codes
  4. Click "Apply & Close" to save the design
  5. Click "Customize & Add to Cart" to purchase

Cart Integration​

  • The cart shows a preview thumbnail of the custom design
  • Design data is stored in the cart item meta
  • Extra pricing from pricing rules is added to the product price

Order Integration​

After checkout:

  • Design data is saved in the order item meta
  • The admin can view designs in DesignLab → Orders
  • Each order item shows preview + print-ready thumbnails
  • Click "View Full Design" for the Design Viewer with downloads