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

# Single Product Sidebar Layout

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

Go to admin > Appearance > Widgets: 

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

![Add Single Product Layout Sidebar](/files/-MXBNtlygBRs-x4V4AQq)

And it displays at frontend: 

![Sidebar on single product page](/files/-MXBOQpbsKwRxWYAbQ3j)

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

* **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: 

\+ 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

![](/files/-MXBTCs52M21i5fjI3lP)

### **3. Product Relate and product up-sell:**

![](/files/-MXBTR0Pwh0zVBCvs5bH)

And it is displayed at frontend: 

![](/files/-MXBTsiYEvrm-305LqtC)

### **4. Product Image Settings:** 

**Admin > Customize > WooCommerce > Product**

* Set Image size 
* Layout: Animation Image Hover

![](/files/-MXBUIb_hyaPuL71Eqfj)

And **Publish** with all changes

See video: 

{% embed url="<https://www.youtube.com/watch?v=I98lFKZBSNE>" %}