> ## 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).

# Connect WooCommerce Store

${frame}[](https://www.youtube.com/embed/3fpngV07x3Q?&wmode=opaque)

With WooCommerce, you need to enable the product designer for every product individually.

* Go to your WooCommerce Products and select a product from your existing products or add a new one.
* You can now add an optional description or product data as needed, such as price.
* The Fancy Product Designer meta box has been added on the right hand side of the screen.
* Add one or more single Fancy Products individually or one or more product categories via the Source Type option.
* After that, select the products or categories from the drop-down menu. You can also create and choose different products for mobile devices to improve the presentation of the products on smaller screens.
* You can now publish and preview the product page. (Note: The Add to cart Button will only be shown after adding a price to your WooCommerce Product.)

You can customize the positioning of the product designer on the product page with the settings found on: Fancy Product Designer -> Settings -> WooCommerce -> Product Page. Check [here](https://docs.google.com/document/u/0/d/1D9oF67gbkgoZRUmD3aGGb6gRykiRVWRO40evCJvvQcE/edit) for more details.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/0/0/5/2005f2db842f5400/6c4e921a-847d-4e69-9b4b-0d8465_35kbpw.png)

If you are using the Elementor page builder plugin, please see: [Using FPD with the Elementor page builder plugins](https://support.fancyproductdesigner.com/support/solutions/articles/13000063665-using-fpd-with-the-elementor-page-builder-plugins)