Каталог товарів: сортування, картки й ціни

Що вийде

<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>

Покроково

1. Заголовок і вступний текст

   wp="post-title" і fld-area над картками читають сторінку магазину — ту, що вибрана в WooCommerce → Налаштування → Товари. Клієнт редагує її як звичайну сторінку.

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

2. Сортування

   <form wp="sort"> із <select wp="orderby"> усередині. Значення варіантів — способи сортування WooCommerce: 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. Картки товарів

   wp="products" на сітці, перша картка — зразок. У ній — посилання, картинка, назва й три блоки ціни: тема сама сховає зайві. Поруч — 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. Номери сторінок

   wp-paginate на порожньому блоці після сітки.

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

Що важливо

• Потрібен WooCommerce.
• Якщо окремого taxonomy-product-cat.html немає, рубрики товарів відкриваються цим самим шаблоном, і wp="products" покаже товари відкритої рубрики.
• Товари на іншій сторінці, наприклад на головній, виводить wp-product-query.

Типові помилки

Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.

<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>

Атрибути в рецепті

Ще рецепти