# 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](https://2721375808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNROqxinGIHrcdd3Eoq%2F-MXBM5zhehhTlZ0SDm7A%2F-MXBNtlygBRs-x4V4AQq%2Fimage.png?alt=media\&token=0ec40fda-6925-416b-861d-3649287b51ad)

And it displays at frontend: 

![Sidebar on single product page](https://2721375808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNROqxinGIHrcdd3Eoq%2F-MXBM5zhehhTlZ0SDm7A%2F-MXBOQpbsKwRxWYAbQ3j%2Fimage.png?alt=media\&token=930cf2d1-2f93-47f7-9e42-e646ef2cccae)

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

![](https://2721375808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNROqxinGIHrcdd3Eoq%2F-MXBM5zhehhTlZ0SDm7A%2F-MXBTCs52M21i5fjI3lP%2Fimage.png?alt=media\&token=14eb3e5a-497a-4a08-aed4-6c98ac34064e)

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

![](https://2721375808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNROqxinGIHrcdd3Eoq%2F-MXBM5zhehhTlZ0SDm7A%2F-MXBTR0Pwh0zVBCvs5bH%2Fimage.png?alt=media\&token=2e5a7cb0-68ac-4823-9783-6c10a1238e6c)

And it is displayed at frontend: 

![](https://2721375808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNROqxinGIHrcdd3Eoq%2F-MXBM5zhehhTlZ0SDm7A%2F-MXBTsiYEvrm-305LqtC%2Fimage.png?alt=media\&token=26c4da8c-07d9-47b9-bbb4-12858e7cf627)

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

**Admin > Customize > WooCommerce > Product**

* Set Image size 
* Layout: Animation Image Hover

![](https://2721375808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNROqxinGIHrcdd3Eoq%2F-MXBU358SgIkWDnfqIVy%2F-MXBUIb_hyaPuL71Eqfj%2Fimage.png?alt=media\&token=9bec38e5-ed56-4830-89ca-28590d0935d8)

And **Publish** with all changes

See video: 

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