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

# 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](/files/-MYJxdI9-DQsIiNjkpI3)

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

![](/files/-MYK2Hez4OV8LLSaCcgO)

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

![](/files/-MYK2VGKTeHCsWis1hlz)

And it is displayed at frontend: 

![](/files/-MYK32NxZcZN_t3ur-MR)

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

**Admin > Customize > WooCommerce > Product**

* Set Image size 
* Layout: Animation Image Hover

![](/files/-MYK3Hd7r4sW9KnSNs4Q)

And **Publish** with all changes