<h1 style="text-align: center">Add Extra Product Options and Add-ons</h1>
<p>Product Options and Fields extension allows you to offer products with a variety of personalization options. You can choose from radio button, dropdown, multi-select and 13 other field types.</p>
<p>According a recent study, 80% of customers are willing to pay more when they’re offered product customization.  The standard WooCommerce variations does not cover unique business needs and this is where Product Option and Fields extension comes in.</p>
<p>Keep your product page clean by adding dependable product add-ons. You can also assign add-ons to specific user roles like B2B, wholesale and other customers to ensure that personalization options are displayed to relevant customers types only.</p>
<p>Add global or product specific add-ons and charge additional fee for each option. The extension offers 5 pricing types to dynamically price your product options. Below is the detailed feature list of this extension.</p>
<h2>Features</h2>
<ul>
<li>Add unlimited product add-ons</li>
<li>Add extra options at the product level (product edit sheet)</li>
<li>Supports variable products to add variation specific add-ons</li>
<li>Add product options using global rules (bulk-assign to multiple products)</li>
<li>Supports 16 types of fields (see the support fields list below)</li>
<li>Add dependent/conditional product add-ons</li>
<li>Restrict add-ons based on user roles</li>
<li>Enable and <strong>manage stock</strong> for specific product options (<strong>New</strong>)</li>
<li>Choose from five price options
<ul>
<li>Free</li>
<li>Flat-fixed fees</li>
<li>Flat-percentage fees</li>
<li>Fixed fees, based on quantity</li>
<li>Percentage fees based on quantity</li>
</ul>
</li>
<li>Add price per character for input-text and text-area field (<strong>New</strong>)</li>
<li>Custom sort product add-ons</li>
<li>Preselect default options for checkboxes, radio buttons, and dropdown fields (<strong>New</strong>)</li>
<li>Allow customers to select quantities for specific add-ons with full control over limits (<strong>New</strong>)</li>
<li>Make product options mandatory or optional</li>
<li>Add character limits for text areas and text-input fields</li>
<li>Customize options, fonts, colors, and other settings</li>
<li>Compatible with WooCommerce <strong>cart and checkout blocks</strong></li>
</ul>
<h2>Add product options using global rules</h2>
<p>With WooCommerce Product Options extension, you can add multiple global rules to create different sets of add-ons and assign them to specific products, categories, and user roles.</p>
<p><img class="alignnone size-full wp-image-18734001833890" src="https://woocommerce.com/wp-content/uploads/2023/04/Product-options-rules-list.png" alt="" width="980" height="420" /></p>
<p>While creating new global rules, you can customize the following options:</p>
<ul>
<li>Add multiple add-ons using different field types</li>
<li>Apply add-ons to specific products, categories, and user roles</li>
<li>Customize styling options</li>
</ul>
<p><img class="alignnone size-full wp-image-18734005548531" src="https://woocommerce.com/wp-content/uploads/2023/05/WooCommerce-Product-Options-Global-Rules.png" alt="" width="980" height="1828" /></p>
<h2><strong>Add options at the product level</strong></h2>
<p>Instead of creating global rules, the merchants can add product-specific add-ons from the product edit sheet. You can add new add-ons/options for both simple and variable products. The extension does support variable products – allowing you add variation specific add-ons. While adding new product options from product level, you can:</p>
<ul>
<li>Customize style settings</li>
<li>Add multiple add-ons</li>
<li>Choose to disable global add-ons for a specific product</li>
</ul>
<p><img class="alignnone size-full wp-image-18734005548563" src="https://woocommerce.com/wp-content/uploads/2023/05/Product-addons-on-product-level.png" alt="" width="980" height="1082" /></p>
<h2><strong>Add dependable add-ons</strong></h2>
<p>With this extension, you can make add-ons dependent on other add-ons or their specific options. The Product Options and Fields extension helps merchants keep their product pages uncluttered by only showing necessary fields.</p>
<p><img class="alignnone size-full" src="https://woocommerce.com/wp-content/uploads/2023/05/5-woocommerce-product-addons.gif" width="878" height="557" /></p>
<h2><strong>Choose from 5 pricing types:</strong></h2>
<p>You can keep the extra product options free or charge an additional fee for them. You can assign a price for the entire add-on or set different prices for each option. This WooCommerce Product Addons extension comes with five pricing types to cover unique pricing requirements.</p>
<ul>
<li>Free</li>
<li>Flat-fixed fees</li>
<li>Flat-percentage fees</li>
<li>Fixed fees, based on quantity</li>
<li>Percentage fees based on quantity</li>
<li>Price per character in case of text fields</li>
</ul>
<p>Flat fees apply one charge to an add-on option for any quantity. Quantity-based fees increase as quantity increases.</p>
<p><strong><img class="alignnone size-full wp-image-18734001833979" src="https://woocommerce.com/wp-content/uploads/2023/04/Pricing-models.png" alt="" width="980" height="281" /></strong></p>
<h2><strong>Supports 16 field types:</strong></h2>
<p>WooCommerce Product Options comes with 16 field types enabling you to add different types of product add-ons.</p>
<ul>
<li>Drop-down choice lists</li>
<li>Multi-select options</li>
<li>Checkboxes</li>
<li>Input text and text areas</li>
<li>File uploads</li>
<li>Numbers</li>
<li>Quantity</li>
<li>Radio buttons</li>
<li>Colors</li>
<li>Image switcher</li>
<li>Images</li>
<li>Date picker</li>
<li>Email</li>
<li>Password (secret input field)</li>
<li>Time picker</li>
<li>Telephone number</li>
</ul>
<h2><strong>Manage product options stock:</strong></h2>
<p>Easily manage stock levels for each product option with this extension. Keep full control of your product add-ons inventory by assigning individual stock quantities to each option. This ensures customers can only order available options, preventing overselling and eliminating orders for out-of-stock add-ons.</p>
<p><img class="alignnone size-full wp-image-18734005548529" src="https://woocommerce.com/wp-content/uploads/2023/05/Manage-Options-Stock.png" alt="" width="980" height="355" /></p>
<h2><strong>Control add-ons quantity:</strong></h2>
<p>Give your customers the flexibility to choose the quantity of each add-on while maintaining control over how much they can purchase. Set minimum and maximum quantity limits for any add-on, ensuring customers order within your defined range—perfect for managing special products options or limited-stock extras.</p>
<p><img class="alignnone size-full wp-image-18734005548527" src="https://woocommerce.com/wp-content/uploads/2023/05/Quantity-Selection.png" alt="" width="980" height="388" /></p>
<h2><strong>Restrict add-ons by user roles:</strong></h2>
<p>You can choose to restrict product options to specific user roles only. This enables you to offer additional options to B2B, VIP or any specific user types.</p>
<p><img class="alignnone size-full wp-image-18734005548543" src="https://woocommerce.com/wp-content/uploads/2023/05/Restrict-Product-Options-by-User-Roles.png" alt="" width="980" height="473" /></p>
<h2><strong>Customize fields label, colors, and layout</strong></h2>
<p>While creating new global rules or creating WooCommerce add-ons from product level, you can customize the following style settings:</p>
<ul>
<li>Display field titles as heading or text</li>
<li>Customize text and background colors</li>
<li>Add line separators between add-ons</li>
<li>Customize option title sizes and colors</li>
<li>Add borders around add-ons</li>
<li>Set field title positions</li>
<li>Customize description font sizes</li>
<li>Tooltip font sizes, backgrounds, and text colors</li>
</ul>
<h2><img class="alignnone size-full wp-image-18734001833985" style="font-family: sans-serif;font-size: 16px" src="https://woocommerce.com/wp-content/uploads/2023/04/WooCommerce-Product-Addon-styling.png" alt="" width="980" height="760" /></h2>
<h3>Requirements</h3>
<p>Minimum PHP version: 5.2</p>

