PATTERN LIBRARY / COMMERCE
Commerce
21 registered patterns. Product, account and WooCommerce compositions.
Every commerce composition is shown below. Sections marked as placeholders need WooCommerce data; their native block structure is shown instead of a fabricated shop preview.
01 / My Account
executive/my-account
WooCommerce preview placeholder
My Account
A native WooCommerce My Account page wrapper that leaves login, registration, orders, addresses, downloads and account details to WooCommerce.
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Store Notices
02Post Title
03Woocommerce / Page Content Wrapper
04Post Content
02 / Panel Product Categories
executive/panel-product-categories
Shop
Resources you can use today
Practical resources, ready to adapt for your own work and audience.
Add a count
Add a count
Add a count
Add a count
Add a count
Add a count
03 / Product Archive
executive/woo-product-archive
WooCommerce preview placeholder
Product Archive
Product archive with header, sorting, product grid, and pagination
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Breadcrumbs
02Query Title
03Term Description
04Woocommerce / Store Notices
05Woocommerce / Product Results Count
06Woocommerce / Catalog Sorting
07Woocommerce / Product Collection
08Woocommerce / Product Template
09Query Pagination
10Query Pagination Previous
11Query Pagination Numbers
12Query Pagination Next
13Woocommerce / Product Collection No Results
14Paragraph
15Heading
04 / Product Archive Sidebar
executive/woo-product-archive-sidebar
WooCommerce preview placeholder
Product Archive Sidebar
Product archive with sidebar filters, product grid, and pagination
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Breadcrumbs
02Query Title
03Term Description
04Woocommerce / Store Notices
05Woocommerce / Product Results Count
06Woocommerce / Catalog Sorting
07Woocommerce / Product Filters
08Heading
09Woocommerce / Product Filter Active
10Woocommerce / Product Filter Removable Chips
11Woocommerce / Product Filter Clear Button
12Buttons
13Button
14Woocommerce / Product Filter Price
15Woocommerce / Product Filter Price Slider
16Woocommerce / Product Filter Rating
17Woocommerce / Product Filter Checkbox List
18Woocommerce / Product Filter Attribute
19Woocommerce / Product Filter Taxonomy
20Woocommerce / Product Filter Status
21Woocommerce / Product Collection
22Woocommerce / Product Template
23Query Pagination
24Query Pagination Previous
25Query Pagination Numbers
26Query Pagination Next
27Woocommerce / Product Collection No Results
28Paragraph
05 / Product Card 1
executive/woo-product-card
WooCommerce preview placeholder
Product Card 1
The default product card: the picture with a square scrim bar that slides up over its lower edge on hover, and the title and price underneath. The one the shop templates use.
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Product Image
02Woocommerce / Product Sale Badge
03Woocommerce / Product Button
04Post Title
05Woocommerce / Product Price
06 / Product Card 2
executive/woo-product-card-2
WooCommerce preview placeholder
Product Card 2
Simple centered product card with add to cart button
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Product Image
02Woocommerce / Product Sale Badge
03Post Title
04Woocommerce / Product Price
05Woocommerce / Product Button
07 / Product Card 3
executive/woo-product-card-3
WooCommerce preview placeholder
Product Card 3
Centered product card with star rating and add to cart button
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Product Image
02Woocommerce / Product Sale Badge
03Post Title
04Woocommerce / Product Price
05Woocommerce / Product Rating
06Woocommerce / Product Button
08 / Product Card 4
executive/woo-product-card-4
WooCommerce preview placeholder
Product Card 4
Product card with title and rating in row layout
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Product Image
02Woocommerce / Product Sale Badge
03Post Title
04Woocommerce / Product Rating
05Woocommerce / Product Price
06Woocommerce / Product Button
09 / Product Card 5
executive/woo-product-card-5
WooCommerce preview placeholder
Product Card 5
The product on a dark plane, for a shop band that sits against the light ones. The picture runs to the edges and the action stays visible.
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Product Image
02Woocommerce / Product Sale Badge
03Post Title
04Woocommerce / Product Price
05Separator
06Woocommerce / Product Button
10 / Product Category Grid
executive/product-category-grid
WooCommerce preview placeholder
Product Category Grid
A native WooCommerce category listing for featured categories, shop-by-category navigation and category landing pages.
Placeholder — requires WooCommerce data
Native block structure
01Paragraph
02Heading
03Woocommerce / Product Categories
11 / Product Collection
executive/product-collection
WooCommerce preview placeholder
Product Collection
A configurable native product collection for featured products, new arrivals, best sellers, recommendations or a campaign selection.
Placeholder — requires WooCommerce data
Native block structure
01Paragraph
02Heading
03Woocommerce / Product Collection
04Woocommerce / Product Template
05Woocommerce / Product Collection No Results
12 / Product Comparison
executive/product-comparison
Product comparison
Compare the attributes relevant to your collection.
This is an editorial presentation only. Keep the source product attributes in WooCommerce and use approved data when completing the table.
| Attribute | Option | Option |
|---|---|---|
| Add an attribute | Add approved product information | Add approved product information |
13 / Product Information
executive/product-information
WooCommerce preview placeholder
Product Information
A light native product-details presentation for attributes, technical specifications, benefits and care information managed in WooCommerce.
Placeholder — requires WooCommerce data
Native block structure
01Paragraph
02Heading
03Woocommerce / Product Details
14 / Product Search Results
executive/woo-product-search
WooCommerce preview placeholder
Product Search Results
Product search results page with grid layout and pagination
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Breadcrumbs
02Query Title
03Woocommerce / Store Notices
04Woocommerce / Product Results Count
05Woocommerce / Catalog Sorting
06Woocommerce / Product Collection
07Woocommerce / Product Template
08Query Pagination
09Query Pagination Previous
10Query Pagination Numbers
11Query Pagination Next
12Woocommerce / Product Collection No Results
13Paragraph
14Heading
15 / Shop Introduction
executive/shop-introduction
Shop introduction
A considered collection, ready to explore.
Introduce the collection, seasonal focus or point of view here. Keep the product information itself in WooCommerce.
16 / Single Product
executive/woo-single-product
WooCommerce preview placeholder
Single Product
Single product page with gallery, details, add to cart, and related products
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Breadcrumbs
02Woocommerce / Store Notices
03Woocommerce / Product Gallery
04Woocommerce / Product Gallery Large Image
05Woocommerce / Product Image
06Woocommerce / Product Sale Badge
07Woocommerce / Product Gallery Large Image Next Previous
08Woocommerce / Product Gallery Thumbnails
09Post Title
10Woocommerce / Product Price
11Woocommerce / Product Rating
12Post Excerpt
13Woocommerce / Add To Cart With Options
14Paragraph
15Woocommerce / Product Stock Indicator
16Woocommerce / Product Details
17Woocommerce / Product Meta
18Woocommerce / Product Sku
19Post Terms
20Woocommerce / Product Collection
21Heading
22Woocommerce / Product Template
17 / Woo Header
executive/woo-header
WooCommerce preview placeholder
Woo Header
WooCommerce header with CTA bar, navigation, cart, and search
Placeholder — requires WooCommerce data
Native block structure
01Paragraph
02Site Title
03Navigation
04Woocommerce / Customer Account
05Woocommerce / Mini Cart
06Search
18 / WooCommerce Cart
executive/woo-cart
WooCommerce preview placeholder
WooCommerce Cart
The cart page for WooCommerce.
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Breadcrumbs
02Post Title
03Buttons
04Button
05Woocommerce / Page Content Wrapper
06Woocommerce / Store Notices
07Post Content
19 / WooCommerce Checkout
executive/woo-checkout
WooCommerce preview placeholder
WooCommerce Checkout
The checkout page for WooCommerce.
Placeholder — requires WooCommerce data
Native block structure
01Site Title
02Woocommerce / Cart Link
03Post Title
04Woocommerce / Page Content Wrapper
05Woocommerce / Store Notices
06Post Content
20 / WooCommerce Coming Soon
executive/woo-coming-soon
WooCommerce preview placeholder
WooCommerce Coming Soon
The coming soon page for WooCommerce.
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Coming Soon
02Heading
03Paragraph
21 / WooCommerce Order Confirmation
executive/woo-order-confirmation
WooCommerce preview placeholder
WooCommerce Order Confirmation
The order confirmation page for WooCommerce.
Placeholder — requires WooCommerce data
Native block structure
01Woocommerce / Order Confirmation Status
02Buttons
03Button
04Woocommerce / Page Content Wrapper
05Woocommerce / Store Notices
06Woocommerce / Order Confirmation Summary
07Woocommerce / Order Confirmation Totals Wrapper
08Heading
09Woocommerce / Order Confirmation Totals
10Woocommerce / Order Confirmation Downloads Wrapper
11Woocommerce / Order Confirmation Downloads
12Woocommerce / Order Confirmation Shipping Wrapper
13Woocommerce / Order Confirmation Shipping Address
14Woocommerce / Order Confirmation Billing Wrapper
15Woocommerce / Order Confirmation Billing Address
16Woocommerce / Order Confirmation Additional Fields Wrapper
17Woocommerce / Order Confirmation Additional Fields
18Woocommerce / Order Confirmation Additional Information