Woo Style Book

Explore our WooCommerce style guide

Discover our all-inclusive WooCommerce Style Book, crafted to enhance the aesthetics and functionality of your online store. Explore a wide range of WooCommerce blocks and elements, enabling you to create an engaging and seamless shopping journey for your customers. From showcasing individual products to emphasising top picks and implementing advanced filters, our style book provides abundant customisable choices that align with your brand and cater to your customers’ preferences.


Customer account

A block that allows your customers to log in and out of their accounts in your store.


Mini-cart

Display a button for shoppers to quickly view their cart.

Block example



A search box to allow customers to search for products by keyword.

Block examples



Product collections

Display a collection of products from your WooCommerce store. on your e-commerce website. This block allows you to curate and showcase products with.

List of product collections:

  • Default Block: Display a collection of products from your store.
  • On sale products: Highlight products that are currently on sale.
  • Best selling products: Recommend your best-selling products.
  • Featured products: Showcase your featured products.
  • Top rated products: Recommend products with the highest review ratings.
  • New arrivals: Recommend your newest products.

Key features include:

  • Customizable Layout: Choose from various layouts to display products in a grid, list, or slider format, ensuring seamless integration with your site’s design.
  • Filters and Sorting: Users can filter products by price, category, or attributes, and sort them by popularity, rating, or release date.
  • Styling Options: Personalize the appearance of product cards, including image sizes, button styles, and text alignment, to maintain brand consistency.
  • Responsive Design: The block is optimized for all screen sizes, ensuring an engaging user experience on desktops, tablets, and mobile devices.
  • Seamless Integration: The Product Collection Block integrates seamlessly with existing WooCommerce functionalities, enabling dynamic updates, stock management, and promotional pricing.

Block examples


Default Block

Display a collection of products from your store.


On sale products

Highlight products that are currently on sale.


Best selling products

Recommend your best-selling products.


Showcase your featured products.


Top rated products

Recommend products with the highest review ratings.


New arrivals

Recommend your newest products.


Product filters

The WooCommerce Reviews Blocks display customer reviews and ratings for products, showcasing feedback and enhancing credibility with customizable layouts and filtering options.

List of Product Filter blocks:

  • Active Filters: Display the currently active filters.
  • Filter by Attribute Controls: Enable customers to filter the product grid by selecting one or more attributes, such as colour.
  • Filter by Price: Enable customers to filter the product grid by choosing a price range.
  • Filter by Rating: Enable customers to filter the product grid by rating.
  • Filter by Stock Controls: Enable customers to filter the product grid by stock status.

Block Examples


Filter by price

Filter by stock status

Filter by attribute

Filter by rating

Active filters


Single product

Display a single product.

Highlight individual products with the Single Product block. Tailor each display to feature key details and images, enhancing visibility and appeal. Perfect for spotlighting new arrivals, bestsellers, or exclusive offers, this block simplifies product presentation and boosts customer engagement.

Block Example


Tour Operators Plugin

(2 customer reviews)
R150,00R400,00

A plugin developed specially for the tourism and travel industry, designed to work with the LSX theme.


Product reviews

Build trust and encourage customer interaction with WooCommerce Product Reviews Blocks.

List of Product Review blocks:

  • All Reviews: Show a list of all product reviews.
  • Reviews by Category: Show product reviews from specific categories.
  • Reviews by Product: Display reviews for your products.

Block Example



Highlight a product or variation.

Maximize your product’s impact with the Featured Product Block, designed to spotlight key items or variations in your WooCommerce store. This block draws attention to your chosen product, showcasing it with prominent imagery and compelling details. Customize the layout to suit your storeโ€™s style and use it to promote limited-time offers, seasonal specials, or top-selling items. Itโ€™s an ideal solution for driving sales and enhancing the visibility of your most valuable products.

Block Example


Visually highlight a product category and encourage prompt action.

Enhance your store’s navigation and aesthetics with the Featured Category Block, strategically designed to visually highlight specific product categories. This block not only improves the visual appeal of your store but also guides customers directly to your key categories, encouraging immediate engagement. Ideal for promoting new collections, seasonal items, or best-selling categories, it helps streamline the shopping experience by making essential categories readily accessible and visually distinct.

Block Example



Cart

Shopping basket displaying current line items in Cart, the apply coupon form, subtotal, fees, shipping, tax, total and proceed to checkout button.

The WooCommerce Cart Block provides an intuitive and seamless experience for users to view and manage the contents of their shopping cart. It displays all the products added to the cart, along with essential details such as product names, quantities, prices, and total costs. Users can easily update quantities, remove items, and proceed to the checkout, all within a visually appealing and user-friendly interface. The block’s design ensures a smooth and efficient shopping experience, reducing cart abandonment rates and enhancing customer satisfactionโ€‹ WooCommerce.

Block Example


You may be interested inโ€ฆ

Your basket is currently empty!

Browse store


New in store


Checkout

Display a checkout form so your customers can submit orders.

The WooCommerce Checkout Block offers a streamlined and customizable checkout process, designed to optimize conversions and minimize friction during the purchase. It includes features like instant field validation to prevent errors, options for local pickup, and various payment methods, including credit cards, digital wallets, and buy now, pay later options. The block integrates seamlessly with the store’s theme, ensuring a cohesive and branded experience from cart to order confirmationโ€‹ WooCommerce.โ€‹โ€‹

Block Example