Customizing the layout of WooCommerce product pages

If WooCommerce is enabled, another tab "WooCommerce" will be visible in the Settings. Under this tab you can adjust some layout options for WooCommerce product pages. These options can be set in the Individual Product Settings as well.

Product Designer Positioning

You can choose between different position options for the Product Designer in the product page.

Replace Product Image: The Product Designer will replace the default product image *

Under Product Title: The Product Designer will come up under the product title *

After summary: The summary includes, i.e. the price, add-to-cart button etc. *

Custom Hook

First of all you need to check if your activated theme has a custom content-single-product.php in the woocommerce directory. This directory is in the root folder of your theme. If there is a content-single-product.php, you have to open this one, otherwise go to the woocommerce plugins directory and open the content-single-product.php in the templates directory. Add following code anywhere in the content-single-product.php, where you would like the product designer needs to appear:

<?php do_action( 'fpd_product_designer' ); ?>

Undefined

• Some necessary action hooks need to be included in the theme. Use the Debug Mode to inspect any missing hooks in your theme.

Set product designer to left side

If you want to set/float the product designer to the left side in the products page like in this demo, please follow these steps:

In the Fancy Product Designer/ Settings/ WooCommerce/ Product Designer Positionselect "Replace Product Image"

Next go to **Fancy Product Designer/ UI Composer/ select the UI you are using or use the default UI **/ Custom CSS**** and enter the following CSS styles:

.fpd-product-designer-wrapper {	float: left;	width: 518px; //Here you need to know the width of the product image container that is normally displayed. If you do not know how to get it, just try different width values.}

Undefined

Please note: Depending on the theme you are using, the Custom CSS code might be different.

Updated on: 06/08/2025