Configurator for Product Packages by Forge12 Interactive GmbH

Changelog

1.13.1

• Tested with WordPress 7.1 and PHP 8.5.
• Fix: PHP 8.4 and newer logged a deprecation notice for an implicitly nullable parameter. The plugin worked, but sites with debug logging enabled saw the notice on every request.

1.13.0

• New: A finished step folds away. Once a step is full, its grid collapses to a single line showing what was chosen, with a “Choose another” button. Reopening it stays open until the limit falls again, so it never closes under the customer’s hands while they work in the next step.
• New: Removing several of the same item takes one step instead of many. Clicking the cross on a slot that holds more than one opens a small window with a quantity control and a “Remove all” button. Whether it appears from two pieces on or every time is a setting on the slots element.
• New: The comparison reads like a price comparison: one row per option with image, name, benefit line, facts and the price on the right. It was a table before, which on a phone meant scrolling sideways to see the third option. That is gone, along with the scroll frame and the pinned first column. Bars behind numeric values keep them comparable at a glance — but only where the values really are numbers in the same unit and actually differ.
• New: The comparison is now something you can act on. Clicking a row switches your choice — after asking, and telling you what the price difference is. Clicking your own choice does nothing.
• New: Switching inside the product grid. If a step is full, clicking a different card used to be refused with “maximum reached”; the customer had to work out that they must deselect first. It now asks whether to switch and then does it. Only when it is unambiguous what would be replaced — with several items chosen, only the customer can decide which one goes.
• New: A container that is too small says so, with the number. Choosing a 16-piece box while 19 pralines are selected reads “This box holds 16. You have chosen 19 — remove 3 first.” Nothing is silently discarded: which three go is the customer’s decision.
• New: Rows and columns in the content area. Until now every configurator page was one column — you can now place text beside an image, or a step beside a summary. Existing designs are migrated automatically the first time you open them; nothing is lost.
• New: Blocks can sit inside a step, for example a note above the product grid. The position is named (“above the product grid”) and stays correct even if you reorder the parts of a step.
• New: Step navigation with back/next buttons. The guard that stops customers from skipping an incomplete step can be switched off if your configurator does not need it.
• New: Callout box, progress indicator and a button/link element.
• New: Product cards can show a benefit line from your WooCommerce short description or an attribute, and a factual stock line. Both are off by default.
• New: Elements of the fixed bar (price, counter, buttons) can now also be placed in a column of the content area.
• Improvement: The summary of a folded step counts pieces, not kinds, and names the quantity: “2 × Natural soap” instead of “Natural soap”, “16 pieces · 5 kinds” instead of “5 products chosen”. The bar beside it counted pieces all along, so the two no longer contradict each other.
• Improvement: The comparison marks your current choice more clearly. Previously its border was 40% against 34% for mere hover, so the row under the mouse looked almost as selected as the actual choice.
• Improvement: The product search folds away with its step. The field stayed usable while the grid below it was collapsed, so typing filtered something invisible. A field that is not there cannot filter into nothing; the way back is the “Choose another” button.
• Improvement: Templates describe their own layout, so loading one no longer just recolours what is already there.
• Improvement: The word before a step title (“Step 1: “) can be switched off. Previously the front end always added it while the editor did not, so numbered step labels showed their number twice.
• Fix: The remove cross on a slot was cut off at the top. It sat outside the slot, and the container above it clips. It now sits inside, which also makes it a 26px touch target instead of 20 (WCAG 2.5.8 asks for 24).
• Fix: The remove cross was invisible on phones and tablets. It only appeared on hover, and there is no hover without a pointer. It now stays visible as a small badge in the corner — a full red overlay on every slot would have hidden exactly the images the customer reads their progress from.
• Fix: Deselecting a container left its contents behind. Removing the box while pralines were in it produced a box filling without a box. It now asks first, and the pralines stay — removing them too would be tidier in state but would throw away the customer’s work when they only wanted a different box.
• Fix: 23 issues, several of them places where the editor preview and the front end had drifted apart — found by a new parity test that measures both sides against each other instead of describing them.
• Fix: “No products found” was always German. The sentence the product search shows when nothing matches was written into the code rather than translated, so an English shop got a German line. It now comes from your site’s language — and from the texts panel, where “No products found” could be set all along without any effect.
• Fix: On a phone, tapping “+” on a product could change the quantity of the product next to it. The grid always kept the number of columns you set — three cards on a 390px screen leave 105px each, and the quantity control needs more than that, so its buttons spilled over the card edge and the neighbour’s “−” came to rest on top of the “+”. Grids that show a quantity control now break to fewer columns when the cards would get too narrow: two per row on a 390px phone, one on a 375px one, and never more than you set. Grids without a quantity control are untouched. The buttons stay at 44px throughout — the control got tighter by giving up padding and number-field width, not touch target.
• Fix: The spacing inside the quantity control could not be adjusted for small screens, because the default was written onto every card as an inline style even when nothing had been set. It now comes from the stylesheet unless you actually choose a value.
• Fix: Two colour settings did nothing. “Progress bar background” and “Summary background” could be set and saved, but no rule read them: the element the summary colour belonged to was removed with the old bar, and the progress track had moved on to a tint of its own. Both now reach what their label promises. Nothing changes unless you set a colour — the fields no longer claim a default they do not have, and a test now fails if any setting on that page stops being read.
• Fix: The design editor’s phone preview drew a smaller quantity control than a phone shows. The plus and minus buttons are 44px on narrow screens and 32px on a desktop; the preview drew 32px at every width, so the phone view in the editor showed a control that no phone displays. It now follows the width of the preview instead of the width of the editor window. The desktop preview is exempt: its width is whatever space is left beside the panels, not the width of a desktop screen.
• Fix: Saving a design wrote spacing values into it that nobody had chosen. Those values then travelled to the front end as an inline style and overruled the stylesheet — including the rule that tightens the quantity control on phones. Only values you actually set are stored now.
• New: A new configurator now opens with a design instead of a blank one. The “Assortment” template — few items, large images, quantity controls and a short benefit line on each card — is loaded the first time you open the design editor for a configurator that has none. It is loaded, not saved: the save button lights up and you decide. A configurator that already has a design is never touched.
• Improvement: The product card out of the box. The two mouse hints no longer sit on top of every card, the image area has a fixed 4:3 ratio instead of letting the image decide how tall a card gets (it took four fifths of the card), and the price is now larger and bolder than the product name — it is the number people decide by. Set –f12-configurator-thumb-ratio if your photos want a different ratio.
• Fix: A selected product looked like an unselected one. The check mark in the corner only appeared when a template supplied an accent colour, so in a fresh install nothing marked the card you had chosen. It now gets an accent border, a second ring and a light tint — a template still overrides all of it.
• Note: Nothing here uses countdown timers, scarcity counters or invented crossed-out prices. Where an element states a fact, it reads that fact from WooCommerce — and where there is no data, it shows nothing at all.

