How to Use Image Overlay Product Customizer for WooCommerce with Variable Products

The Image Overlay Product Customizer for WooCommerce plugin now includes comprehensive support for variable products, allowing you to create fully customizable product variations with unique backgrounds, overlay images, and custom text.

Setting Up Variable Product Customization

Step 1 : Enable Customization for Your Variable Product

1. Go to Products > Add New (or edit an existing variable product)
2. Set the product type to “Variable Product”
3. Navigate to the “Customization” tab
4. Check the “Enable Customization” checkbox
5. This activates customization features for the variable product and all its variations

Step 2 : Configure Default Settings

In the Customization tab, you’ll find several important settings:

• Default Variation Background Image: Upload a background image that will be used as the default for all variations. Individual variations can override this with their own background images.
• Background Image Overlays Variation: Check this box if you want the background image to appear on top of the variation image. Leave it unchecked if you want the variation image to overlay the background.
• Overlay Image Size (%): Set the size of overlay images as a percentage (1-100%). This controls how large the overlay images appear relative to the background.
• Overlay Image Position: Choose from 9 positions (top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right) for where overlay images appear.
• Background Height: Set the height of the preview area in pixels (default is 400px).
• Text Position: Choose where custom text appears on the product preview.
• Show Custom Text Field: Enable or disable the custom text input field on the product page.
• Hide Product Image Gallery: Optionally hide the default WooCommerce product image gallery.

Step 3 : Set Up Product Attributes

Before creating variations, you need to set up attributes:

1. Go to Products > Attributes
2. Add a new attribute (e.g., “Color”, “Size”, “Style”)
3. Click “Configure terms” and add your terms (e.g., “Red”, “Blue”, “Green”)
4. For each term, you can upload an image that will be used as an overlay image
5. These term images will appear over the background image when customers select that term

Step 4 : Create Variations with Custom Backgrounds

1. Go to the “Variations” tab in your variable product
2. For each variation, you can set:

• Variation price
• Variation image (the main product image for that variation)
• Background Image: Upload a unique background image for this specific variation

3. If a variation doesn’t have its own background image, it will use the default background image from the parent product

How It Works on the Frontend

When a customer visits your variable product page:

1. They see the customization preview area with the default background image
2. They select a variation using the standard WooCommerce variation selector
3. When a variation is selected:

• The variation’s background image appears (or the default if none is set)
• The variation’s main product image overlays the background (or vice versa, depending on your settings)
• The term image (from the selected attribute) appears as an overlay

4. If custom text is enabled, customers can enter custom text that appears on the preview

5. The custom text and selected term are saved to the cart and order

Cart and Order Integration

The plugin automatically:

• Displays custom text in the cart (both classic and block cart formats)
• Shows custom text alongside variation attributes (e.g., “Color: Red, Text: Custom Message”)
• Saves all customization data to the order
• Displays customization data in order details and emails

Best Practices

1. Background Images: Use images that are 500px wide for best results. The height can vary based on your design needs.
2. Term Images: Crop your attribute term images before uploading so they’re appropriately sized to overlay within your background image. Smaller images work better as overlays.
3. Variation Backgrounds: Consider using variation-specific backgrounds when you want each variation to have a unique look (e.g., different color schemes for different product colors).
4. Overlay Size: Start with 80% overlay size and adjust based on your design. Smaller percentages create more subtle overlays, while larger percentages make overlays more prominent.
5. Testing: Always test your variable products on the frontend to ensure the customization preview works correctly with your chosen settings.

Advanced Features

• Product Name Customization: You can configure the plugin to replace or append the product name with taxonomy terms and custom text in the cart and orders.
• Multiple Attributes: The plugin works with the first attribute you configure. Make sure your primary customization attribute is set up first.
• Custom vs Taxonomy Attributes: The plugin supports both global taxonomy attributes (like Color, Size) and custom product attributes.

Troubleshooting

If customization isn’t appearing on your variable product page:

1. Make sure “Enable Customization” is checked in the Customization tab
2. Verify that the product has attributes configured
3. Check that terms have been added to your attributes
4. Ensure at least one variation exists for the product
5. Clear any caching plugins

The Image Overlay Product Customizer for WooCommerce makes it easy to create customizable variable products that allow customers to see exactly how their selections will look before adding items to their cart.