> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](http://support.fancyproductdesigner.com/support/solutions/articles/5000591587-main-and-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' ); ?>
```

* Some necessary action hooks need to be included in the theme. Use the [Debug Mode](http://support.fancyproductdesigner.com/support/solutions/articles/5000582912-using-the-debug-mode-to-inspect-any-missing-hooks-in-woocommerce-product-pages) 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](http://fancyproductdesigner.com/product/poster/?start_customizing), please follow these steps:

In the **Fancy Product Designer/ Settings/ WooCommerce/ Product Designer Position**select "Replace Product Image"

![](https://storage.crisp.chat/users/helpdesk/website/-/9/e/1/f/9e1feb5d01d46000/75c9aac5-a9d9-4d6b-ae3c-de4a55_1c4qq1e.png)

**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.  
}**
```

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