> ## 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/-/a/9/b/1/a9b16bd34dc8c800/54715eed-4fe9-4d74-8c0e-fe377b_g2zsb3.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.