K
K
Kilio
Search…
⌃K

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"
And it will be displayed at frontend:

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:
+ Style 2: Gallery
+ Style 3: Sticky Detail
+ Style 4: Vertical Thumbnail
  • Tab Style: Tab/Accordion

3. Product Relate and Up-sell:

4. Product Image Settings:

Admin > Customize > WooCommerce > Product
  • Set Image size
  • Layout: Animation Image Hover

5. Others

  • WooCommerce Extra
  • Store Notice
  • Checkout
And Publish with all changes