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
referenceImagefield 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:
- Loads the base garment image
- Applies the garment color fill
- Applies any selected pattern
- Composites all text and image layers from the design JSON
- Clips the output to the print boundary mask
- 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