With WooCommerce on your site, products are a post type like any other: a grid can show them, filter them by product category and let shoppers sort them by price. Everything in Posts, pages and custom post types applies; this chapter adds what is particular to products.
Choose the products
- On the grid editor’s Content page, choose Posts under Source.
- Choose Product in Post types.
- In Categories and tags, choose product categories or tags, or none for every product.
The product categories become the grid’s filter buttons, as a blog’s categories do.
Sorting, cart and placement
- Sort options for visitors (Navigation › Sorting) lists WooCommerce’s orders too: Price, Number Of Sales, SKU and Stock Quantity (Filters, sorting and search).
- The Cart control shows the shopper’s cart beside the grid; place it like any control under Where the controls sit.
- The preset Shop bar in the menu Placement puts the filters, the sort menu and the cart above the grid and the page numbers below it. It needs WooCommerce (Pagination, Load more and placement).
Prices and Add to cart in a skin
Prices, the stock, a rating and an add-to-cart button are layers of the item’s skin. In the skin editor:
- Add › Shop adds a Price, Add to cart, a Sale badge (pinned top right, shown only on products on sale) or a Rating.
- A layer’s Shows lists the product’s fields too, such as Full Price, In Stock, Star Rating and Add to Cart Button.
- A new skin can start from Product card: the image with a sale badge, then the title, the price, the rating and Add to cart below it.
- Layer › Design › Visibility shows a layer only for some products: Show if Product is on Sale, Show if Product is featured.
On the page
Good to know
- A grid chooses its skin on the Items page (Items: skins on a grid and their hover).
- The widget Essential Grid WooCommerce Cart shows the cart in a widget area.