Feature - Frontend Virtual Try-On Experience & Admin Visibility Control

[jamil-mahmud]

Description

This feature implements the core "Virtual Try-On" experience for shoppers on the frontend single product page. It includes two parts: an Admin control to selectively enable/disable the feature for specific products via the product list, and the frontend interactive modal where shoppers can upload a photo or use their webcam to visualize the product on themselves before purchasing.

Design

Design: Figma Link

Visual Look

1. Admin Product List (Backend)

• A new column labeled "Try-Ons" is added to the standard WooCommerce "All Products" table.
• Each row contains a toggle switch.
  • Active (Purple): Indicates the feature is enabled for that product.
  • Inactive (Gray): Indicates the feature is disabled.

2. Single Product Page (Frontend)

• A distinct black button labeled "TRY ON" appears directly next to the standard blue "ADD TO CART" button.
• The button style (padding, height) matches the existing theme's "Add to Cart" button for visual consistency.

3. Try-On Modal (Overlay)

• Header: Title "Try-On Product" with a close (X) icon.
• Layout: A three-section horizontal layout:
  • Your Photo: Buttons for "Upload Photo" and "Open Camera". Once populated, it shows the user's image with a "Recapture" button overlay.
  • Product Images: Displays the static product image being tried on.
  • Generated View: A large placeholder that populates with the final AI-generated composite image.
• Footer Actions:
  • "TRY ON": A black primary button to trigger the generation.
  • "Add To cart": A secondary button allowing purchase directly from the modal.

Use Case

• Store Owner: The merchant sells T-shirts and Hoodies but also stickers. They want to enable the AI Try-On for the apparel but disable it for stickers. They go to the "All Products" list and toggle the "Try-Ons" switch to "On" only for the clothing items.
• Shopper: A customer views a "Yellow Hoodie." They are unsure if the yellow color suits their skin tone. They click "TRY ON," snap a quick photo via webcam, and click the "TRY ON" button in the modal. The system generates an image of them wearing the hoodie. Satisfied, they click "Add To cart" directly from the modal.

Information Architecture

• Admin Location: Products > All Products. The control is a new column in the main data table.
• Frontend Entry: Single Product Page. The trigger is located in the "Summary/Buy" box area.
• Interaction Container: A specialized Modal/Popup that overlays the product page content, containing the upload, preview, and generation logic.

Acceptance Criteria

• Visibility Logic: The "TRY ON" button must only appear on the frontend product page if the admin has toggled the "Try-Ons" switch to "On" for that specific product in the backend.
• Toggle Persistence: Toggling the switch in the admin panel must save the state immediately (AJAX) without requiring a full page reload.
• Modal Input: The modal must allow users to successfully select a local file OR access the browser webcam to capture an image.
• Generation Trigger: Clicking the "TRY ON" button inside the modal must initiate the AI process and display the result in the "Generated View" column.
• Conversion Path: The "Add To cart" button inside the modal must successfully add the specific product to the WooCommerce cart and provide standard feedback (e.g., "Product added").