Core Shop
A catalog of products
wp="products" The shop page and category pages: a grid of cards that shows the products of the page, with sorting, filters and page numbers.
Where it goes
On the grid on archive-product.html (the shop) and taxonomy-product-cat.html (a category). The first card is the pattern: inside it wp="post-link", wp="post-image", wp="post-title" and the price.
A block with wp="no-results" right after the grid is shown when nothing is found.
Products on any other page, such as the home page: wp-product-query with settings like wp-query.
Example: the coffee bean shop
Markup archive-product.html
<div class="beans" wp="products">
<div class="bean-card">
<a href="#" wp="post-link">
<img src="images/bean.jpg" alt="" wp="post-image">
<h3 wp="post-title">Ethiopia Yirgacheffe</h3></a>
<div wp="product-price">$14.00</div>
</div>
</div>
<div class="empty" wp="no-results">No beans match.</div>In the admin Products
Products
- Ethiopia Yirgacheffe
- Colombia Huila
- Brazil Cerrado
- House blend “Warm”
On the site the shop page
Beans
Ethiopia Yirgacheffe $14.00
Colombia Huila $13.00
Brazil Cerrado $11.00
What matters
- Needs WooCommerce.
- Sorting: a
<form wp="sort">with<select wp="orderby">inside. - Page numbers: wp-paginate under the grid.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
Not like this
<select wp="orderby">
<option value="price">Price</option>
</select>A sorting list without its form: the build logs the attribute and it does nothing.
Like this
<form wp="sort">
<select wp="orderby">
<option value="price">Price</option>
</select>
</form>The list inside <form wp="sort">.