WooCommerce single product page offers many different areas to place your customizer. Here is a visual guide:
Found a location which suits your needs?
Copy its code (i.e.: woocommerce_after_single_product_summary)
Paste it in your WordPress admin panel
in WooCommerce tab > Kickflip tab > Customizer Iframe hook input
Click Submit.
Customizer Iframe hook priority
Since version 1.0.10 of our plugin, you can now adjust the iFrame position by changing the Customizer Iframe hook priority setting, as seen below:
A low value like 0 will place the iFrame first in the hook while a high number like 10 will position it after the other elements bound to the same hook saved in the input Customizer Iframe hook.
Editing the iframe style
In WooCommerce tab > Kickflip tab > Customizer Product Page extra CSS,
Add CSS style that will be applied only on the customizer page.
A few examples:
If you want to hide the default WooCommerce product image(s),
add the CSS rule below:
.woocommerce-product-gallery{display:none;}
If you want to hide the WooCommerce product summary,
add the CSS rule below:
.product-type-mczr .entry-summary{display:none;}
Using the Elementor Plugin with the Hello theme?
If you are using the Elementor Plugin, one of these hooks should work:
elementor/theme/after_do_header
elementor/frontend/the_content
elementor/page_templates/header-footer/before_content
elementor/page_templates/header-footer/after_content
If you are not using the Hello theme, we recommend using a plugin to find your theme Hooks, as described below.
Still can't find a working hook?
We recommend installing WP Hooks Finder, then, navigate to your Kickflip product page within WordPress, and activate the Show Action Hooks by clicking on WP Hooks Finder:
This will list all Action Hooks in your product page, you can then select one a the position you want to show the Kickflip customizer iFrame:
Copy this hook name and paste it in the settings,
in WordPress wp-admin > WooCommerce tab > Kickflip tab > Customizer Iframe hook input) then click Submit.