> For the complete documentation index, see [llms.txt](https://wpdocs.gitbook.io/kilio/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/kilio/content-management-1/woocommerce/single-product-sidebar-layout.md).

# Single Product Sidebar Layout

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

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

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

![](/files/-MdW4b8IS-89fCTEja25)

And it will be displayed at frontend:&#x20;

![](/files/-MdaBcpc2aRUYdzacVFl)

### 2. Customize Layout for Single Product

Single product is displayed with 04 different layout

\+ Horizontal Thumbnail: single\_product\_style=1

\+ Gallery: woocommerce\_single\_product\_style=2

\+ Sticky Detail: woocommerce\_single\_product\_style=3

\+ Vertical Thumbnail: woocommerce\_single\_product\_style=4

### Customize layout for product layout

* **Main Image Width**
* **Set Sidebar Layout for Single Product**

**Admin > Customize > WooCommerce > Single** : Layout > Sidebar position: Left/right

* Style product Layouts: there are 4 styles you can set:&#x20;

\+ Style 1:[ Product Horizontal Thumbnail](http://demo2.themelexus.com/medilazar/product/neuriva-brain-performance/?osf_woocommerce_single_product_style=1)

\+ Style 2: [Gallery ](http://demo2.themelexus.com/medilazar/product/neuriva-brain-performance/?osf_woocommerce_single_product_style=2)

\+ Style 3: [Sticky Detail](http://demo2.themelexus.com/medilazar/product/neuriva-brain-performance/?osf_woocommerce_single_product_style=3)

\+ Style 4: [Vertical Thumbnail](http://demo2.themelexus.com/medilazar/product/neuriva-brain-performance/?osf_woocommerce_single_product_style=4)

* Tab Style: Tab/Accordion

### **3. Product Relate and Up-sell:**

### **4. Product Image Settings:**&#x20;

**Admin > Customize > WooCommerce > Product**

* Set Image size&#x20;
* Layout: Animation Image Hover

### 5. Others

* WooCommerce Extra
* Store Notice
* Checkout&#x20;

And **Publish** with all changes
