Cart Integration

BallinKit integrates seamlessly with WooCommerce cart functionality, capturing custom design data and displaying it throughout the checkout process.

How it Works

Once a customer submits a design, KIT processes the data and injects it into the WooCommerce cart:

Data Capture Process

  1. Customer completes design in the designer studio
  2. Clicks "Add to Cart" or "Save Design"
  3. KIT renders a preview thumbnail using ImageMagick/GD2
  4. Design data is serialized and sanitized
  5. Unique design ID hash is generated
  6. Configuration payload is added to cart item metadata

Cart Item Metadata

The following data is stored with each cart item:

  • Design ID: Unique identifier for the design
  • Preview URL: Path to the generated preview image
  • Design Data: Serialized design configuration
  • View Count: Number of active views
  • Text Layers: Count of text elements
  • Uploads: Count of uploaded images
  • Custom Price: Calculated customization fee

Cart Display

Cart Page

  • Custom preview image replaces product thumbnail
  • Design summary displayed below product name
  • Customization fee shown as line item
  • Quantity controls work normally
  • Remove button removes design from cart

Mini Cart

  • Preview image shown in mini cart widget
  • Design details on hover
  • Quick edit option (optional)

Cart Operations

Editing Designs

  • Click "Edit Design" button in cart
  • Designer opens with saved design loaded
  • Customer can modify the design
  • Updates cart item on save

Duplicate Designs

  • Copy design to create similar items
  • Useful for team orders with variations
  • Creates new design ID
  • Adds as separate cart item

Removing Designs

  • Standard WooCommerce remove functionality
  • Preview image deleted from cache
  • Design data removed from session

Session Management

Design Storage

  • Design data stored in WooCommerce session
  • Preview images stored in cache directory
  • Session timeout respects WooCommerce settings
  • Designs persist across page refreshes

Cache Management

  • Preview images cached for performance
  • Cache expires after configurable time
  • Manual cache purge available
  • Automatic cleanup on order completion

Quantity Handling

Single Design, Multiple Quantity

  • One design can have quantity > 1
  • Same design printed multiple times
  • Pricing scales with quantity
  • Bulk discounts apply

Multiple Designs

  • Each unique design is separate cart item
  • Useful for team orders with different names/numbers
  • Each design has its own preview
  • Independent quantity per design

Team Roster Integration

For team orders with individual player names and numbers:

  • Team roster data stored with cart item
  • Individual designs generated per player
  • Summary shows total team count
  • Print files generated per player