Switch Field

What is the Switch Field?

The Switch Field is a modern toggle switch that allows customers to easily enable or disable options on your product pages with a simple click. It’s perfect for boolean choices, optional add-ons, or feature toggles where customers need a clear ON/OFF selection. The Switch Field provides a visually intuitive interface that makes it immediately obvious whether an option is enabled or disabled.

Unlike standard WooCommerce product fields, Extra Product Options for WooCommerce’s Switch Field includes advanced features that give you complete control over the toggle appearance and behavior:

  • Visual State Indication: Clear visual representation of enabled/disabled state
  • Space Efficient: Takes up minimal space while being highly visible
  • Customizable Appearance: Control colors, icons, layout, and animations (Premium)
  • Flexible Pricing: Support for fixed and percentage-based pricing
  • Real-Time Price Updates: Prices update automatically when the switch is toggled
  • Mobile-Friendly: Fully responsive and touch-optimized interface
  • Accessibility: Proper ARIA labels and keyboard navigation support

Whether you’re offering premium packaging, rush processing, warranty extensions, or any optional service that can be enabled or disabled, the Switch Field provides an elegant and professional way to present these choices to your customers.

How To Use

  • Navigate to the ProductsExtra Product AddonsProduct OptionAddon Builder
  • Add Section or Element
  • Select “Switch” from the Element Popup
  • Configure your settings including default state, icons, and colors in Switch Options Tab
  • Set pricing rules if the switch affects the product price
  • Click On Done in the popup and click on Save

Why Use a Switch Field?

Switch fields serve multiple purposes in e-commerce, making them essential for various business models:

  • Clear State Indication: Visual toggle makes it immediately obvious whether an option is enabled or disabled
  • Space Efficient: Takes up minimal space while being highly visible and accessible
  • Modern Interface: Provides a contemporary, professional appearance that customers expect
  • Simple Binary Choices: Perfect for yes/no, on/off, or enable/disable decisions
  • Quick Selection: Customers can toggle options with a single click or tap
  • Visual Feedback: Instant visual confirmation when options are enabled or disabled
  • Mobile-Friendly: Works excellently on all devices with touch-optimized controls

Common Use Cases:

Premium Packaging: Perfect for offering premium gift packaging options. Customers can easily toggle premium packaging on or off, with pricing applied only when enabled. The switch provides clear visual feedback about the selection state.

Rush Processing: Ideal for service-based businesses where customers can enable rush processing for faster delivery. The switch makes it easy to add or remove rush processing fees, with pricing clearly displayed.

Warranty Extensions: Enable customers to add extended warranty coverage with a simple toggle. The switch clearly shows whether warranty is included, and pricing updates automatically when toggled.

Service Upgrades: Let customers enable premium support, priority processing, or additional service components. Each upgrade can be toggled independently with its own pricing.

Feature Activation: Perfect for software or digital products where customers can enable additional features, API access, or premium modules. The switch provides a clean interface for feature selection.

Optional Add-Ons: Allow customers to add optional accessories, installation services, or customization options. The switch makes it easy to include or exclude these add-ons from the order.

WPActPro makes it easy to add intuitive ON/OFF choices that directly impact pricing, validation, and the final order. The Switch Field works seamlessly with all other field types, allowing you to create dynamic product setups, conditional logic flows, and highly personalized WooCommerce configurations.

  • For numeric input such as quantities or measurements, try our Number Field
  • When you want customers to choose a single option, use our Select Field
  • For situations where multiple selections are needed, the Multiselect Field is the best choice.
  • To offer simple yes/no or on/off choices, use our Checkbox Field
  • And when paragraph-style input is required, try our Textarea Field

When to Use the Switch Field

The Switch Field is perfect for these product types and scenarios:

Binary Choices (ON/OFF)

Switch fields are ideal when customers need to make a simple binary choice – enable or disable an option, with no middle ground or multiple selections.

  • Enable/disable premium packaging
  • Add/remove rush processing
  • Include/exclude warranty extension
  • Activate/deactivate premium features
  • Add/remove gift wrapping

Optional Services

When you want to offer optional services that customers can easily add or remove, switch fields provide the perfect interface.

  • Installation services
  • Setup assistance
  • Training sessions
  • Maintenance plans
  • Support packages

