Un catálogo de productos: orden, tarjetas y precios

Qué obtienes

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

Paso a paso

1. Título e introducción

   wp="post-title" y fld-area sobre las tarjetas leen la página de la tienda, la que está elegida en WooCommerce → Ajustes → Productos. El cliente la edita como cualquier página.

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

2. Orden

   <form wp="sort"> con un <select wp="orderby"> dentro. Los valores de las opciones son los criterios de orden de 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. Tarjetas de productos

   wp="products" en la cuadrícula; la primera tarjeta es el patrón. Dentro, el enlace, la imagen, el nombre y tres bloques de precio: el tema oculta por su cuenta los que sobran. Al lado, 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. Números de página

   wp-paginate en un bloque vacío después de la cuadrícula.

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

Lo importante

• Necesita WooCommerce.
• Si no hay un taxonomy-product-cat.html aparte, las categorías de productos se abren con esta misma plantilla, y wp="products" muestra lo que hay en la categoría abierta.
• En otra página, como la de inicio, los productos salen con wp-product-query.

Errores frecuentes

El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.

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

Atributos de esta receta

Más recetas