1.12.0

• New: Seven templates that are genuinely different, not one layout in six colours. They differ in grid density (6, 4, 3, 2 and 1 columns), card style, whether search and filters are shown, how the steps are separated, and how the bar is built.
• New: “Praline box” template — pick the box, fill it praline by praline, finish with extras. The only template with quantity controls, because you cannot fill a box of twelve by choosing twelve different kinds. Its bar counts pieces instead of showing slots.
• New: The template list now previews each layout instead of showing a coloured “Aa”, so you can see the difference before loading.
• Fix: Templates whose bar uses two columns loaded with an empty bar — price, buttons and progress were missing. Affected four of the previous templates.
• Fix: Headings inside a text block ignored the colour you set, because WordPress and most themes colour headings themselves. On a dark background a heading was invisible. Your setting now wins, in the editor and on your site.

1.11.0

• New: Templates now deliver a complete starting layout instead of just colours — a headline and a short explanation above the steps, and a place for your delivery and returns information below them. Previously a template only recoloured what was already there.
• New: Loading a template into a configurator that has no steps yet creates three example steps (one required, two optional) so you can see the structure and replace it with your own products. Configurators that already have steps are never touched.
• Note: Templates style your configurator, they do not configure it. Your existing steps, products and limits stay exactly as they are.
• Note: The added texts are starting points meant to be edited. Deliberately absent are claims the plugin cannot verify — no “free shipping”, no scarcity counters and no invented ratings.

1.10.1

