Setting the customizer display mode in WooCommerce

By default, the Kickflip customizer is embedded directly in your product page. As of plugin version 1.0.50 you can instead show a Customize button that opens the customizer in a full-screen modal, which keeps your product page layout intact until a shopper decides to customize.

The settings below Display mode change depending on which mode you pick, so you only ever see the fields that apply.

Customizer Iframe width and Customizer Iframe height set the size of the embedded customizer.

Customizer Product Page extra CSS applies custom CSS to the product page.

Customizer Iframe hook controls where the customizer appears on the product page. Leave empty to use woocommerce_after_single_product_summary. See Setting the customizer iframe location and style in WooCommerce.

Customize button hook controls where the Customize button appears on the product page. Leave it empty to use woocommerce_mczr_add_to_cart, which places the button next to your Add to cart button.

Customize button modal extra CSS applies custom CSS to the modal.

Hook priority applies to both modes. It controls the order in which the customizer or the button is inserted relative to other elements attached to the same hook.

The customizer loads in the background as soon as the product page opens, so the modal appears instantly when a shopper clicks Customize.

Shoppers can close it three ways: the close button in the top-right corner, the Escape key, or by clicking the dark area outside the customizer. On mobile the modal fills the screen and page scrolling is locked while it is open.

The Customize button inherits your theme's button styling, so it matches your Add to cart button without any work.

To adjust the modal, use Customize button modal extra CSS. For example: #mczrCustomizerModalInner { max-width: 1200px; }

To restyle the button itself: #mczrCustomizeButton { background: #000; color: #fff; }

Your theme may not use the default hook. Try woocommerce_single_product_summary in Customize button hook, or ask your developer which hook your theme exposes near the Add to cart button.