Product Configurator for WooCommerce

There are 3 different ways to install this plugin, as with any other wordpress.org plugin.

Using the WordPress dashboard

1. 01Navigate to the ‘Add New’ in the plugins dashboard
2. 02Search for ‘Product Configurator for WooCommerce’
3. 03Click ‘Install Now’
4. 04Activate the plugin on the Plugin dashboard
5. 05Go to the FAQs and watch the “getting started” video

Uploading in WordPress Dashboard

1. 06Download the latest version of this plugin
2. 07Navigate to the ‘Add New’ in the plugins dashboard
3. 08Navigate to the ‘Upload’ area
4. 09Select the zip file (from step 1.) from your computer
5. 10Click ‘Install Now’
6. 11Activate the plugin in the Plugin dashboard

Using FTP

1. 12Download the latest version of this plugin from https://wordpress.org/plugins/
2. 13Unzip the zip file, which will extract the product-configurator-for-woocommerce directory to your computer
3. 14Upload the product-configurator-for-woocommerce directory to the /wp-content/plugins/ directory in your web space
4. 15Activate the plugin in the Plugin dashboard

I just found the plugin, how do I use the configurator?

Watch the get started video on Youtube:

Not enough? Ask your questions on the support forum

Can I use 3D models? Which formats are supported?

Yes. Set the product’s Configurator type to “3D configurator” and upload a glTF model, as a .glb file, a .gltf file, or a .zip containing the .gltf file and its textures. Models compressed with Draco or Meshopt, and KTX2 textures, are supported through options in the settings.

The parts customers can configure must be separate, named objects in the model: choices are linked to those objects by name, and can show, hide or move them, or change their material.

Do I still need product variations?

No. A single product with a configurator replaces the variations and the images for every combination: customers pick their options and the preview is built from your layers or your 3D model. Prices, stock and SKUs per option are available with the Extra Price and Linked Products & Stock Management add-ons.

Variable products are supported too, if you need them: their variations can share one configurator or each have their own.

Can several products share the same configurator?

Yes, with global configurators. Build a configurator once under Product Configurator > Global configurators, or turn an existing product’s configurator into a global one, then assign it to products or to whole product categories. A change made to a global configurator applies to every product using it, and any product can be detached with “Make local copy”.

To share only part of a configurator, such as a fabric range, make a layer global and import it into other products.

Does it work with my theme or page builder?

Yes. By default the configurator opens from a “Configure” button that replaces the Add to cart button, which works with any WooCommerce theme. To embed the configurator in the product page, or anywhere else, use the [mkl_configurator] and [mkl_configurator_button] shortcodes in a block theme template, Elementor, Divi or any other page builder.

The configurator’s look comes from its own themes, which you can pick and adjust in the settings and the WordPress Customizer.

Can customers see the product in augmented reality?

Yes, with the 3D Premium add-on. Customers on a phone or tablet get a “View in your space” button that places the product, as they configured it, in their room through the camera. It uses AR Quick Look on iPhone and iPad, and WebXR in Chrome on ARCore Android devices. The site must be served over HTTPS.

How can I create a custom theme for the configurator?

Use the starter theme, which you can find on github with simple instructions to get started.

Is the product configurator compatible with WPML or Polylang?

Yes, the plugin is compatible with both, and will add localization for the layer and choice fields.

How can I optimize the layers in the configurator?

We recommend using a plugin such as WP-Optimize for all-round performance improvements:

Which open source libraries does the plugin use?

The product configurator plugin uses other Open Source libraries:

• PixiJS
• Three.js
• tippy and popper.js
• html2canvas.js
• download.js by dandavis
• Intervention/Image

Open Source SVG icons:

• Blender.org UI icons
• WordPress Gutenberg icons