• Fix: Loading a design template emptied the fixed bar — price, buttons and step badges disappeared and left an empty row behind. This affected every template. Templates now load complete.
• Improvement: The template library now says so when a configurator has no steps yet. Without steps a template can only style the fixed bar, which previously looked like nothing had happened.

1.10.0

• New: Design templates are back in the editor sidebar. Six ready-made looks apply with one click — and they now set real layouts (columns, card style, spacing), not just colours. Everything stays fully editable afterwards.
• New: Completing a configuration is now confirmed visually in the bar, so the moment your customer finishes their work is actually visible.
• New: If a product is on sale in WooCommerce, the bar shows the regular price alongside the total and what the customer saves. The comparison uses your real WooCommerce regular price — it is never shown when there is nothing to compare, and there is no field to enter a comparison price by hand.
• New: Optional steps (minimum 0) are now marked as already met instead of showing “0 of 3”, so the path no longer looks longer than it is.
• New: The “Premium Gold” and “Warm Terracotta” templates can highlight a recommended option — this marks products you have actually marked as featured in WooCommerce.
• Note: All data formats are unchanged — existing configurators keep working without any migration.

1.9.1

• Fix: Collapsing the inspector panel in the design editor crashed the editor (blank screen). The panel now collapses and expands reliably.
• Fix: The design editor now fills the browser window, and the left sidebar, canvas and inspector each scroll on their own — settings at the bottom of a panel are reachable without scrolling the whole page.
• Fix: The floating element toolbar on the canvas could slide behind the inspector panel and get cut off. It now stays inside the canvas and on top.
• Fix: The editor’s breadcrumb bar could swallow clicks on the toolbar buttons underneath it.

1.9.0

• New: Element states — style hover, focus, active and disabled separately for text, images, the fixed-bar buttons, product cards and the quantity controls. One segmented switch in the inspector; empty fields simply inherit the normal state.
• New: Accessible focus indicator. Keyboard focus now follows your configured colours instead of a fixed gold ring, is visible on every focusable element, and can be adjusted (colour, width, offset) in the new “Accessibility” section — available in the free version.
• New: Motion controls — set animation speed and easing for the whole configurator, or switch animations off. Visitors who ask their system to reduce motion never see animations, regardless of this setting.
• New: Responsive visibility for content blocks — hide text, images, spacers and dividers per screen size, the same way the fixed-bar blocks already could.
• New: Modal styling gained border, shadow and title typography controls, using the same panels as the rest of the editor.
• Fix: Border settings offered by the canvas toolbar for text blocks had no effect — the block now supports border colour, width, style and radius end to end.
• Fix: The product “add” button had no accessible name for screen readers and carried a hard-coded German tooltip; both now come from the editable texts with a translatable fallback.
• Fix: The quantity field lost its focus indicator, leaving keyboard users without a visible focus.
• Fix: Group labels in the fixed bar were forced to uppercase with no way to turn it off.
• Fix: The admin app could render a blank page when the addon list came back incomplete.
• Security: CSS values from the design editor are now validated, so they can no longer inject additional style declarations into the frontend.
• Note: All data formats are unchanged — existing configurators keep working without any migration.

1.8.0

• New: Visual on-canvas editing in the design editor — drag padding, margin, size and column widths directly on the block (like Webflow), with live value tooltips. Turn on “Show spacing” to see and drag padding/margin; resize and column dividers appear on selection.
• New: Redesigned block settings — collapsible sections with a search field and “changed” indicators, a four-side spacing control (top/right/bottom/left in one place), unit steppers (px/em/rem/%), and one-line border controls.
• Improvement: Every on-canvas handle is keyboard-operable (Tab to focus, arrow keys to adjust; Shift for larger steps) and screen-reader labelled.
• Improvement: A single Undo reverts a whole drag gesture; adjustments made on the canvas and in the settings panel always stay in sync (one source of truth).
• Improvement: Harmonized the responsive breakpoints so tablet/mobile styles match the editor preview (iPad portrait now uses the tablet layout consistently).
• Note: All data formats are unchanged — existing configurators keep working without any migration.

1.7.0

