A product catalogue: sorting, cards and prices

What you get

<body wp-fields-group="Shop">
<header class="shop-hero">
  <h1 wp="post-title">Beans</h1>
  <p class="shop-hero__lead" fld-area="Shop lead">Roasted on Mondays, shipped on Tuesdays.</p>
</header>
<form class="sort" wp="sort">
  <select class="sort__select" wp="orderby">
    <option value="menu_order">Default</option>
    <option value="price">Price: low to high</option>
  </select>
</form>
<div class="beans" wp="products">
  <div class="bean-card">
    <a href="#" wp="post-link"><img src="images/bean.jpg" alt="" wp="post-image"></a>
    <h3><a href="#" wp="post-title-link">Ethiopia Yirgacheffe</a></h3>
    <div class="bean-card__prices">
      <span wp="product-price">$14.00</span>
      <span wp="product-price-sale">$12.00</span>
      <span class="is--old" wp="product-price-regular">$14.00</span>
    </div>
  </div>
</div>
<div class="beans__empty" wp="no-results">No beans match.</div>
<div class="pagination" wp-paginate="mid_size=1"></div>
</body>

Step by step

1. Heading and intro

   wp="post-title" and fld-area above the cards read the shop page, the one chosen in WooCommerce → Settings → Products. The client edits it like any page.

   <h1 wp="post-title">Beans</h1>
   <p class="shop-hero__lead" fld-area="Shop lead">Roasted on Mondays, shipped on Tuesdays.</p>

2. Sorting

   <form wp="sort"> with a <select wp="orderby"> inside. The option values are WooCommerce sort orders: menu_order, price, price-desc, date, popularity, rating.

   <form class="sort" wp="sort">
     <select class="sort__select" wp="orderby">
       <option value="menu_order">Default</option>
       <option value="price">Price: low to high</option>
     </select>
   </form>

3. Product cards

   wp="products" on the grid; the first card is the sample. Inside are the link, image, name and three price blocks: the theme hides the ones that do not apply. Next to it, wp="no-results".

   <div class="beans" wp="products">
     <div class="bean-card">
       <a href="#" wp="post-link"><img src="images/bean.jpg" alt="" wp="post-image"></a>
       <h3><a href="#" wp="post-title-link">Ethiopia Yirgacheffe</a></h3>
       <div class="bean-card__prices">
         <span wp="product-price">$14.00</span>
         <span wp="product-price-sale">$12.00</span>
         <span class="is--old" wp="product-price-regular">$14.00</span>
       </div>
     </div>
   </div>
   <div class="beans__empty" wp="no-results">No beans match.</div>

4. Page numbers

   wp-paginate on an empty block after the grid.

   <div class="pagination" wp-paginate="mid_size=1"></div>

What matters

• Needs WooCommerce.
• Without a separate taxonomy-product-cat.html, product categories open with this same template, and wp="products" shows the products of the open category.
• Products on another page, such as the home page, come from wp-product-query.

Common mistakes

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

<div class="beans" wp-query="'post_type'=>'product','posts_per_page'=>12">
  <div class="bean-card">
    <h3 wp="post-title">Ethiopia Yirgacheffe</h3>
  </div>
</div>

<div class="beans" wp="products">
  <div class="bean-card">
    <h3 wp="post-title">Ethiopia Yirgacheffe</h3>
  </div>
</div>

<select class="sort__select" wp="orderby">
  <option value="price">Price: low to high</option>
</select>

<form class="sort" wp="sort">
  <select class="sort__select" wp="orderby">
    <option value="price">Price: low to high</option>
  </select>
</form>

Attributes in this recipe

More recipes