Product Options and Addons

<p>Offer product personalization options by adding free or paid product add-ons. Supports multi-select, dropdown and 14 other dependable field types.</p>

<h2>Smart Variations & Attributes Display</h2>
<p><strong>Smart Variations & Attributes Display</strong> is built for WooCommerce store owners who want to give their variable products a premium look and feel. Instead of hiding product variations inside dropdowns, this plugin allows you to present each variation as its own product on the shop and category pages — perfect for color, size, or material-based items.</p>
<p>You can enable a <strong>dual display mode</strong>: let users toggle between a full product list view and a clean dropdown view, depending on how they prefer to shop. The <strong>Quick View popup</strong> makes it even easier—shoppers can browse and add items to the cart without leaving the current page.</p>
<p>Thanks to <strong>dynamic image switching</strong>, customers get a clear, visual confirmation of what they’re selecting. This not only makes your store more engaging but also reduces return rates. Whether you’re looking to improve discoverability, speed up checkout, or customize variation visibility at a granular level—this plugin offers the tools to do it.</p>
<h2>Smart Variations & Attributes Display Features</h2>
<h3>Display Variations as Products</h3>
<ul class="wccom-tick-list-primary">
<li>Show each variation (color, size, etc.) as a unique product on shop, category, and archive pages for better visibility and engagement.</li>
</ul>
<h3>Toggle Between Display Modes</h3>
<ul class="wccom-tick-list-primary">
<li>Let users switch between individual variation listings and dropdowns via a toggle switch—configurable globally or per product.</li>
</ul>
<h3>Quick View with Variation Selection</h3>
<ul class="wccom-tick-list-primary">
<li>Enable AJAX-powered quick view popups for selecting and purchasing variations directly from the shop page.</li>
</ul>
<h3>Dynamic Image & Gallery Update</h3>
<ul class="wccom-tick-list-primary">
<li>Automatically update product images and galleries based on the selected variation, with a reset to default when cleared.</li>
</ul>
<h3>Custom Variation Visibility Control</h3>
<ul class="wccom-tick-list-primary">
<li>Choose which variations appear on the shop, search, or category pages for maximum control.</li>
</ul>
<h3>AJAX Add to Cart Support</h3>
<ul class="wccom-tick-list-primary">
<li>Add items to cart instantly from the shop or quick view popup without reloading the page.</li>
</ul>
<h3>Show/Hide Parent Product Option</h3>
<ul class="wccom-tick-list-primary">
<li>Optionally hide the parent product when variations are shown individually to avoid duplication.</li>
</ul>
<h3>Support for Swatches</h3>
<ul class="wccom-tick-list-primary">
<li>Integrates with swatch plugins to show variations using color, image, or label-based swatches.</li>
</ul>
<h3>Per Product Configuration</h3>
<ul class="wccom-tick-list-primary">
<li>Configure variation display settings individually per product or globally across the catalog.</li>
</ul>
<h3>SEO-Friendly Variation URLs</h3>
<ul class="wccom-tick-list-primary">
<li>Each variation appears with its own product-style layout, improving search engine indexing and long-tail keyword performance.</li>
</ul>
<h3>Mobile Responsive & Lightweight</h3>
<ul class="wccom-tick-list-primary">
<li>Optimized design and scripts ensure smooth performance across all device sizes.</li>
</ul>
<h3>Compatible with Popular Builders</h3>
<ul class="wccom-tick-list-primary">
<li>Works seamlessly with Elementor, WPBakery, and other popular page builders.</li>
</ul>
<h2>What Customers See on the Frontend</h2>
<h3>Variation and Dropdown Modes</h3>
<p>The plugin offers two display modes: <strong>Variation Mode</strong> and <strong>Dropdown Mode</strong>. When set to Dropdown Mode, a toggle button appears allowing users to switch views. Variations are shown in a dropdown with real-time price updates.</p>
<p>When set to Variation Mode, each variation appears as a separate product on the shop, archive, and category pages with individual pricing and images.</p>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/07/variation-as-single-product.png?w=890" alt="Variation as Single Product" width="961" height="929" /></p>
<h3>Dropdown View of Smart Variations & Attributes Display for WooCommerce</h3>
<p>The dropdown view lets customers select a variation from a clean dropdown interface on the shop or archive page, with pricing updated on selection.</p>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/07/variation-as-dropdown-show.png?w=896" alt="Variation as Dropdown View" width="960" height="626" /></p>
<h3>Widget Switcher</h3>
<p>The plugin includes a variation mode switcher widget that lets users toggle between product list and dropdown views on the frontend—without refreshing or changing backend settings.</p>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/07/variation-as-display-widget-both.png?w=896" alt="Frontend Mode Switcher Widget" width="966" height="610" /></p>
<h3>Variation Dropdown Toggle</h3>
<p>A toggle button allows users to show or hide the variation dropdown for a cleaner browsing experience directly on the shop or archive page.</p>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/07/variation-as-dropdown.png?w=605" alt="Dropdown Toggle View" width="605" height="713" /></p>
<h2>General Settings – Smart Variations & Attributes Display</h2>
<p>In the general settings section, the admin can enable or disable the plugin and set the default display mode (Dropdown Mode by default). Additional options include:</p>
<ul>
<li><strong>Enable Plugin</strong> – Turn the plugin on or off.</li>
<li><strong>Set Plugin Mode</strong> – Choose Variation or Dropdown as the default display mode.</li>
<li><strong>Remove Quantity Input</strong> – Hide the quantity field on variation listings.</li>
<li><strong>Select Products to Apply</strong> – Apply settings to specific variable products.</li>
<li><strong>Display Parent Product in Variation Mode</strong> – Choose whether to show the parent product when variations are listed separately.</li>
<li><strong>Label Text Style</strong> – Customize label text for single variation display.</li>
<li><strong>Dropdown Placeholder</strong> – Set placeholder text for variation dropdowns on the shop page.</li>
<li><strong>Variation Dropdown Toggle</strong> – Enable or disable the dropdown toggle button.</li>
<li><strong>Hide Variation Button Text</strong> – Customize or hide the toggle button text.</li>
</ul>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/07/smart-varitioin-general-settings.png" alt="General Settings Panel" width="894" height="873" /></p>
<h2>Quick View and Widget Settings – Smart Variations & Attributes Display</h2>
<p>These settings allow you to control the quick view popup and variation mode switcher widget styling:</p>
<ul>
<li><strong>Enable Quick View</strong> – Activate the quick view popup on shop/archive pages.</li>
<li><strong>Quick View Width</strong> – Set the popup width in px or %.</li>
<li><strong>Quick View Text</strong> – Customize the button label for quick view.</li>
<li><strong>Quick View Button Text Color</strong></li>
<li><strong>Quick View Button Background Color</strong></li>
<li><strong>Mode Switcher Title</strong> – Title above the variation mode toggle.</li>
<li><strong>Single Variation Button Text</strong> – Text for the button showing single variation mode.</li>
<li><strong>Dropdown Button Text</strong> – Text for dropdown view mode.</li>
<li><strong>Mode Switcher Text Color</strong> – Text color for mode toggle buttons.</li>
<li><strong>Mode Switcher Background Color</strong> – Background color for mode toggle buttons.</li>
</ul>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/07/smart-variation-quick-view-and-widget.png?w=896" alt="Quick View and Widget Settings" width="896" height="1282" /></p>
<h2>Key Advantages of Smart Variations & Attributes Display</h2>
<ul>
<li><strong>Improved Product Visibility:</strong> Each variation can be indexed as an individual product.</li>
<li><strong>Enhanced User Experience:</strong> Interactive, flexible frontend controls.</li>
<li><strong>Faster Checkout:</strong> AJAX-based add-to-cart for quick purchases.</li>
<li><strong>Flexible Display Modes:</strong> Allow shoppers to toggle between dropdown and product list views.</li>
<li><strong>Customizable Styling:</strong> Match variation buttons and labels to your theme design.</li>
<li><strong>Reduced Returns:</strong> Real-time image and gallery switching provides clarity.</li>
<li><strong>Store Owner Control:</strong> Choose which products or variations display plugin features.</li>
<li><strong>SEO Optimized:</strong> Unique variation URLs improve search visibility and rankings.</li>
</ul>

Smart Variations & Attributes Display

<p data-start="252" data-end="606"><strong data-start="252" data-end="309">Smart Variations & Attributes Display for WooCommerce</strong> transforms your variable products into visually engaging, easy-to-navigate listings. Display each variation as a standalone product, use swatches instead of dropdowns, and offer quick view with dynamic image and gallery updates — all designed to boost conversions and enhance customer experience.</p>

Product Options and Addons vs Smart Variations & Attributes Display