• New: Complete admin redesign — one modern React app (“Configurators” menu) replaces all previous admin screens: dashboard with live metrics, configurator list & editor (steps, settings, logo), visual design editor, logs browser, addons & license management.
• New: Addon system with marketplace page — Pro features ship as separate addon plugins, unlocked by a single Pro bundle license with one-click installation and automatic updates.
• New: Configurator settings (sidebar visibility, total price display, logo) are editable again — the previous admin removed access to these options.
• New: Addons can extend the admin app with their own pages via a mount-point system (e.g. the Configurator Analytics report).
• New: Full German translations (informal and formal) for the entire admin app.
• Improvement: All legacy admin URLs (bookmarks, links) redirect to the matching page in the new admin app.
• Improvement: Existing Pro customers are migrated automatically — the previous license key is detected and the new addon plugins can be installed in one click.
• Note for developers: the internal f12_configurator/ui/* filters of the removed PHP admin framework no longer exist. All data formats (steps, settings, designs) are unchanged — existing configurators keep working without any migration.

1.6.0

• New: Request logging system — each configurator add-to-cart and checkout validation is logged to a separate JSON file, capturing the full POST body, IP, User-Agent, Cloudflare headers, and all validation results.
• New: Logs admin page (Configurator > Logs) with enable/disable toggle, file list with status indicators, detail view with color-coded timeline, search, and delete functionality.
• Hardening: enable_from_previous validation now blocks the request when the previous step’s product has no min/max values configured (previously accepted 0 products silently).
• Hardening: Checkout validator now blocks checkout when the previous step product is missing from the cart (session loss scenario).
• Hardening: Added woocommerce_before_checkout_process hook as additional pre-checkout validation safety net for payment gateways (Stripe, PayPal, Klarna) that may bypass standard checkout hooks.
• Hardening: Added post-order validation via woocommerce_checkout_order_created, woocommerce_checkout_order_processed, and woocommerce_store_api_checkout_order_processed — if an order is created with a configurator package missing its children, the order is set to “on-hold” with an admin note.
• Hardening: WooCommerce Blocks REST API checkout (/wc/store/v1/checkout) is now explicitly covered by post-order validation.
• Improvement: Admin users see detailed technical error messages (product ID, step name), regular customers see a generic German error message.

1.5.11

• Security Fix: Backend validation for min/max product quantities was completely bypassed for configurators saved via the Design Editor due to a type mismatch (boolean vs. string comparison). This allowed customers to submit incomplete configurations (e.g. 0 of 16 required pralines) to the cart and complete checkout.
• Hardening: Frontend now re-validates all step constraints before sending the add-to-cart request, catching cases where the checkout button disabled state was bypassed (e.g. by browser extensions).
• Hardening: Added StepConfig value object for type-safe step flag resolution — eliminates the entire class of boolean vs. string comparison bugs.
• Hardening: REST API step save now verifies flag roundtrip integrity — detects normalization bugs immediately during development.
• Hardening: Added static analysis check (composer check:flags) that prevents reintroduction of unsafe === 'on' patterns on step flags.
• Hardening: Added integration test (dev/test-validation.php) that reproduces the exact bug scenario with boolean-stored step flags.

1.5.9

• Fix: Backend validation no longer skips min/max product checks when “enable_from_previous” is active but “enable_min_max” is off — this caused orders with incomplete configurations (e.g. 0 of 20 required pralines) to be accepted.
• Fix: Missing steps in the submitted product data are now detected and validated instead of silently ignored.
• Fix: Submitted products are now verified against WooCommerce (existence and purchasable status) before being added to the cart.
• Fix: Extra steps not defined in the configurator configuration are now rejected.
• Fix: Cart checkout validator now correctly resolves “enable_from_previous” min/max values from the actual previous step product instead of relying on fragile package product tracking.

1.5.8

• New: Confirmation modal when clicking the “Edit” button in the cart, informing the customer that the product will be removed until the configurator is completed again.
• New: Cart edit now restores the previously selected products into the configurator, so customers can continue where they left off.
• New: “Cart Edit” modal added to the Design Editor Modals tab — fully customizable styling (container, title, message, buttons) with responsive breakpoint support.
• New: Cart edit modal texts (title, message, confirm/cancel buttons) are editable in the Design Editor Texts tab under the new “Cart Edit” category.
• Fix: Cart edit step mapping corrected — child products are now assigned to the correct configurator step in the edit URL data.

1.5.7

• Fix: Removing configurator products from the WooCommerce cart no longer causes a fatal memory exhaustion error (infinite recursion in cart item removal hooks).
• Fix: Cart item removal now correctly reads package data from removed_cart_contents instead of the active cart (item is already unset when the hook fires).
• Fix: WooCommerce Block Cart batch requests now correctly parse the request body (body field instead of data).
• Fix: Removing configurator items via the Block Cart Store API is no longer blocked by the quantity-change validator.
• New: Double-click protection on the checkout confirm button prevents duplicate cart submissions.
• New: Double-click protection on step navigation buttons (next/previous) prevents skipping steps.
• New: Loading overlay is shown during checkout processing and step transitions.
• New: Toast confirm button is disabled after the first click to prevent multiple submissions.

1.5.6

• New: Duplicate button for child blocks (Fixed Bar elements) in the Design Editor sidebar.
• New: Clipboard-based Copy/Paste for blocks and child blocks (Ctrl+C / Ctrl+V).
• New: Keyboard shortcuts for Undo (Ctrl+Z) and Redo (Ctrl+Y / Ctrl+Shift+Z) in the Design Editor.
• New: Settings highlight for preview in the Design Editor.

1.5.5

• New: Fixed bar width and max-width are now editable in the Design Editor with full responsive support (Desktop/Tablet/Mobile).
• New: Columns container settings (gap, padding, margin, border, background, alignment) now show responsive override indicators and support per-breakpoint clearing.
• New: Columns container settings now resolve responsively in the editor preview (Tablet/Mobile overrides are reflected live).
• Fix: Removed hardcoded CSS rules for fixed bar width/max-width (width: 66%, max-width: 75% !important, max-width: 78% !important, max-width: 87%) that overrode Design Editor settings.
• Fix: Removed hardcoded left: 6% positioning and legacy border/border-left-width from base fixed bar CSS.
• Fix: Columns block CSS selector is now block-specific ([data-child-block-id]) instead of generic (.fixed-bar-columns), preventing style conflicts when multiple columns blocks exist.
• Fix: Columns container margin now renders correctly in the frontend CSS (both desktop and responsive media queries).
• Fix: Price display alignment (alignSelf) now only applies to the price value, no longer affecting label and hint elements.
• Fix: Frontend fixed bar child blocks now resolve the correct block by data-child-block-id instead of returning the first block of a given type.
• Fix: Counter block responsive CSS now correctly splits wrapper properties (fontSize, color, gap) from badge properties, matching the desktop CSS specificity.
• Fix: Checkout button base CSS :where() rules removed to prevent conflicts with Design Editor settings.
• Fix: Child block max-width now matches width in generated CSS to prevent overflow.
• Fix: configurator.js cache busting now uses filemtime() instead of a hardcoded version string.

1.5.4

• New: Price display label and hint now have independent alignment options (left/center/right) per breakpoint (Desktop/Tablet/Mobile).
• Fix: Responsive overrides set in the Design Editor now work reliably across all fixed bar child blocks. Previously, many breakpoint-specific settings (Tablet/Mobile) were saved but not rendered in the frontend CSS.
• Fix: Row block responsive overrides (gap, padding, margin, background, border, alignment) now render correctly in frontend media queries.
• Fix: Button hover states (hoverBackgroundColor, hoverTextColor) for action button, share button, and reset button now respond to breakpoint overrides.
• Fix: Step badge colors (activeColor, completedColor, inactiveColor) now respond to tablet/mobile breakpoint overrides.
• Fix: Step badge showStepLabel/showStepNumber toggles now rendered as CSS in base and responsive media queries.
• Fix: Step badge alignment (left/center/right) now works in both the canvas preview and responsive frontend CSS.
• Fix: Product slot properties (slotSize, filledColor, emptyColor, align) now respond to tablet/mobile breakpoint overrides.
• Fix: Price display showLabel/showHint toggles now work responsively across all breakpoints.
• Fix: Price display label text and hint text can now be overridden per breakpoint (e.g. shorter labels on mobile).
• Fix: Price display CSS specificity fixed so responsive overrides for label, value, and hint correctly override base styles.
• Fix: Hardcoded CSS defaults weakened with :where() pseudo-class so Design Editor settings always take priority over theme defaults.

1.5.3

• Fix: Configurator reset now works correctly (domain state is reset before UI re-initialization).
• Fix: Step indicator badges now correctly persist “current/max” format when products are added (dynamic constraints from previous step are properly detected).
• Fix: Fixed bar child blocks (action button, share button, reset button, counter, text) now resolve responsive settings based on viewport width, so breakpoint-specific texts and styles set in the Design Editor are applied on the frontend.

1.5.2

• New: Responsive font sizes (Desktop/Tablet/Mobile) for modal title, product name, message, and buttons in Summary Popup and Toast.
• New: Spacing controls for modal title margin-bottom and button padding (Desktop/Tablet/Mobile) in Summary Popup and Toast.
• New: Summary popup title is now editable via the Texts tab in the Design Editor.
• New: Error toast when clicking the checkout button while the configuration is incomplete, with customizable title and message texts.
• New: Step indicator badges now show “current/max” format (e.g. “3/16”) when product limits are active.
• Fix: Frontend modal texts now display in German instead of falling back to English.

1.5.1

• New: Checkout summary popup is now fully customizable via Global Design Settings (background, text colors, border radius, max width, padding, overlay color, title/product/price/total styling, confirm/cancel button colors).

1.5.0

• New: Responsive font sizes for step title and description (Desktop/Tablet/Mobile).
• New: Responsive margin for product title (Desktop/Tablet/Mobile).
• New: Info icon styling options (size, padding, margin, border color, border radius, background color).
• New: Out-of-stock badge now replaces quantity controls instead of floating over the product image.
• Fix: Reset button now properly resets the configurator domain state (selections, step index).
• Fix: Checkout button alignment (left/center/right) now applies correctly in the fixed bar.
• Fix: Step validation messages (“Please complete step…”) are now translated and editable via the Design Editor.
• Fix: Entire cart-info div (including cart-counter) is now hidden when “Show Icon Hints” is disabled.

1.4.2

• Fix: Fixed React error #300 when switching to mobile/tablet preview in the Design Editor. Hidden blocks are now kept in the DOM (display:none) instead of being unmounted, preventing conflicts with the drag-and-drop context.

1.4.1

• New: Counter block prefix/suffix text support (e.g. “Gesamt: 4 Produkte”) with WPML translation.
• Fix: Price display no longer hidden by legacy setting when using Design Editor child blocks.
• Fix: Responsive product grid no longer forced to single column on mobile/tablet.

1.4.0

• New: Added Design Editor for the configurator with live preview.
• New: Added text editor to the design editor.
• New: Added share button, reset button, quantity input, and search functionality.
• New: Added import/export functionality for design configurations.
• New: Added out-of-stock settings for products.
• New: Added local storage persistence for user configurations.
• Improved: Optimized frontend display based on backend settings.
• Improved: Updated structure for backend and frontend integration.
• Fix: Fixed live preview not updating when steps changed in the editor.
• Fix: Fixed preview and frontend integration CSS styles.
• Fix: Fixed input options and added designs.
• Fix: Removed design page and migrated data to the designer.

1.3.3

• Fix: Fixed icons not using the home url as expected.

1.3.2

• New: Added filter f12_configurator/can_add_to_cart, allowing custom validation before adding a product to the cart. For example, to prevent preorder and default products from being ordered together.
• Improved: Added ‘home_url’ => home_url() to f12-configurator.js to ensure the correct path is used, even on staging systems. Example: configuratorData[‘home_url’] + ‘/wp-json/f12_configurator/v1/render_step’.
• Improved: Removed irrelevant or untranslated error message displayed when a product could not be added to the cart.

1.3.1

• New: Added User Guide with tutorials for customers (beta)
• Fix: Changed the number of products to exclude the item box.
• Fix: Memory leak solved causing endless previous configurators to be stored if they are not finished by the user.

1.3.0

• New: Fixed some codex issues.

1.2.0

• New: Fixed WordPress compatibility issues

1.1.0

• New: Added swiping functionality to add/remove products on mobile devices
• New: Right mouse click now removes products from the package
• New: Option to edit products after adding them to the cart
• New: Toggle button for the sidebar, located next to the fixed bar on the bottom
• Improved: Added an icon to toggle the sidebar
• New: Link and icon to open the product description in a new tab if required
• New: Option to automatically proceed to the next step when the max products are added to a package
• New: …