Gutenberg Blocks & Elementor Widgets — Storefront Setup

Overview

This article explains how to actually put the Mimeeq configurator on your site, using either the WordPress block editor (Gutenberg) or Elementor.

Before you start: finish the setup in 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:

Setting Up Gutenberg Blocks

Step 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.

Step 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 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

Step 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.

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

Elementor Widgets

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

Configurator 3D

The Elementor equivalent of the Configurator block — embeds the 3D configurator directly on the page.

Setup: Widget panel → Content tab → enter the Short code and Template ID (optionally also Configuration code, Scene short code, and a Public price list override).

Advanced Button

The Elementor equivalent of the Advanced Button block, with the same styling options.

Setup: Widget panel → Style tab.

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

• Admin Settings
• Error Recovery Center
• Add to Cart Methods

Updated on: 09/07/2026