WooCommerce Storefront Setup

Put the Mimeeq 3D configurator in front of your shoppers. Learn to use Gutenberg blocks, Elementor widgets, shortcodes and configurator buttons.

Put the Mimeeq configurator on your site using the WordPress block editor (Gutenberg), Elementor or shortcodes.

Before you start: finish the setup in WooCommerce Admin Settings and connect your WooCommerce products to Mimeeq first.

---

Available Gutenberg blocks

The plugin adds 6 blocks, grouped under a Mimeeq category in the block inserter:

#	Block	Use case
1	Mimeeq - 3D Configurator	The main 3D configurator — shown directly on the page
2	Mimeeq Advanced Button	A stylable button that opens the configurator when clicked
3	Mimeeq Add to Cart	Adds a Mimeeq-configured product to the WooCommerce cart
4	Mimeeq Group Add to Cart	Adds a set of Mimeeq products to the cart together
5	Mimeeq WC Product	Ties an existing WooCommerce product to a Mimeeq configuration
6	Mimeeq WC Group Product	Same, but for a group of existing WooCommerce products

Mimeeq blocks listed under the Mimeeq category in the Gutenberg block inserter

---

Setting up Gutenberg blocks

1

Open the page you want to edit

1. Edit the product page, template or regular page where the configurator should appear

2. Click + to add a new block

Creating a dedicated product template makes it much easier to manage all your configured products at once, instead of repeating this setup on every single product page.

2

Add the configurator block

Add the Mimeeq - 3D Configurator block. It can be used in two ways, depending on what you fill in:

• On a WooCommerce product page: leave the shortcode/template fields empty and the block will automatically use whichever configurator is assigned to that product (set up in the product's Mimeeq tab, see WooCommerce Admin Settings)

• On any other page (homepage, landing page, or a product page where you want a specific configurator regardless of which product it is): enter a Shortcode and Template ID directly in the block's sidebar settings

Block sidebar settings:

• Shortcode: the Mimeeq product code

• Template ID: the embed template to use

• Configuration Code / Scene Shortcode: optional, start the configurator on a specific saved setup instead of its default

Configurator block sidebar with Shortcode, Template ID, Configuration Code and Scene Shortcode fields

3

Add a button (optional)

If you'd rather show a button that opens the configurator in a popup — instead of the configurator sitting inline on the page — use the Mimeeq Advanced Button block.

#	Feature	Available
1	Label, background colour, text colour	✅
2	Shape (rounded, pill, rectangle or custom)	✅
3	Border colour	✅
4	Icon (palette, brush, magic wand) and icon colour	✅
5	Hover effect (gradient or custom)	✅
6	Idle animation (shimmer, border pulse, glow pulse, and more)	✅
7	Animation speed	✅
8	Padding	✅

Want to go further with CSS? Target button.mmq-button in your theme's custom CSS.

Advanced Button block style panel with colour, shape, icon and animation options

---

Elementor widgets

If your site uses Elementor instead of (or alongside) the block editor, the plugin adds two matching widgets:

#	Widget	What it does	Setup
1	Configurator 3D	The Elementor equivalent of the Configurator block — embeds the 3D configurator directly on the page	Widget panel → Content tab → enter the Short code and Template ID (optionally also Configuration code, Scene short code and a Public price list override)
2	Advanced Button	The Elementor equivalent of the Advanced Button block, with the same styling options	Widget panel → Style tab

Elementor widget panel showing the Mimeeq Configurator 3D widget settings

---

Shortcodes (for pages without a block editor)

If you're working with an older page or theme area that doesn't support Gutenberg blocks or Elementor, you can paste these directly instead:

[mimeeq_configurator short_code="YOUR_SHORTCODE" template="TEMPLATE_ID"]
[mimeeq_button embed_short_code="YOUR_SHORTCODE" embed_template="TEMPLATE_ID"]

Both accept the same optional extras as their block counterparts (configuration code, scene shortcode and so on).

---

Test before you go live

1. Confirm the WooCommerce product has a Mimeeq shortcode and template assigned

2. Open the page and check the configurator loads correctly

3. Try adding a configured product to the cart

4. Save your changes

---

Related articles

WooCommerce Admin Settings

Configure API, cart, product naming and sync settings.

Error Recovery

Review, filter and resolve logged configurator and cart errors.

WooCommerce Add to Cart Methods

Turn configurations into cart items, bundles or modular products.

WooCommerce Getting Started

Install the plugin, add your API key and sync products.