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

![](https://4036350574-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McTTG0PDCHIHIKBT89B%2F-MdW49H8JenA1vILkrlm%2F-MdW4b8IS-89fCTEja25%2Fimage.png?alt=media\&token=ab8f6ddf-13e0-4241-b0a4-fbc8574d10ce)

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

![](https://4036350574-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McTTG0PDCHIHIKBT89B%2F-Mda5kNvXSFXQXa5U4sm%2F-MdaBcpc2aRUYdzacVFl%2Fimage.png?alt=media\&token=34253819-52ba-4b6d-beb5-16de819e7d9b)

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