Flexa Extra – Product Options, Variation Swatches & Pricing for WooCommerce

Flexa Extra lets you attach extra option fields to WooCommerce products so shoppers can personalize what they buy and you can charge for it. Build an Option Set once, assign it to products (all, a hand-picked list, or by category/tag/price/stock conditions), and the fields appear on the product page with live price updates.

Every price is recomputed on the server from your saved field definitions when the product is added to the cart (a client-submitted price is never trusted), so the amount a shopper pays always matches what you configured.

📌 DEMO

Field types (free)

• Text and textarea, with email, URL, phone or custom-regex validation
• Number and range slider (min/max/step)
• Date picker, time picker, date & time picker, and colour picker
• Checkbox, radio, dropdown
• Colour/image swatches
• Button group
• Heading / description block
• Minimum and maximum number of choices on any multi-select field

Pricing

• Per-field or per-option surcharge
• Fixed amount, a percentage of the product price, or a safe arithmetic formula
• Formula prices use base, qty and other fields’ values with + - * / ( ) and round(), min(), max() (no eval), for per-unit and volume-tiered pricing
• Conditional fees and discounts applied to the item when selections match a rule

Inventory

• Optional stock limit per choice option: sold-out options are disabled, over-selling is blocked at add-to-cart, and paid orders draw the stock down (restored on cancel or refund)

Templates

• Start from a template: pick a ready-made starter (gift wrapping, engraving, size & colour, installation service, warranty plan, product add-ons) and it creates an option set, switched off, that you can edit before turning it on

Assignment & logic

• Target all products, a manual list, or conditions (category, tag, product, price, stock)
• Conditional logic to show/hide fields based on other selections
• Duplicate an option set, and import or export sets as a JSON file
• Live preview in the builder: see the option set render (and price) exactly as the storefront will, updating as you edit

Store insights

• Analytics screen ranking which options and choices sell, and the add-on revenue they bring, filterable by date range and order status

Variation swatches

• Turn WooCommerce variation attribute dropdowns into colour, image or button swatches on variable products, with its own admin screen to assign a colour or image to each attribute term (no extra plugin required)
• The native variation <select> stays in place (hidden) and remains the source of truth: clicking a swatch drives WooCommerce’s own variation logic, so price, stock and gallery image update exactly as before, unavailable combinations are dimmed, and keyboard selection works
• Size, shape, custom width/height, button font size, selected-ring and unavailable-strike colours, and an optional hover tooltip, all from the Style settings
• Show the selected value as an “Attribute: Value” line, render attributes with no swatch type as buttons, and show a loading spinner while the variation updates
• Choose how unavailable or out-of-stock swatches behave (dim and strike, hide, or show as normal), and optionally clear the choice by clicking the selected swatch again
• Limit how many swatches show per attribute with a “+N more” toggle, and show per-swatch stock (“N left” on low stock, “Out of stock” when a combination is sold out)
• Show swatches in the shop and category loop too: each links to the product with that option preselected
• Only applies to global attributes (pa_*) that have terms; custom product-level attributes have no term to attach a colour/image to. If a dedicated plugin like Woo Variation Swatches is active, Flexa Extra steps aside automatically to avoid double rendering

Product badges

• Show targeted badges on product thumbnails, in the shop and category loop and on the single product page: give each a label, background and text colour, a corner (top-left, top-right, bottom-left, bottom-right) and a priority
• Target the same way pricing rules do: all products, a manual list (searched with an async product/category/tag picker), or by brand, attribute or price range
• Dynamic targets that read live product state: on sale, new (published recently), featured, low stock and out of stock, each of which can be inverted
• Badges stack per corner in priority order, and the whole module has an on/off switch. It sits on the product image, separate from the pricing sale flash, so both can show at once

Headless & integrations

• Gutenberg “Flexa Extra Configurator” block to show an option set with live pricing on any page or post (display only, does not add to cart)
• Public read-only REST API for decoupled/headless storefronts: fetch a product’s option sets, prices, and logic to render the same configurator and subtotal elsewhere. Open by default, closable with a filter

Cart

• Edit a line’s options straight from the cart: the product page reopens with the
  saved selections filled in, and re-adding replaces the line instead of stacking a
  duplicate

Display & accessibility

• Position fields before or after the add-to-cart button
• Live “extra subtotal” and “total price” readouts
• Itemized price breakdown: each selected option and conditional fee/discount listed with its own price, updating live
• Swatch size/shape and button colour styling
• Accessible markup (fieldset/legend groups, aria-required, keyboard focus), responsive, and reduced-motion aware

Source code for compiled JavaScript and CSS

The admin app ships as a compiled bundle in assets/dist/admin/. The
human-readable TypeScript source and its build config live in the public
repository at https://github.com/flexatech/flexa-extra (under apps/admin/)
and are built with pnpm + Vite:

1. cd apps/admin
2. pnpm install
3. pnpm build (or pnpm dev for a watched dev build)

The storefront assets in assets/frontend/ are plain, unminified JS/CSS and need
no build step.

External services

Storefront and configuration data (option sets, prices, orders, stock) stays in your own WordPress database. The plugin connects to one external service, and only in the admin, for the reason below.

Deactivation feedback (Flexa Product Intelligence)

When you go to deactivate Flexa Extra on the Plugins screen, a short optional survey asks why. This is served by Flexa’s product intelligence service at https://product-intelligence.flexacommerce.com. It runs only on wp-admin/plugins.php, never on the front end, and it never blocks or delays deactivation: if the service is unreachable, the plugin still deactivates normally.

What is sent, and when:

• On opening the Plugins screen: a request to /api/v1/config (the product slug and tier) to load the survey configuration. The response is cached for 6 hours.
• When you deactivate or interact with the survey: the deactivation reason you pick and any optional message you type, sent to /api/v1/deactivations, /api/v1/events, /api/v1/feedback, /api/v1/feature-requests and /api/v1/recovery-events.

Every request includes an anonymous per-site identifier (a random UUID generated on your site), the plugin version and tier, and by default your WordPress version, PHP version and locale. No email address, site domain, user identity or raw IP is collected by the plugin. The environment details (WordPress/PHP/locale) can be turned off, and the whole survey can be disabled, with the filters below.

• Turn the survey off entirely: add_filter( 'flexa_extra/deactivation_survey/enabled', '__return_false' );
• Send only the anonymous identifier, version and tier (no WP/PHP/locale): add_filter( 'flexa_extra/deactivation_survey/config', function ( $c ) { $c['collect_environment'] = false; return $c; } );

Service terms and privacy policy: https://flexacommerce.com/pages/terms and https://flexacommerce.com/pages/privacy