# 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://2600281318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXkPsMXnduuRoXdfyg-%2F-MZMtyodmLLR3fEBfIZ9%2F-MZMuy2UDhKYZ2zze-2c%2Fimage.png?alt=media\&token=0f1c42a0-845f-4e37-8ea4-3d11ccde7f77)

And it displays at frontend:&#x20;

![Beautifo - Customize Product Layout ](https://2600281318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXkPsMXnduuRoXdfyg-%2F-MZQo0OXBeA2XH3DORZs%2F-MZRN9_e2kwBmnaHRxhe%2Fimage.png?alt=media\&token=3e125f6b-098e-478e-86ad-32e6916babce)

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

![](https://2600281318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXkPsMXnduuRoXdfyg-%2F-MZQo0OXBeA2XH3DORZs%2F-MZRNt3ZtaGh_PQWiyv0%2Fimage.png?alt=media\&token=f0a16e80-9af3-4e99-8a88-1c06764b17a9)

### **3. Product Relate and Up-sell:**

![](https://2600281318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXkPsMXnduuRoXdfyg-%2F-MZQo0OXBeA2XH3DORZs%2F-MZRPNYRp1yKW-yYw9o3%2Fimage.png?alt=media\&token=0f95c344-5d4e-4b3c-966a-4dfaf1d56c06)

And it is displayed at frontend:&#x20;

![](https://2600281318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXkPsMXnduuRoXdfyg-%2F-MZQo0OXBeA2XH3DORZs%2F-MZRPe2ivKaZyxcCpsi2%2Fimage.png?alt=media\&token=3acef339-198d-40a7-98f2-4cb96407677c)

### **4. Product Image Settings:**&#x20;

**Admin > Customize > WooCommerce > Product**

* Set Image size&#x20;
* Layout: Animation Image Hover

![](https://2600281318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXkPsMXnduuRoXdfyg-%2F-MZQo0OXBeA2XH3DORZs%2F-MZRPl_ZMrK-oPlJdXMk%2Fimage.png?alt=media\&token=5c5769e3-509e-4cb8-86e1-161a2921f6f6)

### 5. Others

* WooCommerce Extra
* Store Notice
* Checkout&#x20;

And **Publish** with all changes