Feature Toggles

For products where customers can enable or disable specific features, switch fields provide clear visual indication of active features.

  • Premium features
  • API access
  • Custom branding
  • Advanced options
  • Additional modules

How to Set Up the Switch Field

Follow these comprehensive step-by-step instructions to add a Switch to your WooCommerce products. This guide covers all essential settings organized into General Settings, Label Settings, and Switch Options.

Step 1: Access the Field Builder

  • In your WordPress admin, go to WooCommerce > Products > Extra Product Addons
  • Click “Add Product Addon” or edit an existing addon

Addon Configuration:

  • Status:
    • Check the Status Switch to enable the addon
    • Unchecked addons are disabled and won’t appear on product pages
    • Enable this to make your fields active
  • Name:
    • Enter a name for your addon (e.g., “Software Features”)
    • This name helps you identify the addon in the admin area
    • It’s not visible to customers on the frontend
  • Additional Rules:
    • Configure which products should display this addon
    • Product: Select the condition type (Product, Category, Tag, etc.)
    • Is Equal To: Choose the comparison operator
    • Value: Select specific products, categories, or other criteria
    • Use “Select All” or “Clear All” for bulk selection
    • Click “and” to add multiple conditions
    • Example: Apply to “Product” “Is Equal To” “Silver Ring” to show only on that product
  • Display Position:
    • Select where the addon fields appear on the product page
    • Options include:
      • Before Add to Cart (most common)
      • After Add to Cart
    • Choose the position that works best with your theme layout

Product addons help you organize your extra product options and apply them consistently across your store. Think of them as containers that hold multiple fields for specific products or product types.

Step 2: Add the Switch Field

  1. In your Addon Builder, click “Add Element/Add Section -> ( + ) Add Element” button
  2. Select Switch from Select Element Type modal popup

Step 3: Configure General Settings

The General Settings tab contains basic field configuration options that control the field’s core functionality and behavior.

The field title is crucial because it’s the first thing customers see. Make it clear and specific to avoid confusion during checkout.

General Settings:

  • Field Status:
    • What it does
      • Controls whether the switch field is active and visible on the product page.
    • How to use:
      • Enabled (ON): The switch field will be displayed on the frontend
      • Disabled (OFF): The switch field will be hidden from customers
    • Best practices:
      • Keep fields enabled when they’re ready for use
      • Disable fields temporarily if you need to make changes without affecting live products
      • Test fields thoroughly before enabling them on live products
  • Field Name:
    • What it does:
      • Sets the HTML name attribute for the switch field. This is used for form submission and data processing.
    • How to use:
      • Enter a unique name for the field (e.g., `premium_packaging`, `rush_processing`, `warranty_extension`)
      • The name will be automatically prefixed with `epofw_field_` if not already present
      • Use descriptive names that indicate the field’s purpose
    • Example:
      • Field Name: premium_packaging
      • HTML Output: <input type="checkbox" name="epofw_field_premium_packaging[value][]">
    • Technical Details:
      • Must be unique within the addon
      • The `[]` in the name indicates it accepts array values
      • Used in form data processing and cart item meta
      • This name is used internally and won’t be visible to customers
  • Field ID:
    • What it does:
      • Sets the HTML id attribute for the switch field. Used for CSS styling and JavaScript targeting.
    • How to use:
      • Enter a unique ID for the field
      • The ID will be automatically prefixed with `epofw_field_` if not already present
      • Use descriptive IDs that match your naming conventions
    • Example:
      • Field ID: premium_packaging
      • HTML Output: <input type="checkbox" id="epofw_field_premium_packaging_..." />
    • Best practices:
      • Keep IDs consistent with field names for easier maintenance
      • Use kebab-case or snake_case for multi-word IDs
      • Ensure IDs are unique across all fields on the page
      • The Field ID appears in the HTML as: <input type="checkbox" id="your_field_id" name="...">. This allows you to target the field with CSS selectors like #your_field_id or JavaScript like document.getElementById('your_field_id').
  • Field Class:
    • What it does:
      • Adds custom CSS classes to the switch field for styling purposes.
    • How to use:
      • Enter one or more CSS classes separated by spaces
      • These classes will be added to the switch input element
      • Use classes that match your theme’s styling conventions
    • Example:
      • Field Class: custom-switch premium-addon
      • HTML Output: <input type="checkbox" class="custom-switch premium-addon" />
    • Best practices:
      • Use semantic class names that describe the field’s purpose or style
      • Follow your theme’s CSS naming conventions
      • Test classes to ensure they don’t conflict with existing styles
      • Classes can be shared across multiple fields for consistent styling
  • Required:
    • The Required setting determines whether customers must fill out the Switch field before they can add the product to their cart. When enabled, the field becomes mandatory and validation will prevent submission if the field is empty.
    • Field Options (Premium):
      • Text: Enter custom validation message that appears when the field is empty (e.g., “Please select a length to continue”)
      • Color For Required Text: Choose the color for the validation message (typically red or orange for errors)
      • Required Text Class: Add custom CSS classes to the validation message for additional styling
    • Only mark fields as required when the information is truly necessary for order fulfillment. Too many required fields can frustrate customers and reduce conversion rates.

