Managing Orders

BallinKit integrates directly with WooCommerce order management. When a customer completes a purchase of a customized product, the full design data is saved as order item meta and displayed in the WooCommerce order admin view through a rich design preview card.

Design Data Saved on Checkout

The following metadata is saved to each WooCommerce order line item when a customized product is purchased:

  • _kit_customizer_active — set to "yes" to flag this as a customizer order
  • _kit_design — full JSON-encoded design payload (all views, layers, colors, referenceImage, etc.)
  • _kit_preview_url — URL to the front-view preview image
  • _kit_preview_urls — JSON array of preview URLs for all views
  • _kit_print_file — URL to the generated print file
  • _kit_print_files — JSON array of print files for all views
  • _kit_team_roster — JSON array of team player entries (name + number)
  • _kit_fonts — JSON object of fonts used: {\"FontName\": {\"name\": \"FontName\", \"url\": \"...\"}}

Additionally, these human-readable meta values are added for WooCommerce display in the order email and admin view:

  • Garment Color — hex value of the selected garment color (e.g. #EB2E2C)
  • Custom Text Layers — comma-separated text content from all text layers across all views
  • Custom Graphic Layers — count of uploaded user images and cliparts (e.g. "2 Custom Graphics")

All internal meta keys (prefixed with _kit_) are hidden from the standard WooCommerce order item meta display using the woocommerce_hidden_order_itemmeta filter. Only the formatted display values appear in the default order view.

Order Detail Page — Design Preview Card

Navigate to WooCommerce > Orders > [any order]. For orders containing customized products, the order detail page shows a rich Design Preview Card above the standard order item meta:

Design Preview Card Contents

  • Design Previews: Grid of thumbnail preview images for each view (front, back, etc.). Thumbnails link to the full-size preview image.
  • View in Designer: Button that opens the designer studio in read-only mode (?load_order_item={id}) to view the exact canvas state of the customer's design.
  • Download Print Files: Button to download the print-ready file for each view.
  • Garment Color: Displayed as a color swatch circle with the hex code.
  • Custom Text Layers: Each text value from the design, listed per view.
  • Custom Graphic Layers: Count of custom uploaded images and cliparts.
  • Font Layers (_kit_fonts): Each font used in the design is shown with its name. If the font has a custom URL (customer-uploaded font), a download icon/link appears so production staff can access the exact font file.
  • Product Design Reference: If the customer uploaded a reference image (e.g. a sketch or existing design), it is displayed as a thumbnail with a download link labeled by the original filename. This is sourced from the referenceImage field in the design JSON.
  • Team Roster: If a team roster was submitted, each player entry (name + number) is listed in a table.
  • Size & Quantity: The selected garment size and quantity are shown from WooCommerce order data.

KIT Designer > Orders Page

The dedicated KIT Designer > Orders admin page provides a filtered list of all WooCommerce orders that contain customized products. This view shows:

  • Order number and date
  • Customer name and email
  • Preview thumbnails
  • Quick download links for print files
  • Order status

Print File Generation

Print file generation is handled by the KIT_Composite class using PHP's ImageMagick or GD2 library. The compositing engine:

  1. Loads the base garment image
  2. Applies the garment color fill
  3. Applies any selected pattern
  4. Composites all text and image layers from the design JSON
  5. Clips the output to the print boundary mask
  6. Saves the result as a high-resolution PNG to wp-content/uploads/kit-print-files/{orderId}/

Print files can be regenerated on-demand from the order detail page. The kit_generate_print_file WordPress action hook fires background generation tasks.

Order Filtering and Export

  • Filter the WooCommerce order list by customized products using the KIT Orders admin page
  • Export design JSON data for integration with print house management systems
  • Bulk download print files for multiple orders