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 → Editor
- Open Templates → Single product
- Add a Shortcode block (or Custom HTML block if you’re instructed to do so)
- Paste the configurator shortcode
A product id must be set in order for this shortcode to work.
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 Product
- Edit your Single Product template
- Drag in a Shortcode widget where you want the configurator
- Paste the configurator shortcode
- Publish 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 template
- Add a Shortcode / Code / HTML module
- Paste the configurator shortcode
- Save 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 theme
- Copy 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.php - Child 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:
<?php
/**
* The template for displaying product content in the single-product.php template
*
* This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.6.0
*/
defined( 'ABSPATH' ) || exit;
global $product;
/**
* Hook: woocommerce_before_single_product.
*
* @hooked woocommerce_output_all_notices - 10
*/
do_action( 'woocommerce_before_single_product' );
if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
<?php
/**
* Check if the product is configurable
* If it is, display the configurator
*/
if ( function_exists( 'mkl_pc_is_configurable' ) && mkl_pc_is_configurable( $product->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' );
?>
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php } // end if configurable ?>
<?php
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_upsell_display - 15
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<?php do_action( 'woocommerce_after_single_product' ); ?>
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 shortcode
- Hooks to remove default content
- CSS to adjust layout (single product usually have 2 columns