WooCommerce

3 min read Updated

The WooCommerce section sets the product gallery, the number of products per row, the buttons on product listings, the mini cart and the shop sidebar. Go to AppearanceCustomizeTheme SettingsWooCommerce. The section shows only when the WooCommerce plugin is active.

The WooCommerce section with the shop in the preview

To set up your store, use WooCommerceSettings and AppearanceCustomizeWooCommerce. This section only covers the parts that the theme controls.

Product Pages

Product Gallery
Choose how the images on a single product page work. All choices show the product images in a slider. Default: Gallery Slider + Lightbox.

  • Gallery Slider
  • Gallery Slider + Lightbox: A click on the image opens it in a lightbox.
  • Gallery Slider + Zoom: The image zooms when the visitor moves the pointer over it.
  • Gallery Slider + Lightbox + Zoom

Shop and Category Pages

Products per Row
The number of products in each row on the shop, product category and product tag pages, from 2 to 5. On screens 768 pixels wide or less, the shop shows two products per row, and one on screens 480 pixels wide or less. Default: 3.

Quick View
Show a Quick View button over the product image when the visitor points at it. Default: on.

Add to Cart
Show an Add to Cart button over the product image when the visitor points at it. Default: on.

When either button is on, the product image fades on hover so the buttons stand out. The buttons do not show on mobile devices.

A product in the shop with the Quick View and Add to Cart buttons on hover

Quick View opens a product in a window on top of the shop page. The window shows the product images, the title, the rating, the price, the short description and the add to cart form. The title links to the full product page, and the visitor closes the window with the close icon.

The Quick View window for a product over the shop page

Header

Mini Cart
Show a cart icon with the number of items in the header menu. When the visitor points at the icon, a drop down lists the items in the cart. The mini cart does not show on the Cart and Checkout pages. On small screens, the cart link moves into the mobile menu. Default: on.

When you turn on the store notice in WooCommerce, Unwind shows it in a bar in the accent color at the top of the header, in place of the WooCommerce notice.

Shop Sidebar

Shop Sidebar Position
Show the shop sidebar on the Left or the Right. Default: Left.

Unwind adds a Shop widget area when WooCommerce is active. Add widgets at AppearanceWidgets. The shop sidebar shows on WooCommerce pages when the area has a widget and the page layout is Default or Full Width, With Sidebar. It does not show on single product pages. See Widget Areas.

The Cart, Checkout and My Account pages are regular pages, so they show the main Sidebar widget area when it has widgets. To keep visitors focused on the purchase, set the Cart and Checkout pages to No Sidebar in Page Settings.

  • Page Settings to set the layout of the Cart and Checkout pages.
  • Page Template Settings for the layout of the shop and product category pages.
  • CSS Snippets to change the mini cart drop down direction and the product hover color.
  • Layout for the main sidebar on other pages.