> For the complete documentation index, see [llms.txt](https://wpdocs.gitbook.io/funisox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wpdocs.gitbook.io/funisox/content-management-1/woocommerce/single-product-sidebar-layout.md).

# Single Product Sidebar Layout

### 1. 04+ Premade Layouts for Single Product Detail page:&#x20;

As the default of Funisox product page, it doesn't come with sidebar. It 's available with 04 Layouts:&#x20;

* [Layout 1](http://dev2.wpopal.com/funisox/product/mens-pills-crew-socks/?osf_woocommerce_single_product_style=1):&#x20;

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmmLEGXymigmR-4CPz%2Fimage.png?alt=media\&token=63863656-488c-4348-b851-95b237b6bfe2)

* [Layout 2](http://dev2.wpopal.com/funisox/product/mens-pills-crew-socks/?osf_woocommerce_single_product_style=2):&#x20;

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmmSmgZPT1fDpSJlY3%2Fimage.png?alt=media\&token=eb418a39-1da0-41c9-ae45-712f81f14d9b)

* [Layout 3](http://dev2.wpopal.com/funisox/product/mens-pills-crew-socks/?osf_woocommerce_single_product_style=3):&#x20;

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmmXHMNn6DDDyp0AQY%2Fimage.png?alt=media\&token=420db334-faa7-4a2f-8b1c-fe1e91c9ca09)

* [Layout 4](http://dev2.wpopal.com/funisox/product/mens-pills-crew-socks/?osf_woocommerce_single_product_style=4):&#x20;

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmmaOZdaiTeOR9csFM%2Fimage.png?alt=media\&token=d48ed8e4-137a-4edb-9f25-6382459a0993)

### 2. Add Widget to Sidebar on Single Product page:&#x20;

Go to admin > Appearance > Widgets:&#x20;

Dragging n dropping available widgets to "**WooCommerce Detail"**

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmnC9_79hI0SwRi3zo%2Fimage.png?alt=media\&token=5020b6b6-37a7-4c0f-83ae-5a5643ee19ab)

And it displays at frontend:&#x20;

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-Mhmnhk6qBU5be9Ugf5M%2Fimage.png?alt=media\&token=e4d82907-e365-4784-a002-5818f69a7e2e)

### 2. Customize Layout for Single Product

**Open Dashboard > Customize > WooCommerce > Single Product**

* Image: Set main image width size
* Layout

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmoKWoPd4TPrf8Vmrs%2Fimage.png?alt=media\&token=8b54fb02-0c1e-4e31-8d5c-ebd5c92e5159)

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-Mhmo2GGzo9-9cAiYbcy%2Fimage.png?alt=media\&token=44ecb5e8-ecd3-4f03-9352-a3384887a901)

* Product relate and upsell:

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmoYObAnHVQj3qCW3Y%2Fimage.png?alt=media\&token=85404505-f7e8-4971-b3d5-837f391915ab)

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-MhmZQH5jaN1tSkBmb1Y%2F-MhmoTLo8aGA7-IvZxyh%2Fimage.png?alt=media\&token=453c9bda-c0f7-4899-9c59-ee16afe9f7b6)

### 3. Product with Grid/List Layout

![](https://2856328449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgATD0Z7hrFIsLBS6EJ%2F-Mhmt0ioTd29pEsBXlHp%2F-MhmtEroUe57UnsYRWee%2Fimage.png?alt=media\&token=d60f3896-d841-44cc-ad9a-acaa88a31e04)

And **Publish** with all changes
