Product cards
Show the sizes under each product in a grid.
Commerce / widget · Elementor module
Product Variation Option Directory Widget Plugin for Elementor
List every option a WooCommerce variable product comes in, such as Size: 250 ml, 500 ml, 1000 ml, as text or chips, marking sold-out options and linking each to the product.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Product configured variation optionsProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
See it
These are the actual published outputs of the widget for sample variable products in the lab shop; links point to a sample site.
02 / Inside WordPress
Product variation option directory controls in Elementor
Product chooses the current product or a selected variable product. Display sets the maximum attributes, text or chips, marking sold-out options with a label, linking options to the product and an optional icon. The Style tab covers typography, colours, background, border, radius, spacing, alignment, attribute name colour and weight, row spacing, option colour, chip background, border and radius, hover and sold-out colours, and the icon.
03 / Website use cases
Where to use product configured variation options
WooCommerce hides a product’s options inside dropdowns, so shoppers browsing a card or landing page cannot see which sizes or colours exist, or which are sold out. Product variation option directory lists every option per attribute, marks the sold-out ones and can link each option straight to the product with it chosen.
Landing pages
Let shoppers jump straight to the colour they want.
Stock at a glance
Show which sizes are sold out before shoppers open the product.
04 / Installation and setup
How to list a product’s options in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Product variation option directory in the Complementor library.
Add the widget to a product card, landing page or single product template.
In Product, choose Current product or a selected variable product.
Choose text or chips, and turn on Mark sold-out options and Link options if you like.
Style the attribute names and chips on the Style tab.
05 / Content and style controls
Customize product configured variation options in Elementor
Configure the settings available for this module to suit the page you are building.
One row per attribute used for variations, in the product’s order.
Options as text or chips.
Mark sold-out options, with a label read by screen readers.
Link each option to the product with it already chosen.
Attribute name colour and weight, option and chip colours.
Maximum number of attributes.
Editor notes when nothing would show.
06 / Choose the right approach
Product configured variation options and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Variation swatches plugins
Replace the dropdowns in the form; this widget lists options anywhere else.
Product attribute option count
Gives the number of options, such as 3 sizes, instead of listing them.
07 / Requirements and compatibility
Product configured variation options compatibility with Elementor
- Requires Elementor and WooCommerce.
- Variable products only.
- Shows public products only.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot product configured variation options
Check these settings if the published page behaves differently from the editor.
Why is an option marked sold out when one variation has stock?
It is marked only when no published, in-stock variation offers it; check that variation is published and has a price.
Why does a link not choose every option?
Each link chooses its own attribute; products with several attributes still need the others chosen.
Why does nothing show?
The product is not variable, or none of its attributes is used for variations.
Why are options in this order?
They follow the product’s own order, as in its dropdowns.
Product configured variation options plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Do backorders count as sold out?
No. Options that can be ordered on backorder are not marked.
Can screen readers tell which options are sold out?
Yes, through the sold-out label; leave it empty only if you mark them another way.
Does it change stock?
No. It only reads the product’s options and stock.
Does it work with simple products?
No. Only variable products have options to list.
10 / Annual All Access subscription
Get product configured variation options with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.