WordPress.org

Plugin Directory

Webkoding ConfigMate – Product Configurator for WooCommerce

Webkoding ConfigMate – Product Configurator for WooCommerce

Description

ConfigMate turns any WooCommerce product into a visual configurator. Define layers — color swatches, size selects, add-on checkboxes — each option carrying its own price and (optionally) a preview image. On the product page the customer picks options, watches the product image compose live, and sees the price update instantly. The configured product flows into the normal WooCommerce cart and the chosen options are saved on the order.

Unlike heavy “design canvas” plugins, ConfigMate is a lightweight layer-select + live price model: modern, fast, mobile-first, and far less support overhead than a full text/font/clipart designer. It’s the sweet spot for signage and banners, furniture, apparel add-ons, promotional products, packages and B2B made-to-order items.

What sets ConfigMate apart:

  • Live image preview — each option can stack a transparent PNG layer over the base image, so the product visibly changes as options are chosen.
  • Live price, validated on the server — the configurator shows a running total for UX, but the authoritative price is always recomputed on the server from the product’s stored configuration at add-to-cart and checkout. A tampered client can’t inject a fake price, and every option id is re-validated against the config (IDOR-safe).
  • No account, no third-party service, no monthly fee — every configurator you build runs entirely on your own WooCommerce site. The plugin never calls a server of ours, and your product data never leaves your installation. The visual configurators sold as SaaS charge per month and hold your options on their platform; this does neither.

Built to the WordPress coding standards: nonce-verified writes, escaped output, sanitized input, prepared statements, HPOS-compatible, dark mode and RTL.

ConfigMate Pro

One optional add-on — https://webkodingtheme.com/plugins/configmate/ — adds conditional layers: show a group
of options only once another option is chosen — a thread colour that appears after a
monogram is added, an engraving font that appears after engraving is. Nothing above depends
on it and nothing here is disabled without it; the add-on is extra code, installed beside
this plugin.

Use Cases

  • Signage & banners — size, material, finish, mounting
  • Furniture — fabric, color, leg style, add-ons
  • Apparel & promo — color swatches, size, printing options
  • Made-to-order & B2B packages — modular priced options

Key Features

  • Per-product configurator defined right in the Product data Configurator tab
  • Layer types: swatch, select, radio, checkbox — each option has a price + optional preview image
  • Live layered image preview (base image + per-option overlays)
  • Live price with server-side re-validation at add-to-cart and checkout
  • “Add to base price” or “replace price” modes
  • Selected options saved on the cart, checkout and order line item
  • REST price endpoint as the single source of truth; mobile-first; dark mode; RTL

Privacy

ConfigMate stores the configurator definition as product meta and the customer’s chosen options on the cart and order line item. It does not send data to any external service. The product configurations are removed on uninstall when the “remove data on uninstall” option is enabled.

Third Party Services

None. The plugin does not connect to, send data to, or load assets from any third-party service. WooCommerce is a separate plugin governed by its own terms.

Screenshots

Installation

  1. Install and activate WooCommerce.
  2. Upload the plugin folder to /wp-content/plugins/ and activate it.
  3. Edit a product, open Product data Configurator, define your layers and priced options as JSON and set “enabled”: true. Or use ConfigMate Example product to have one built for you in a click.
  4. The product page now shows the configurator with a live preview and price.

FAQ

Does it require WooCommerce?

Yes. Configurable items are WooCommerce products and checkout uses the WooCommerce cart.

Can the customer fake the price?

No. The configurator shows a live total for convenience, but the authoritative unit price is recomputed on the server from the product’s stored configuration, and every selected option id is re-validated against that config, at add-to-cart and at order creation.

How does the live image preview work?

Give an option an image_id (a transparent PNG works best). When the option is chosen, ConfigMate overlays that image on top of the product’s base image, composing the configured look in the browser.

Do I need a page builder or code?

No. The configurator is defined per product as a small JSON structure in the Configurator tab; the frontend renders automatically on the product page.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Webkoding ConfigMate – Product Configurator for WooCommerce” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.3

  • Fixed: invalid JSON in the configurator field was discarded in silence, so a save that had failed looked exactly like one that had worked. The parser’s error is now shown and the previous configuration is kept.
  • Fixed: conditional rules written into the configurator JSON were dropped without a word. Saving one now says so, and says where conditional layers come from.
  • Fixed: the configurator field handed the stored JSON back on a single line, so the readable sample everyone starts from survived exactly one save. It is re-indented for editing.

1.0.2

  • Fixed: the author name was written in lower case in the plugin header, so the plugins list and the directory showed a different author than the other Webkoding plugins.
  • The add-on’s address is now written out in the description rather than named without a link.

1.0.1

  • Fixed: the configurator laid itself out against the width of the window instead of the width of the column it sits in, so on a desktop the options were squeezed into half of the product summary and long labels were cut off.
  • Fixed: the live preview drew an empty grey frame on products whose options carry no preview images, and no longer shows a frame at all when nothing an option can change would appear in it.
  • Added: a link to the ConfigMate add-on in the plugins list and under the configurator field.

1.0.0

  • Initial release.
  • Per-product visual configurator: swatch/select/radio/checkbox layers with priced options.
  • Live layered image preview and a live price total.
  • Server-side price recomputation and option re-validation (IDOR-safe) at add-to-cart and order creation.
  • “Add” or “replace” price modes; selected options saved on cart, checkout and order.
  • REST price endpoint; HPOS-compatible; dark mode; RTL.