Radio Field
Create powerful single-selection fields for your WooCommerce products with WPActPro’s Radio Button Field option. Allow customers to choose one option from multiple predefined choices like sizes, service tiers, material types, or shipping methods directly on your product pages.
What is the Radio Button Field?
The Radio Button Field is an excellent choice when you want customers to make a single, clear selection from multiple predefined options. Each choice is always visible, allowing customers to quickly compare features, benefits, and pricing without opening dropdowns or checking multiple boxes. Radio buttons work well in situations where one selection must be mandatory, such as package tiers, service plans, or product upgrades.
Unlike standard WooCommerce product fields, Extra Product Options for WooCommerce’s Radio Button Field includes advanced features that give you complete control over customer selections:
- Single Selection: Ensures customers pick exactly one option from the list
- Clear Visual Choice: All options are visible at once for easy comparison
- Mutually Exclusive Options: Perfect when choices cannot be combined
- Flexible Pricing: Set fixed prices or percentage-based pricing for each option
- Simple & Clean: Easy-to-use interface without unnecessary complexity
- Better UX: More intuitive than dropdowns when options are limited (2-7 choices)
Whether you’re selling product variations, service tiers, package options, or any product that requires a single mandatory selection, the Radio Button Field provides everything you need to collect customer choices effectively.
How To Use
- Navigate to the Products – Extra Product Addons – Product Option – Addon Builder
- Add Section or Element
- Select “Radio” from the Element Popup
- Configure your settings including min/max values, step increment, and default value in Radiogroup Options Tab
- Set pricing rules if the number affects the product price
- Click On Done in the popup and click on Save
Why Use a Radio Button Field?
Radio button fields serve multiple purposes in e-commerce, making them essential for various business models:
- Single Selection: Ensures customers pick exactly one option from the list
- Clear Visual Choice: All options are visible at once for easy comparison
- Mutually Exclusive Options: Perfect when choices cannot be combined
- Flexible Pricing: Set fixed prices or percentage-based pricing for each option
- Simple & Clean: Easy-to-use interface without unnecessary complexity
- Better UX: More intuitive than dropdowns when options are limited (2-7 choices)
- Mobile-Friendly: Works well on all devices with touch-optimized radio interface
Common Use Cases:
Product Size Selection: Perfect for physical products where customers need to choose a size, capacity, or dimension. Each size can have its own price, allowing you to charge more for larger sizes or premium options.
Service Tier Selection: Ideal for service-based businesses where customers choose between different service levels, package tiers, or subscription plans. Each tier can be priced independently using fixed or percentage-based pricing.
Material or Quality Selection: Enable customers to choose between different materials, finishes, or quality levels. Perfect for furniture, jewelry, clothing, or any product where material choice affects pricing.
Shipping Speed Selection: Let customers choose their preferred shipping method with different pricing for each option. Express shipping can cost more, while standard shipping might be free.
Warranty or Protection Plans: Offer different warranty levels or protection plans with tiered pricing. Customers can see all options at once and make an informed decision.
Subscription Duration: Allow customers to choose between monthly, quarterly, annual, or lifetime subscription plans. Each duration can have its own pricing structure.
WPActPro makes it easy to build flexible product options and control how each field influences pricing, validation, and the final order. You can pair the Radio Field with other field types to create a complete customization experience.
- 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 Radio Buttons vs Other Fields
| Use Radio Buttons When | Use Dropdown When | Use Checkboxes When |
|---|---|---|
| 2-7 options available | 8+ options available | Multiple selections allowed |
| Options need visibility | Space is limited | Options can be combined |
| Visual comparison needed | Long option labels | Independent choices |
| Quick selection required | Hierarchical options | Add-on features |
When to Use the Radio Buttons Field
The Radio Button Field is perfect for these product types and scenarios:
Single-Choice Product Variations
Radio buttons are ideal when customers need to choose one option from multiple alternatives, and each choice affects pricing or product configuration.
- Product sizes (Small, Medium, Large, XL)
- Material choices (Cotton, Polyester, Silk)
- Service tiers (Basic, Premium, Enterprise)
- Shipping methods (Standard, Express, Overnight)
- Subscription durations (Monthly, Quarterly, Annual)
Tiered Pricing Models
When you offer products with different pricing tiers based on features, capacity, or service levels, radio buttons provide a clear way to present these options.
- Service packages with varying levels of support
- Product bundles with different component combinations
- Membership levels with different benefits
- License tiers with different feature sets
Size and Capacity Selection
For products that come in different sizes, capacities, or dimensions, radio buttons help customers choose the exact specification they need.
- Clothing sizes (XS, S, M, L, XL, XXL)
- Food portions (Small, Medium, Large, Family)
- Storage capacities (64GB, 128GB, 256GB, 512GB)
- Product dimensions or configurations
How to Set Up the Radio Buttons Field
Follow these comprehensive step-by-step instructions to add a Radio Field to your WooCommerce products. This guide covers all essential settings organized into General Settings, Label Settings, and Radiogroup 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 Radio 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 Radio Field
- In your Addon Builder, click “Add Element/Add Section -> ( + ) Add Element” button
- Select Radio 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 field is enabled or disabled on the frontend.
- How to use:
- Enabled (ON): The field will be displayed to customers on the product page
- Disabled (OFF): The field will be hidden from customers but remains in your configuration
- Best practices:
- Keep fields enabled during testing to see how they appear to customers
- Disable fields temporarily if you need to make changes without affecting live products
- Use this setting to A/B test different field configurations
- What it does
- Field Name:
- What it does:
- Sets the HTML name attribute for the radio button field. This is used for form submission and data processing.
- How to use:
- Enter a unique name for the field (e.g., `pizza_size`, `metal_type`, `shipping_method`)
- 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: `pizza_size`
- HTML Output: `<input type=”radio” name=”epofw_field_pizza_size[value]”>`
- Technical Details:
- Must be unique within the addon
- Only alphanumeric characters, underscores, and hyphens are recommended
- Used in form data processing and cart item meta
- What it does:
- Field ID:
- What it does:
- Sets the HTML id attribute for the radio button 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: `pizza_size`
- HTML Output: `<input type=”radio” id=”epofw_field_pizza_size_…”>`
- 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
- What it does:
- Field Class:
- What it does:
- Adds custom CSS classes to the Radio field for styling purposes.
- How to use:
- Enter one or more CSS classes separated by spaces
- These classes will be added to the
<select>element - Use classes that match your theme’s styling conventions
- Example:
- Field Class: `custom-radio premium-option`
- HTML Output: `<input type=”radio” class=”custom-radio premium-option” />`
- 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
- What it does:
- Required:
- The Required setting determines whether customers must fill out the Radio 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 an option 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 main label text displayed with the Radio field on the frontend.
- How to use:
- Enter descriptive text that clearly explains what the field is for
- Keep labels concise but informative
- Use language that matches your product descriptions
- Examples of Effective Titles:
- Label Title: “Select Your Size”
- Label Title: “Choose Metal Type”
- Label Title: “Pick Shipping Method”
- Best practices:
- Use action words like “Select”, “Choose”, or “Pick” to guide customers
- Make labels specific to avoid confusion
- Match the tone and style of your product descriptions
- What it does:
- 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
- What it does:
- Title Position (Premium)
- What it does:
- Controls where the label appears relative to the radio button 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
- What it does:
- 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
- What it does:
- Subtitle
- What it does:
- Adds additional descriptive text below the main label to provide more context.
- How to use:
- Enter helpful information that clarifies the field’s purpose
- Use subtitles to explain pricing, features, or important details
- Keep subtitles concise to avoid overwhelming customers
- Example:
- Subtitle: “Select one option that best fits your needs”
- Subtitle: “Each option includes different features and pricing”
- Subtitle: “The first option is selected by default”
- Best practices:
- Use subtitles to highlight value propositions
- Include pricing information when relevant
- Keep text short and scannable
- What it does:
- Subtitle Type (Premium)
- What it does:
- Determines the HTML element used for the subtitle (label, h1-h6, span, div, p).
- 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 “p” for most subtitles
- Match the subtitle type to your theme’s styling
- Ensure proper semantic HTML structure
- What it does:
- Subtitle Class
- What it does:
- Adds custom CSS classes to the subtitle for styling.
- How to use:
- Enter CSS classes separated by spaces
- Use classes that match your theme’s styling
- Test to ensure proper display
- What it does:
- Subtitle Color (Premium)
- What it does:
- Sets the text color of the subtitle.
- How to use:
- Choose a color that’s slightly muted compared to the main label
- Ensure readability while maintaining visual hierarchy
- Match your theme’s secondary text color
- What it does:
- Label Class
- What it does:
- Adds custom CSS classes to the entire label container.
- How to use:
- Enter CSS classes for styling the label wrapper
- Use classes that match your theme’s form styling
- Apply classes that affect both title and subtitle
- What it does:
- Enable Label Styling (Premium)
- What it does:
- Provides advanced typography and styling options for the label.
- 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
- How to use:
- Enable “Enable Label Styling” to access these options
- Configure typography settings to match your brand
- Use custom CSS for advanced styling needs
- Best practices:
- Maintain readability with appropriate font sizes
- Use consistent typography across all fields
- Test on different devices and screen sizes
- What it does:
Step 5: Configure Radiogroup Options
The Radio Button Field’s most important feature is its options configuration. Each radio option can have its own label and pricing, and customers can select only one option at a time.
Radiogroup Options
- Adding Options
- How to use:
- Click **“Add Option”** button in the Options Settings tab
- 2. Enter the option label (what customers will see)
- 3. Select the price type for this option
- 4. Enter the price value
- 5. Repeat for all options you want to offer
- Example Options Setup:
- Pizza Size Example:
- Option 1: Label: “Personal (8″)”, Price Type: Fixed, Price: $0.00
- Option 2: Label: “Medium (12″)”, Price Type: Fixed, Price: $4.00
- Option 3: Label: “Large (14″)”, Price Type: Fixed, Price: $7.00
- Material Upgrade Example:
- Option 1: Label: “Standard Cotton”, Price Type: Percentage, Price: 0%
- Option 2: Label: “Premium Cotton”, Price Type: Percentage, Price: 10%
- Option 3: Label: “Organic Cotton”, Price Type: Percentage, Price: 20%
- Pizza Size Example:
- How to use:
- Option Label
- What it does:
- The text displayed next to each radio button
- How to use:
- Enter clear, descriptive labels that customers will understand
- Include important information like pricing, features, or delivery times
- Keep labels concise to fit within the available space
- Best practices:
- Keep option labels concise
- Use consistent naming conventions
- Order options logically (by size, price, or popularity)
- Make labels descriptive enough to be understood without additional context
- Limit to 2-7 options for best user experience (use Select field for more options)
- Example Labels:
- Small
- Medium
- Large
- Premium Service
- Express Shipping
- What it does:
- Option Pricing
- What it does:
- Sets the price for each individual radio button option. Each option can have its own price type and value.
- Price Type Options:
- 1. Fixed Price:
- Set a fixed dollar amount for the option
- Example: $5.00, $10.00, $25.00
- Perfect for options with set prices
- 2. Percentage of Product Price:
- Set a percentage that’s calculated from the product’s base price
- Example: 10%, 20%, 50%
- Perfect for pricing that should scale with product value
- 1. Fixed Price:
- How to set pricing:
- Select the price type (Fixed or Percentage)
- Enter the price value
- For Fixed: Enter the dollar amount (e.g., 5.00 for $5.00)
- For Percentage: Enter the percentage number (e.g., 10 for 10%)
- Set $0.00 or 0% for free/default options
- Best practices:
- Use fixed pricing for options with unchanging prices
- Use percentage pricing when upgrade value should scale with product cost
- Set $0.00 for standard/default options
- Test pricing calculations to ensure accuracy
- Display prices clearly next to each option
- What it does:
- Reordering Options
- How to use:
- Drag and drop options using the move icon (⋮⋮) to reorder them
- Place most popular or recommended options at the top
- Organize options logically (e.g., cheapest to most expensive)
- Best practices:
- Put the most popular option first for better conversion
- Group similar options together
- Consider placing premium options last to encourage upsells
- How to use:
- Removing Options
- How to use:
- Click the remove button (×) next to any option to delete it
- Removed options are immediately deleted from the configuration
- Changes are saved when you save the addon
- Best practices:
- Review options before removing to avoid data loss
- Consider disabling options instead of removing if you might need them later
- Test the field after removing options to ensure proper functionality
- How to use:
Real-World Examples
Example 1: Pizza Size Selection
Scenario: A pizza shop wants customers to choose their pizza size.
Configuration:
- Field Type: Radio Button
- Field Label: “Select Your Size”
- Required: Yes
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Personal (8″) | Fixed | 0.00 |
| Medium (12″) | Fixed | 4.00 |
| Large (14″) | Fixed | 7.00 |
| Family (18″) | Fixed | 12.00 |
Customer Experience:
- Base pizza price: $15.00
- Customer selects “Large (14″)”
- Final price: $15.00 + $7.00 = $22.00
Scenario: A jewelry store offers rings in different metals with percentage-based pricing.
Configuration:
- Field Type: Radio Button
- Field Label: “Choose Metal Type”
- Required: Yes
Options Setup:
| Option Label | Percentage | On $500 Ring |
|---|---|---|
| Sterling Silver | 0% | 0.00 |
| 10K Gold | 50% | 250.00 |
| 14K Gold | 80% | 400.00 |
| 18K Gold | 120% | 600.00 |
| Platinum | 200% | 1,000.00 |
Customer Experience:
- Base ring price: $500.00
- Customer selects “14K Gold”
- Final price: $500.00 + $400.00 = $900.00
Example 2: Jewelry Metal Selection
Example 3: Print Quality Options
Scenario: A print shop offers different quality levels for photo prints.
Configuration:
- Field Type: Radio Button
- Field Label: “Print Quality”
- Required: Yes
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Standard Print | Fixed | 0.00 |
| Enhanced Print | Fixed | 5.00 |
| Professional Print | Fixed | 12.00 |
| Museum Grade Print | Fixed | 25.00 |
Customer Experience:
- Base print price: $20.00
- Customer selects “Professional”
- Final price: $20.00 + $12.00 = $32.00
What Your Customers See
When a customer interacts with your radio button field:
- All options are visible – Unlike dropdowns, customers see every choice immediately
- Clear selection indicator – The selected option shows a filled radio circle
- Price updates instantly – Product price changes as they select different options
- Only one selection allowed – Clicking a new option automatically deselects the previous one
- Required validation – If mandatory, customers must select an option before adding to cart
- Cart display – Their selection and any price adjustment appear in the cart
Frontend Display:
The Radio Field appears as a list of HTML `<input type=”radio”>` elements with:
- Radio buttons appear as circular buttons with labels
- Selected option shows a filled circle
- Unselected options show empty circles
- Prices are displayed next to each option (if enabled)
- Options are typically displayed vertically for easy scanning
Tips for Creating Effective Radio Button Fields
Creating an effective Radio Field involves balancing flexibility with control. Consider these best practices to ensure your Radio fields provide excellent user experience while collecting high-quality data.
- Option Configuration
- Clear Labels: Use descriptive, easy-to-understand option names that clearly communicate what each option includes
- Logical Ordering: Arrange options from least to most expensive, or most to least popular, to guide customer decisions
- Reasonable Pricing: Set prices that reflect the value of each option and are competitive in your market
- Consistent Formatting: Use consistent formatting across all options (e.g., always include pricing, always include delivery times)
- Limit Options: Keep to 2-7 options for best user experience (use Select field for more options)
- Label and Display
- Descriptive Titles: Use clear, action-oriented labels like “Select Your Size” or “Choose Metal Type”
- Helpful Subtitles: Add subtitles to explain pricing, features, or important details about each option
- Visual Hierarchy: Use title colors and styling to create clear visual hierarchy
- Mobile Optimization: Test labels on mobile devices to ensure they’re readable and not cut off
- Price Visibility: Always display prices next to each option when they differ
- Pricing Strategy
- Transparent Pricing: Make pricing clear and easy to understand
- Value Communication: Use labels and subtitles to communicate the value of each option
- Strategic Positioning: Place premium options strategically to encourage upsells
- Test Pricing: A/B test different pricing structures to find what works best
- Fixed vs Percentage: Use fixed pricing for set prices, percentage pricing when value should scale with product cost
- User Experience
- Required vs Optional: Only make fields required when the selection is critical
- Default Selection: The first option is automatically selected by default, which helps with required fields
- Error Messages: Provide clear, helpful error messages for required fields
- Loading States: Ensure price updates happen smoothly without jarring transitions
- Visual Feedback: Make selected options clearly distinguishable from unselected ones
- Performance
- Option Count: Keep options manageable (typically 2-7 options work best for radio buttons)
- Loading Speed: Radio buttons load quickly as they’re simple HTML elements
- Accessibility: Ensure proper labeling and keyboard navigation support
Advanced Features
- Enable Quantity
- What it does:
- Adds a quantity input field for the selected radio option, allowing customers to specify how many of the selected option they want.
- How to use:
- When enabled, a quantity field appears next to or below the selected radio option
- Customers can increase or decrease the quantity
- The price is multiplied by the quantity selected
- Perfect for options where customers might want multiple quantities
- Example:
- Radio option: “Premium Service” – $50.00
- Customer selects “Premium Service” and sets quantity to 3
- Total addon price: $50.00 × 3 = $150.00
- Best practices:
- Enable quantity for options that make sense to purchase in multiples
- Set minimum and maximum quantity limits when appropriate
- Display quantity clearly next to the selected option
- What it does:
- Product Quantity
- What it does:
- Links the addon quantity to the main product quantity, so the addon quantity automatically matches the product quantity.
- How to use:
- When enabled, the addon quantity automatically syncs with the product quantity
- If a customer changes the product quantity, the addon quantity updates automatically
- Perfect for addons that should match the product quantity (e.g., one addon per product)
- Example:
- Product quantity: 3
- Radio option: “Gift Wrapping” with Product Quantity enabled
- Addon quantity automatically becomes 3 (one wrapping per product)
- Best practices:
- Use when addon should always match product quantity
- Disable for addons that are independent of product quantity
- Test with different product quantities to ensure correct behavior
- What it does:
- Default Quantity
- What it does:
- Sets the initial quantity value for the selected radio option when the page loads.
- How to use:
- You set a default quantity value (e.g., 1, 2, 5)
- When a customer selects the radio option, the quantity field shows this default value
- Customers can still change the quantity if needed
- Example:
- Radio option: “Extended Warranty”
- Default quantity: 1
- When selected, quantity field shows 1 (customer can change if needed)
- Best practices:
- Set default quantity to 1 for most options
- Use higher defaults for options typically purchased in bulk
- Consider your customers’ typical purchase behavior
- What it does:
- Min/Max Quantity
- What it does:
- Controls the minimum and maximum quantity limits for the selected radio option.
- How to use:
- Set a minimum quantity (e.g., customers must select at least 2)
- Set a maximum quantity (e.g., customers can select up to 10)
- Validation prevents customers from entering quantities outside these limits
- Example:
- Radio option: “Bulk Discount Package”
- Min quantity: 5
- Max quantity: 50
- Customers must select between 5 and 50 units
- Best practices:
- Set reasonable min/max limits based on your business needs
- Clearly communicate quantity requirements to customers
- Test validation to ensure it works correctly
- What it does:
- Conditional Logic
- What it does:
- Shows or hides the radio button field based on other field selections or conditions.
- How to use:
- Set conditions that determine when the radio field appears
- Field can be shown or hidden based on other field values
- Supports complex conditional rules with multiple conditions
- Example:
- Condition: Show “Premium Service” radio field only if “Basic Package” is selected in another field
- When “Basic Package” is selected, the premium service options appear
- When other packages are selected, the premium service field is hidden
- Best practices:
- Use conditional logic to create dynamic, personalized experiences
- Test all condition combinations to ensure correct behavior
- Keep conditions simple and logical
- Provide clear feedback when fields appear/disappear
- What it does:
- WooCommerce Integration
- What it does:
- Integrates the Radio Button Field with WooCommerce features like cart, checkout, and order management.
- Features:
- Cart Display Control: You can hide addon details to keep the cart summary clean
- Price Visibility Control: It’s possible to show selected options without displaying their price
- Order Management Visibility: You can choose whether selected options appear in admin order records
- Addon Tax Settings: Apply tax calculations to addon prices
- Tax Rates: Select specific tax classes for addons
- Best practices:
- Ensure option labels are clear in order details
- Test email notifications to verify option display
- Use descriptive option names for better order management
- What it does:
Free vs Premium
Free Version Includes:
- Basic Radio Button Field: Create radio button fields with multiple options
- Fixed Pricing: Set fixed prices for each radio option
- Field Labeling: Customize field labels and positions
- Required/Optional: Make fields required or optional
- Basic Validation: Ensure customers select an option when required
Premium Version Adds:
- Percentage Pricing: Set percentage-based pricing for each option
- Quantity Support: Add quantity inputs for selected options
- Product Quantity Linking: Link addon quantity to product quantity
- Min/Max Quantity: Set quantity limits for options
- Conditional Logic: Show/hide fields based on other selections
- Cart Display Options: Control how addons appear in cart
- Advanced Styling: More customization options for field appearance
Troubleshooting
Customer can’t proceed without selecting
- Either set “Required” to No, or ensure a default option is selected
- The first option is automatically selected by default – this should satisfy required validation
- Check that the field is visible and not hidden by conditional logic
- Verify field status is enabled
Price not updating when option is selected
- Check that “Enable Price” is turned on in field settings
- Verify price values are entered correctly (numbers only, no currency symbols)
- Check browser console for JavaScript errors
- Test with a default WordPress theme to rule out theme conflicts
- Disable other plugins temporarily to check for conflicts
First option is always selected
- This is expected behavior and cannot be changed for radio buttons
- If you need no default selection, consider using a dropdown (select) field instead
- You can make the field optional (not required) so customers can proceed without changing the selection
Selected option doesn’t appear in cart
- Check “Hide in Cart” setting in field options – disable if you want to show addon details
- Verify cart display settings in WooCommerce
- Test with default theme to rule out theme conflicts
- Check order details in admin to see if data is being saved
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 Radio Button Field is an excellent choice when you want customers to make a single, clear selection from multiple predefined options. Each choice is always visible, allowing customers to quickly compare features, benefits, and pricing without opening dropdowns or checking multiple boxes. Radio buttons work well in situations where one selection must be mandatory, such as package tiers, service plans, or product upgrades.
The Radio Button Field helps improve decision-making clarity, reduces user errors, and ensures clean, accurate pricing logic on your WooCommerce product pages. Whether you’re selling products with size variations, service tiers, material choices, or subscription plans, radio buttons provide an intuitive and professional way to collect customer selections.
With support for fixed and percentage-based pricing, quantity options, conditional logic, and flexible cart display settings, the Radio Button Field gives you complete control over how customers interact with your product options.