By default, the plugin does not inject the configurator directly into your single product layout. Single product templates vary wildly between themes (classic templates, block themes, builders, custom WooCommerce overrides), so the plugin takes the safer approach: it adds a “Configure” button that opens the configurator in a dedicated full-page view. If you want the configurator embedded directly on the product page, you can absolutely do it, but you’ll need to control the single product layout (template or hooks) so you can place the configurator exactly where you want it. Option A (no code): Block theme (FSE) or a page builder Example A1: Block theme / Full Site Editing (FSE) When this works: Your theme lets you edit the “Single Product” template in the Site Editor. Typical steps: Go to Appearance → EditorOpen Templates → Single productAdd a Shortcode block (or Custom HTML block if you’re instructed to do so)Paste the configurator shortcode [mkl_configurator] If your theme provides a “Single Product” template but it’s missing WooCommerce blocks, your theme may not fully support WooCommerce FSE templates—switch to Option B. Example A2: Elementor Pro (Theme Builder) When this works: You can edit the Single Product template in Elementor’s Theme Builder. Typical steps: Go to Templates → Theme Builder → Single ProductEdit your Single Product templateDrag in a Shortcode widget where you want the configuratorPaste the configurator shortcodePublish and set Display Conditions (e.g., “All Products” or a specific category) Example A3: Divi / Brizy / other builders with theme templates Same idea as Elementor: Edit the Single Product templateAdd a Shortcode / Code / HTML modulePaste the configurator shortcodeSave and apply to the products you need Option B (some development): Override templates (child theme) or use hooks Example B1: Your theme already overrides WooCommerce templates When this is common: Your theme includes files like your-theme/woocommerce/single-product.php or your-theme/woocommerce/content-single-product.php. What to do: Create a child themeCopy the relevant template file from the parent theme into the child theme (same path)Insert the configurator output in the right location Concrete example (typical file locations): Parent theme override:wp-content/themes/your-theme/woocommerce/single-product.phpChild theme override target:wp-content/themes/your-child-theme/woocommerce/single-product.php Then inside that template, you’d place the configurator where you want it (usually somewhere around the product summary). Example of custom single product template, conditionally displaying the configurator:

> get_id() ) ) { /** * The default hooks are removed, so we need to manually add the title */ woocommerce_template_single_title(); /** * Add the configurator shortcode */ echo do_shortcode( '[[mkl_configurator]]' ); } else { /** * If the product is not configurable, display the default content */ /** * Hook: woocommerce_before_single_product_summary. * * @hooked woocommerce_show_product_sale_flash - 10 * @hooked woocommerce_show_product_images - 20 */ do_action( 'woocommerce_before_single_product_summary' ); ?>

Example B2: You cannot override the template via your theme This is the most technical method, as it may require the following steps: Hook to add configurator shortcodeHooks to remove default contentCSS to adjust layout (single product usually have 2 columns

Basic condition setup

Synchronising choices across layers