# Single Product Sidebar Page 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://935372695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIYgnTX-5gFMC3PxtGH%2F-MYJvo1EdHbA9SL9p-jO%2F-MYJxdI9-DQsIiNjkpI3%2Fimage.png?alt=media\&token=69c76ada-df22-4f46-8a86-0c24a9dff6b1)

### 2. Layouts for Single Product Page

Single product is displayed with 04 different layout

\+ Horizontal Thumbnail: osf\_woocommerce\_single\_product\_style=1

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

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

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

![](https://935372695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIYgnTX-5gFMC3PxtGH%2F-MYK1uWMNeriLH90gdxp%2F-MYK2Hez4OV8LLSaCcgO%2Fimage.png?alt=media\&token=f590f2c0-2664-450b-93e6-cfa4a5cc782b)

### 3. **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/huntor/product/rapid-sling-pack-10l/?osf_woocommerce_single_product_style=1)

\+ Style 2: [Gallery ](http://demo2.themelexus.com/huntor/product/rapid-sling-pack-10l/?osf_woocommerce_single_product_style=2)

\+ Style 3: [Sticky Detail](http://demo2.themelexus.com/huntor/product/rapid-sling-pack-10l/?osf_woocommerce_single_product_style=3)

\+ Style 4: [Vertical Thumbnail](http://demo2.themelexus.com/huntor/product/rapid-sling-pack-10l/?osf_woocommerce_single_product_style=4)

* Tab Style: Tab/Accordion

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

![](https://935372695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIYgnTX-5gFMC3PxtGH%2F-MYK1uWMNeriLH90gdxp%2F-MYK2VGKTeHCsWis1hlz%2Fimage.png?alt=media\&token=2f71b6d6-cd94-43ca-9a7b-5a387d27d935)

And it is displayed at frontend: 

![](https://935372695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIYgnTX-5gFMC3PxtGH%2F-MYK1uWMNeriLH90gdxp%2F-MYK32NxZcZN_t3ur-MR%2Fimage.png?alt=media\&token=4314c795-7bfa-43c3-839e-a8b456c6cf06)

### **5. Product Image Settings:** 

**Admin > Customize > WooCommerce > Product**

* Set Image size 
* Layout: Animation Image Hover

![](https://935372695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIYgnTX-5gFMC3PxtGH%2F-MYK1uWMNeriLH90gdxp%2F-MYK3Hd7r4sW9KnSNs4Q%2Fimage.png?alt=media\&token=5e374d3b-7880-4fc5-bb62-cafd3c47a1e8)

And **Publish** with all changes