Ballin Simple Plugin — Name & Number Customizer with Live Preview

Ballin Simple is a specialized WooCommerce customization plugin that empowers shoppers to personalize jerseys and apparel with custom Player Names and Jersey Numbers. Featuring an interactive Front & Back live visualizer, drag-and-drop layer positioning, sports typography styles, and automated high-resolution mockup generation saved directly to orders.

Free Download: Ballin Simple is completely free and requires no license key. Download the package from the Customer Downloads panel.

Key Features

• Interactive Front & Back Live Visualizer: Displays photorealistic Front and Back mockup angles with an instant view switcher and one-click Flip control.
• Per-Product Image-Driven Activation: Visual preview activates conditionally only when real Front or Back product mockups are uploaded on the WooCommerce product.
• Direct Drag-and-Drop Positioning: Customers can freely drag and position Name and Number layers across the jersey mockup canvas with SVG coordinate clamping and touch/mouse support.
• Curated Sports Typography: Built-in support for popular sports jersey typefaces including Teko, Bebas Neue, Outfit, and Anton.
• High-Resolution Mockup Generation: Automatically generates composite 600×720 PNG mockup snapshots on Add-to-Cart without delaying standard form submission.
• Cart & Checkout Visual Previews: Displays customized mockup thumbnails and font/position details directly in cart and checkout item summaries.
• WooCommerce Order Integration: Full-resolution custom mockups and layer coordinates are permanently saved to WooCommerce orders, visible in both the Admin Order Edit panel and customer receipts.
• HPOS & Modern WooCommerce Ready: Fully declared compatibility with WooCommerce High-Performance Order Storage (HPOS) and Custom Order Tables.

Installation & Setup

1. Download ballin-simple.zip from Downloads & Packages.
2. Navigate to WordPress Admin > Plugins > Add New > Upload Plugin.
3. Choose ballin-simple.zip and click Install Now.
4. Click Activate Plugin.

Plugin Architecture & File Breakdown

The plugin is engineered with a clean, modular object-oriented PHP and modern JavaScript structure:

• ballin-simple.php: Main bootstrap class managing initialization, asset registration, dependency validation, and HPOS declarations.
• includes/class-bscp-admin-settings.php: Global plugin settings under WooCommerce > Settings > Ballin Simple for default pricing and typography toggles.
• includes/class-bscp-product-meta.php: Product Data metabox with Front & Back media uploaders and per-product pricing controls.
• includes/class-bscp-product-page.php: Frontend product customizer UI, draggable SVG overlay stages, view switcher, and font selectors.
• includes/class-bscp-cart.php: Handles base64 mockup decoding, upload storage (wp-content/uploads/bscp-customizer/), price calculations, and cart metadata rendering.
• includes/class-bscp-orders.php: Persists custom design URLs and layer coordinates to HPOS order meta, and renders mockup cards in admin & customer order views.
• assets/js/bscp-product.js: Interactive drag-and-drop layer positioning, live text scaling, instant HTML5 canvas snapshot generation, and view transitions.
• assets/css/bscp-product.css: Polished UI styling, viewport aspect ratios, badges, drag cursor states, and responsive layout adaptations.

Configuring Per-Product Front & Back Images

To enable the live visualizer for a specific product:

1. Edit any WooCommerce product (Products > All Products > Edit).
2. Scroll down to the Product Data panel and select the Kit Customizer tab.
3. Upload your product mockups:
   • Front View Image: Upload or select the transparent front jersey PNG from the WordPress Media Library.
   • Back View Image: Upload or select the transparent back jersey PNG.
4. Configure optional pricing:
   • Enable Customization: Enable or inherit global setting
   • Custom Name Price Override: Flat fee for adding name
   • Custom Number Price Override: Flat fee for adding number
5. Click Update to save the product.

Note: If no front or back image is uploaded, the product will seamlessly operate in standard input mode without displaying the graphic mockup stage.

Global Options & Settings

Navigate to WooCommerce > Settings > Ballin Simple to manage global store defaults:

Order Details & Production Export

When an order containing personalized items is placed:

• The WooCommerce Admin Order screen displays custom mockup cards with thumbnails under the line item.
• Store managers and production teams can click directly on the mockup thumbnails to open and download full-resolution PNG designs.
• Exact layer coordinates (X & Y pixel offsets) and selected typography styles are stored in line-item metadata for precision printing.

Developer Hooks & Filters

Customize behavior programmatically in your child theme or custom plugin:

// Modify the add-on total calculation
add_filter('bscp_calculate_customization_price', function(\$addon_price, \$cart_item_data) {
    if (current_user_can('vip_customer')) {
        \$addon_price = \$addon_price * 0.8; // 20% discount on customization
    }
    return \$addon_price;
}, 10, 2);

// Customize the input label rendered on product pages
add_filter('bscp_name_field_label', function(\$label) {
    return __('Custom Player Name (Back of Jersey)', 'my-theme');
});