Image Switcher Field
The Image Switcher field allows customers to select options by clicking on visual image thumbnails instead of text-based choices. Each option displays as a clickable image with a label and price, making it perfect for visual selections like colors, patterns, styles, or any scenario where seeing the option is more important than reading about it. The field can be configured for single selection (like radio buttons) or multiple selections (like checkboxes).
Why Use an Image Switcher Field?
- Visual Selection: Customers see images instead of just text, making choices intuitive
- Better UX: Clicking images is more engaging than traditional form fields
- Flexible Selection: Can be single selection (radio) or multiple selections (checkbox)
- Perfect for Visual Products: Ideal for colors, patterns, fabrics, styles, materials
- Flexible Pricing: Set fixed prices or percentage-based pricing for each image option
- Professional Appearance: Creates a modern, premium shopping experience
Single vs Multiple Selection
Image Switcher has a unique “Allow Multiple” setting that changes its behavior:
| Setting | Behavior | Input Type | Best For |
|---|---|---|---|
| Allow Multiple = OFF | Single selection only | Radio button | Color swatches, style variations, mutually exclusive choices |
| Allow Multiple = ON | Multiple selections allowed | Checkbox | Patterns, add-ons, extras that can be combined |
When to Use Image Switcher vs Other Fields
| Use Image Switcher When | Use Radio/Checkbox When | Use Color Switcher When |
|---|---|---|
| Visual representation needed | Text-only options sufficient | Simple color swatches only |
| Patterns, fabrics, styles | Size, quantity, text choices | Just color selection |
| Product images matter | Options don’t need visuals | No images, just colors |
| Premium shopping experience | Standard form fields OK | Color picker is enough |
Price Types
Image Switcher fields support two pricing methods. Each selected image option adds its price:
1. Fixed Price
Each image option has its own fixed price. When customers select image(s), the price(s) are added to the product.
Example – Fabric Pattern Selection:
| Option Label | Image | Price Type | Price |
|---|---|---|---|
| Solid Navy | [image] | Fixed | 0.00 |
| Striped Pattern | [image] | Fixed | 5.00 |
| Plaid Design | [image] | Fixed | 8.00 |
| Floral Print | [image] | Fixed | 10.00 |
| Geometric Pattern | [image] | Fixed | 12.00 |
Customer Experience:
Base product price: $99.00
Customer clicks image: Floral Print
Selected price: $10.00
Final price: $99.00 + $10.00 = $109.00
Note: If “Allow Multiple” is ON, customers can select multiple patterns and all prices add up.
2. Percentage of Product Price
Each image option’s price is calculated as a percentage of the product’s base price. The calculated amount is added when an image is selected.
Example – Material Upgrade Selection:
| Option Label | Image | Price Type | % | On $500 |
|---|---|---|---|---|
| Standard Material | [image] | Percentage | 0% | 0.00 |
| Premium Material | [image] | Percentage | 15% | 75.00 |
| Luxury Material | [image] | Percentage | 25% | 125.00 |
| Exotic Material | [image] | Percentage | 40% | 200.00 |
Customer Experience:
Base product price: $500.00
Customer clicks image: Luxury Material
Calculation: $500 × 25% = $125.00
Final price: $500.00 + $125.00 = $625.00
Real-World Examples
Example 1: Furniture Fabric Selection (Single)
Scenario: Furniture store offers sofas in different fabric patterns. Customer must choose one.
Configuration:
- Field Type: Image Switcher
- Field Label: “Choose Fabric Pattern”
- Allow Multiple: OFF (Single selection)
- Required: Yes
Options Setup:
| Option Label | Image | Price |
|---|---|---|
| Charcoal Solid | [fabric swatch] | 0.00 |
| Navy Stripe | [fabric swatch] | 25.00 |
| Gray Plaid | [fabric swatch] | 35.00 |
| Floral Pattern | [fabric swatch] | 50.00 |
| Velvet Texture | [fabric swatch] | 75.00 |
Customer Experience:
- Base sofa: $899.00
- Clicks image: Floral Pattern
- Final price: $949.00
- Only ONE fabric can be selected (radio behavior)
Scenario: Custom t-shirt with multiple add-on design elements that can be combined.
Configuration:
- Field Type: Image Switcher
- Field Label: “Add Design Elements”
- Allow Multiple: ON (Multiple selections)
- Required: No
Options Setup:
| Option Label | Image | Price |
|---|---|---|
| Star Design | [design image] | 5.00 |
| Heart Pattern | [design image] | 5.00 |
| Logo Badge | [design image] | 8.00 |
| Text Monogram | [design image] | 10.00 |
| Custom Artwork | [design image] | 15.00 |
Customer Experience:
- Base t-shirt: $24.99
- Clicks images: Star Design + Logo Badge + Text Monogram
- Total add-ons: $5 + $8 + $10 = $23.00
- Final price: $47.99
- Multiple images can be selected (checkbox behavior)
Example 2: Design Add-Ons (Multiple)
Example 3: Wallpaper Pattern Selection
Scenario: Home decor store offers wallpaper with visual pattern previews.
Configuration:
- Field Type: Image Switcher
- Field Label: “Select Pattern”
- Allow Multiple: OFF (Single selection)
- Required: Yes
Options Setup:
| Option Label | Image | Price Type | % | On $200 |
|---|---|---|---|---|
| Classic Stripes | [pattern image] | Percentage | 0% | 0.00 |
| Modern Geometric | [pattern image] | Percentage | 10% | 20.00 |
| Floral Garden | [pattern image] | Percentage | 15% | 30.00 |
| Abstract Art | [pattern image] | Percentage | 20% | 40.00 |
Scenario: Jewelry store shows ring styles with visual images.
Configuration:
- Field Type: Image Switcher
- Field Label: “Ring Style”
- Allow Multiple: OFF (Single selection)
- Required: Yes
Options Setup:
| Option Label | Image | Price |
|---|---|---|
| Classic Round | [ring image] | 0.00 |
| Vintage Art Deco | [ring image] | 50.00 |
| Modern Solitaire | [ring image] | 75.00 |
| Halo Design | [ring image] | 100.00 |
| Three-Stone | [ring image] | 150.00 |
Example 4: Ring Style Selection
Configuration Options
Basic Settings
| Setting | Description | Example |
|---|---|---|
| Field Label | Main label shown to customers | “Choose Pattern” |
| Subtitle | Additional helper text | “Click an image to select” |
| Required | Whether selection is mandatory | Yes/No |
| Required Text | Custom validation message | “Please select a pattern” |
| Required Text Color | Color for validation message | Red (#ff0000) |
| Allow Multiple | Enable multiple image selections | ON = Checkbox, OFF = Radio |
| Name | Internal field identifier | “pattern_selector” |
| ID | Unique HTML ID | “pattern_field_1” |
| CSS Class | Custom styling class | “custom-image-switcher” |
Repeater Options (For Each Image Option)
| Setting | Description |
|---|---|
| Option Label | The text label displayed below the image |
| Image Upload | Upload image file (PNG, JPEG, JPG, GIF supported) |
| Price Type | Choose between “Fixed” or “Percentage of Product Price” |
| Price | Enter the price value (dollar amount or percentage number) |
Image Upload Details:
• Supported formats: PNG, JPEG, JPG, GIF
• Upload via AJAX (no page refresh)
• Images display as 150px width thumbnails
• Recommended: Square images (150x150px or 200x200px) for best appearance
Advanced Settings (Premium Features)
| Setting | Purpose |
|---|---|
| Enable Quantity | Add quantity input for selected image option(s) |
| Product Quantity | Link addon quantity to main product quantity |
| Default Quantity | Set initial quantity value |
| Min/Max Quantity | Control quantity limits |
| Conditional Logic | Show/hide field based on other selections |
| Hide in Cart | Hide addon details from cart display |
| Hide Price in Cart | Show images without displaying prices in cart |
What Your Customers See
When a customer interacts with your image switcher field:
- Image thumbnails displayed – All option images are visible in a grid layout
- Clickable images – Customers click directly on images to select
- Visual feedback – Selected images show a visual indicator (border, highlight, or checkmark)
- Label and price visible – Each image shows its label and price below
- Selection behavior – Single selection (radio) or multiple selections (checkbox) based on “Allow Multiple” setting
- Real-time pricing – Product price updates instantly when images are selected/deselected
- Cart display – Selected images and their prices appear in the cart
Tips for Creating Effective Image Switcher Fields
Do’s ✓
- Use high-quality images – Clear, well-lit images that accurately represent the option
- Keep images consistent – Use same size/aspect ratio for all options (e.g., 150x150px or 200x200px)
- Use square images – Square thumbnails look best in grid layouts
- Optimize file sizes – Compress images for faster loading (keep under 200KB each)
- Write descriptive labels – Help customers understand what each image represents
- Set “Allow Multiple” correctly – OFF for single choice, ON for multiple add-ons
- Test on mobile – Ensure images are easily tappable on small screens
Don’ts ✗
- Don’t use low-resolution images – Blurry or pixelated images look unprofessional
- Don’t mix image sizes – Inconsistent sizing creates a messy appearance
- Don’t use overly large files – Large images slow down page loading
- Don’t forget alt text – While not visible, it helps with accessibility
- Don’t use for text-only options – Use radio buttons or checkboxes if images don’t add value
- Don’t ignore mobile users – Test that images are large enough to tap easily
Common Use Cases Summary
| Industry | Use Case | Example Images |
|---|---|---|
| Fashion/Apparel | Fabric patterns | Fabric swatches, textures, patterns |
| Furniture | Material selection | Wood grains, fabric samples, finishes |
| Home Decor | Pattern selection | Wallpaper patterns, tile designs |
| Jewelry | Style selection | Ring styles, pendant designs |
| Custom Printing | Design elements | Logo options, pattern add-ons |
| Automotive | Interior options | Seat materials, trim styles |
| Art & Prints | Frame styles | Frame designs, mat colors |
| Food & Beverage | Presentation styles | Plating styles, garnish options |
Troubleshooting
Issue: Images not uploading or showing error
Solution: Ensure images are in supported formats (PNG, JPEG, JPG, GIF). Check file size limits. Verify WordPress upload permissions are set correctly.
Issue: Images appear stretched or distorted
Solution: Use square images (1:1 aspect ratio) like 150x150px or 200x200px. Ensure all images have the same dimensions for consistent display.
Issue: Customers can select multiple images when only one should be allowed
Solution: Check the “Allow Multiple” setting. Set it to OFF for single selection (radio behavior). When ON, it allows multiple selections (checkbox behavior).
Issue: Images load slowly or page performance is poor
Solution: Optimize images before uploading. Compress files to keep them under 200KB each. Use image optimization plugins or tools to reduce file size while maintaining quality.
Issue: Selected images don’t show visual feedback
Solution: This is typically a CSS styling issue. Check your theme’s CSS or add custom styles to highlight selected images with borders, shadows, or opacity changes.
Summary
Image Switcher fields provide a premium, visual shopping experience that makes product customization intuitive and engaging. They offer:
- Visual selection – Customers see and click images instead of reading text
- Flexible behavior – Single selection (radio) or multiple selections (checkbox) via “Allow Multiple” setting
- Image upload support – Upload PNG, JPEG, JPG, GIF images via AJAX
- Professional appearance – Creates modern, engaging product pages
- Flexible pricing – Fixed or percentage-based pricing for each image option
- Perfect for visual products – Ideal for colors, patterns, fabrics, styles, materials
- Premium features – Quantity options, conditional logic, and cart visibility controls
Use Image Switcher when visual representation is crucial for customer decision-making. It’s perfect for fashion, furniture, home decor, jewelry, and any product where seeing the option is more important than reading about it. The ability to toggle between single and multiple selection modes makes it versatile for both variant selection and add-on extras.
Need help setting up image switcher fields? Contact our support team