Step 4: Configure Label Settings

The Label Settings tab controls how the field label (title and subtitle) appears to customers. These settings help you create clear, professional field labels that guide customers effectively.

Label Settings

  • Label Title:
    • What it does:
      • Sets the text that appears next to the switch field on the product page.
    • How to use:
      • Enter a clear, descriptive label (e.g., “Premium Gift Packaging”, “Rush Processing (24h)”)
      • Keep labels concise but informative
      • Use language that customers will understand
    • Best practices:
      • Use action-oriented language when appropriate
      • Include pricing information in the label if helpful
      • Make labels specific to avoid confusion
  • Title Type (Premium)
    • What it does:
      • Determines the HTML element used for the label title (label, h1-h6, span, div, p).
    • How to use:
      • Label: Standard label element (recommended for most cases)
      • Heading (h1-h6): Use for prominent labels that need heading semantics
      • Span/Div/P: Use for inline or block-level labels with custom styling
    • Best practices:
      • Use “label” for standard form fields (most common)
      • Use heading elements only if the label serves as a section heading
      • Consider SEO implications when choosing heading elements
  • Title Position (Premium)
    • What it does:
      • Controls where the label appears relative to the switch field.
    • How to use:
      • Left: Label appears to the left of the field (default)
      • Right: Label appears to the right of the field
      • Top: Label appears above the field
      • Bottom: Label appears below the field
    • Best practices:
      • Use “Top” for better mobile responsiveness
      • Use “Left” for compact desktop layouts
      • Test different positions to see what works best for your design
  • Title Color (Premium)
    • What it does:
      • Sets the text color of the label title.
    • How to use:
      • Choose a color that matches your theme’s typography
      • Ensure sufficient contrast for readability (WCAG AA compliance)
      • Use colors that guide attention without being distracting
    • Best practices:
      • Test color choices on different backgrounds
      • Consider dark mode compatibility if your theme supports it
      • Maintain consistency across all field labels
  • Subtitle
    • What it does:
      • The Subtitle field allows you to add additional descriptive text that appears below the main label title. This provides extra context, instructions, or examples.
    • How to use:
      • Enter helpful text that clarifies the switch’s purpose
      • Provide additional information or examples
      • Keep subtitles concise – typically one sentence
      • Only add subtitles when they provide value
    • Example:
      • “Add premium gift packaging for an additional $5”
      • Enable rush processing for 24-hour delivery”
      • “Includes 2-year extended warranty coverage”
  • Subtitle Type (Premium)
    • What it does:
      • Determines which HTML element is used to render the subtitle text.
    • How to use:
      • Label: Standard label element (recommended)
      • Heading (h1-h6): Rarely used for subtitles
      • Span/Div/P: Use for inline or block-level subtitles
    • Best practices:
      • Use “Label” or “Span” for subtitles to maintain proper semantic structure.
  • Subtitle Class
    • What it does:
      • Allows you to add custom CSS classes to the subtitle element for additional styling.
    • How to use:
      • Enter one or more CSS classes separated by spaces
      • Use classes that match your theme’s styling conventions
      • Test classes to ensure they don’t conflict with existing styles
    • Example:
      • Adding the class switch-subtitle allows you to style all switch subtitles consistently with CSS like .switch-subtitle { font-size: 0.9em; color: #666; }.
  • Subtitle Color (Premium)
    • What it does:
      • Customizes the text color of the subtitle to create visual hierarchy.
    • How to use:
      • Use the color picker to select a color
      • Enter hex codes for precise color matching
      • Choose a color that’s slightly muted compared to the title for hierarchy
  • Label Class
    • What it does:
      • Add custom CSS classes to the label container element for styling the entire label area.
    • How to use:
      • Enter one or more CSS classes separated by spaces
      • Use classes that match your theme’s styling conventions
      • These classes apply to the entire label container (title + subtitle)
    • Example:
      • Adding the class premium-option-label allows you to style the entire label area with CSS like .premium-option-label { margin-bottom: 15px; }.
  • Enable Label Styling (Premium)
    • What it does:
      • Activates advanced typography and styling options for the label, including font size, weight, family, text alignment, text transform, letter spacing, line height, text shadow, and custom CSS.
    • Available Options:
      • Font Size: Set the label text size in pixels
      • Font Weight: Control text boldness (100-900)
      • Font Family: Specify custom font families
      • Text Align: Control text alignment (left, center, right, justify)
      • Text Transform: Control text case (uppercase, lowercase, capitalize, none)
      • Letter Spacing: Adjust spacing between characters
      • Line Height: Control line spacing for multi-line labels
      • Text Shadow: Add text shadow effects
      • Custom CSS: Add advanced custom styles
    • Best practices:
      • Use font sizes that are readable on all devices
      • Maintain consistency across all switch field labels
      • Test typography changes to ensure they enhance readability
      • Use custom CSS sparingly for advanced styling needs

Step 5: Configure Switch Options

The Switch Field’s configuration includes range settings that define how customers can interact with the switch.

Switch Options

  • Default State
    • What it does:
      • Sets whether the switch is ON or OFF by default when the page loads.
    • How to use:
      • OFF (Default): Switch starts in the disabled state
      • ON: Switch starts in the enabled state
    • When to use ON by default:
      • When the option is commonly selected
      • When you want to highlight a recommended choice
      • When the option adds significant value
    • When to use OFF by default:
      • When the option is a premium add-on
      • When you want customers to actively choose the option
      • When the option adds cost to the product
    • Best practices:
      • Set premium options to OFF by default
      • Set commonly selected options to ON by default
      • Consider your business goals when setting defaults
  • Active State Icon (Premium)
    • What it does:
      • Displays a custom icon when the switch is in the ON or active state.
    • How to use:
      • Click the icon picker button to open the icon library
      • Browse and select an icon that represents the active state
      • Choose from Dashicons or upload custom icons
      • Preview the icon before saving
    • Icon suggestions:
      • Checkmark icons for enabled states
      • Plus icons for add-ons
      • Star icons for premium features
      • Custom icons that match your brand
    • Best practices:
      • Use icons that clearly represent the active state
      • Ensure icons are visible against the background color
      • Keep icon sizes consistent across all switches
      • Test icons on different screen sizes
  • Active State Background Color (Premium)
    • What it does:
      • Sets the background color of the switch when it’s in the ON or active state.
    • How to use:
      • Click the color picker to open the color selector
      • Choose a color that represents the active state
      • Use your brand colors or standard success colors (green)
      • Preview the color before saving
    • Color suggestions:
      • Green (#00ff00 or #28a745) for enabled/active states
      • Blue for premium features
      • Brand colors that match your website
      • Colors that provide good contrast with icons
    • Best practices:
      • Use colors that clearly indicate the active state
      • Ensure sufficient contrast for accessibility
      • Maintain consistency across all switches
      • Consider color psychology (green = go, red = stop)
  • Inactive State Icon (Premium)
    • What it does:
      • Displays a custom icon when the switch is in the OFF or inactive state.
    • How to use:
      • Click the icon picker button to open the icon library
      • Browse and select an icon that represents the inactive state
      • Choose from Dashicons or upload custom icons
      • Preview the icon before saving
    • Icon suggestions:
      • X or minus icons for disabled states
      • Blank or empty icons
      • Icons that contrast with the active state icon
    • Best practices:
      • Use icons that clearly represent the inactive state
      • Ensure icons are distinguishable from active state icons
      • Keep icon sizes consistent
      • Test icons on different screen sizes
  • Inactive State Background Color (Premium)
    • What it does:
      • Sets the background color of the switch when it’s in the OFF or inactive state.
    • How to use:
      • Click the color picker to open the color selector
      • Choose a neutral color for the inactive state
      • Use gray or muted colors that contrast with the active state
      • Preview the color before saving
    • Color suggestions:
      • Gray (#cccccc or #6c757d) for disabled/inactive states
      • Light colors that indicate the option is not selected
      • Colors that provide good contrast with the active state
    • Best practices:
      • Use neutral colors for inactive states
      • Ensure sufficient contrast for accessibility
      • Maintain consistency across all switches
      • Make inactive state clearly distinguishable from active state
  • Switch Design Style (Premium)
    • What it does:
      • Controls the visual design style of the switch toggle.
    • Available options:
      • Default (Rounded): Traditional rounded toggle switch with smooth edges
      • Square (Modern): Modern squared toggle switch with sharp edges
    • How to use:
      • Select “Default” for a traditional, familiar appearance
      • Select “Square” for a modern, geometric look
      • Choose based on your overall design aesthetic
    • Best practices:
      • Match the switch style to your website’s design theme
      • Use rounded switches for softer, friendlier designs
      • Use square switches for modern, minimalist designs
      • Maintain consistency across all switches on a product
  • Transition Animation (Premium)
    • What it does:
      • Controls the animation style when the switch transitions between ON and OFF states.
    • Available options:
      • None (Instant): Switch changes state immediately with no animation
      • Smooth (Professional): Gentle, smooth transition between states
      • Bounce (Playful): Playful bounce effect when switching
      • Elastic (Dynamic): Spring-like elastic animation effect
    • How to use:
      • Select “None” for instant state changes (fastest)
      • Select “Smooth” for professional, polished transitions
      • Select “Bounce” for playful, engaging interactions
      • Select “Elastic” for dynamic, attention-grabbing animations
    • Best practices:
      • Use “Smooth” for most professional applications
      • Use “Bounce” or “Elastic” sparingly for emphasis
      • Consider performance on mobile devices
      • Test animations to ensure they enhance rather than distract

Real-World Examples

Premium Packaging Toggle

An e-commerce store wants to offer premium gift packaging as an optional add-on.

Setup:

  • Switch Label: “Premium Gift Packaging”
  • Default State: OFF
  • Price Type: Fixed
  • Base Price: 5
  • Active State Icon: Gift box icon
  • Inactive State Icon: Standard box icon
  • Active State Color: Gold (#FFD700)
  • Inactive State Color: Gray (#CCCCCC)
  • Animation: Smooth

Result: Customers can toggle premium packaging on or off. When enabled, $5 is added to the order total. The switch clearly shows the enabled/disabled state with custom icons and colors.


A service business wants to offer rush processing for faster delivery.

Setup:

  • Switch Label: “Rush Processing (24h)”
  • Default State: OFF
  • Price Type: Percentage
  • Base Price: 25
  • Active State Icon: Clock icon
  • Inactive State Icon: Calendar icon
  • Active State Color: Red (#FF0000)
  • Inactive State Color: Gray (#CCCCCC)
  • Animation: None

Result: Customers can enable rush processing for a 25% premium. For a $100 service, rush processing adds $25. For a $200 service, it adds $50. The red color and clock icon emphasize urgency.

Rush Processing Option


Warranty Extension

An electronics store wants to offer extended warranty coverage.

Configuration:

  • Switch Label: “Extended Warranty (2 Years)”
  • Default State: OFF
  • Price Type: Percentage
  • Base Price: 15
  • Active State Icon: Shield icon
  • Inactive State Icon: Blank icon
  • Active State Color: Blue (#0000FF)
  • Inactive State Color: Gray (#CCCCCC)
  • Animation: Smooth

Result: Customers can add 2-year extended warranty for 15% of the product price. For a $500 product, warranty adds $75. The blue color and shield icon convey protection and security.


What Your Customers See

When customers visit your product page, they’ll see:

  1. Switch Toggle: A modern toggle switch next to the field label
  2. Visual State: Clear indication of whether the switch is ON (enabled) or OFF (disabled)
  3. Custom Icons: Icons that represent the active and inactive states (Premium)
  4. Color Coding: Background colors that indicate the switch state (Premium)
  5. Price Display: The price that will be added when the switch is enabled
  6. Real-Time Updates: The order total updates automatically when the switch is toggled

Frontend Display:

The Switch Field appears with:

  • Customers can easily toggle options on or off with a single click
  • The switch provides immediate visual feedback
  • Pricing is transparent and updates in real-time
  • The interface is intuitive and requires no explanation

Tips for Creating Effective Switch Fields

Creating an effective Switch Field involves balancing flexibility with control. Consider these best practices to ensure your Switch fields provide excellent user experience while collecting high-quality data.

  • Clear Labels
    • Use descriptive labels that clearly indicate what the switch controls
    • Include pricing information in the label when helpful
    • Keep labels concise but informative
    • Use action-oriented language when appropriate
  • Default States
    • Set sensible defaults based on common customer choices
    • Consider making premium features OFF by default
    • Set commonly selected options to ON by default
    • Test different defaults to optimize conversions
  • Color Psychology
    • Use green for positive/enabled states (standard convention)
    • Use red for premium/urgent options (attention-grabbing)
    • Use blue for premium features (trust and value)
    • Maintain brand color consistency across all switches
    • Ensure sufficient contrast for accessibility
  • Performance
    • Keep animations subtle and quick
    • Use appropriate icon sizes
    • If using images, maintain consistent sizes
    • Test on mobile devices for optimal performance

Advanced Features

  • Custom Icons
    • Choose from extensive Dashicons library
    • Upload custom icons for brand consistency
    • Set different icons for active and inactive states
    • Preview icons before saving
  • Color Customization
    • Set custom colors for active and inactive states
    • Use brand colors for consistency
    • Ensure accessibility with proper contrast
    • Preview colors before saving
  • Layout Options
    • Choose between rounded and square switch designs
    • Match switch style to your website theme
    • Maintain consistency across all switches
  • Animation Effects
    • Select from multiple animation styles
    • Create engaging user interactions
    • Balance visual appeal with performance
    • Test animations on different devices

Free vs Premium

Free Version Includes:

  • Basic switch toggle functionality
  • Default state (ON/OFF) configuration
  • Fixed and percentage pricing
  • Real-time price updates

Premium Version Adds:

  • Custom icons for active and inactive states
  • Custom background colors for both states
  • Switch design style options (rounded/square)
  • Transition animation effects
  • Enhanced visual customization
  • Brand consistency options
  • Advanced label styling (Typography, Colors, Custom CSS)
  • Title Position control
  • Title and Subtitle Type selection
  • Conditional Logic integration
  • Enhanced WooCommerce integration

Troubleshooting

Switch Not Displaying

  • Verify “Field Status” is enabled in General Settings
  • Check that the field is saved correctly
  • Clear browser cache and refresh the page
  • Verify the product has the addon assigned
  • Check for JavaScript errors in browser console

Pricing Not Calculating

  • Verify “Enable Pricing” is enabled in Pricing Settings
  • Check that price values are entered correctly (numbers only)
  • Ensure price types are selected correctly
  • Test with different price types to isolate the issue
  • Check for JavaScript errors in browser console

Icons Not Displaying

  • Verify icons are selected in Switch Options
  • Check icon class names are correct
  • Ensure icon library is loading correctly
  • Test with default Dashicons first
  • Clear browser cache

Colors Not Applying

  • Verify colors are set in Switch Options
  • Check color format is correct (hex codes)
  • Ensure CSS is loading correctly
  • Test with default colors first
  • Clear browser cache

Frequently Asked Questions

Find answers to commonly asked questions about our products and services.

Still have a question?

If you have any other queries, feel free to reach out to us. Our knowledgeable team is here to help!

Conclusion

The Switch Field is perfect for creating clean, intuitive ON/OFF toggles for optional services, add-ons, or upgrades. Its customizable colors, icons, and animation styles help you design a modern and visually appealing experience. Because it supports fixed and percentage-based pricing, it works for a wide range of business needs—from rush processing to premium packaging and feature activation.

With Extra Product Options for WooCommerce, creating dynamic, flexible, and professional toggle-based product customizations becomes effortless. The Switch Field provides the perfect balance of simplicity and functionality, making it easy for customers to add optional features while maintaining a clean, professional interface.