Comentarios y reseñas con tu propio diseño

Qué obtienes

<!-- single.html: under the post -->
<section class="comments" wp="comment-list">
  <h2 class="comments__title">Comments</h2>
  <div class="comment">
    <img class="comment__avatar" src="images/avatar.png" alt="" wp="comment-avatar">
    <p class="comment__author" wp="comment-author">Anna</p>
    <p class="comment__date" wp="comment-date">October 2</p>
    <div class="comment__text" wp="comment-text">Is the pumpkin latte vegan?</div>
    <a class="comment__reply" href="#" wp="comment-reply">Reply</a>
  </div>
  <form class="comment-form" wp="comment-form">
    <div class="field" wp="comment-input-author">
      <label for="name">Name</label>
      <input type="text" id="name" class="input">
    </div>
    <div class="field" wp="comment-input-email">
      <label for="email">Email</label>
      <input type="email" id="email" class="input">
    </div>
    <div class="field" wp="comment-input-text">
      <label for="comment">Comment</label>
      <textarea id="comment" class="input"></textarea>
    </div>
    <button type="submit" class="button" wp="comment-submit">Post comment</button>
  </form>
</section>

<!-- single-product.html: reviews of a product (WooCommerce) -->
<section class="reviews" wp="review-list">
  <div class="review">
    <p class="review__author" wp="comment-author">Anna</p>
    <div class="review__stars" wp="review-rating"><div class="review__stars-fill"></div></div>
    <span class="review__badge" wp="review-verified">Verified buyer</span>
    <div class="review__text" wp="comment-text">Fruity and bright, great as a filter.</div>
  </div>
  <form class="review-form" wp="review-form">
    <div class="field" wp="review-input-rating">
      <label for="rating">Rating</label>
      <select id="rating" class="input"></select>
    </div>
    <div class="field" wp="comment-input-text">
      <label for="review">Review</label>
      <textarea id="review" class="input"></textarea>
    </div>
    <button type="submit" class="button" wp="comment-submit">Leave a review</button>
  </form>
</section>

Paso a paso

1. El bloque de comentarios

   wp="comment-list" va en el bloque bajo el texto de la entrada, en single.html. Todo lo de dentro se convierte en la plantilla de comentarios: el título, la tarjeta, el formulario.

   <section class="comments" wp="comment-list">

2. Una sola tarjeta

   Dibuja exactamente una tarjeta y marca sus partes: el avatar comment-avatar, el nombre comment-author, la fecha comment-date, el texto comment-text, el enlace comment-reply. WordPress la repite para cada comentario.

   <div class="comment">
     <img class="comment__avatar" src="images/avatar.png" alt="" wp="comment-avatar">
     <p class="comment__author" wp="comment-author">Anna</p>
     <p class="comment__date" wp="comment-date">October 2</p>
     <div class="comment__text" wp="comment-text">Is the pumpkin latte vegan?</div>
     <a class="comment__reply" href="#" wp="comment-reply">Reply</a>
   </div>

3. El formulario

   wp="comment-form" en el formulario, y las marcas de los campos en los envoltorios: comment-input-author, comment-input-email, comment-input-text. La etiqueta y el campo de dentro del envoltorio pasan juntos al tema.

   <form class="comment-form" wp="comment-form">
     <div class="field" wp="comment-input-author">
       <label for="name">Name</label>
       <input type="text" id="name" class="input">
     </div>

4. El botón

   wp="comment-submit" en el botón: el aspecto es tuyo, el envío lo hace WordPress.

   <button type="submit" class="button" wp="comment-submit">Post comment</button>

5. Reseñas de producto

   En single-product.html, el mismo método: un bloque wp="review-list", en la tarjeta las mismas marcas del comentario y, además, la valoración review-rating y la insignia review-verified.

   <div class="review__stars" wp="review-rating"><div class="review__stars-fill"></div></div>
   <span class="review__badge" wp="review-verified">Verified buyer</span>

6. El formulario de reseña

   wp="review-form" va siempre dentro del bloque de reseñas. El campo de valoración es review-input-rating: un <select> vacío recibe por sí solo las opciones del 1 al 5.

   <form class="review-form" wp="review-form">
     <div class="field" wp="review-input-rating">
       <label for="rating">Rating</label>
       <select id="rating" class="input"></select>
     </div>

Lo importante

• Los comentarios se permiten y la moderación se activa en Ajustes → Comentarios.
• Las respuestas reciben las clases tf-comment-depth-2, tf-comment-depth-3. Define la sangría con tu propio CSS. En Webflow, ponlo en Project settings → Custom code: una clase que no lleva ningún elemento se descarta al publicar, junto con su regla.
• La valoración tiene la variable --tf-rating: el ancho de la franja de estrellas de color es calc(var(--tf-rating) / 5 * 100%). Un elemento de valoración vacío muestra el número.
• La insignia review-verified solo aparece en la reseña de alguien que compró ese producto.

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.

<section class="comments" wp="comment-list">
  <div class="comment">
    <p class="comment__author">Anna</p>
    <div class="comment__text">Is the pumpkin latte vegan?</div>
  </div>
</section>

<section class="comments" wp="comment-list">
  <div class="comment">
    <p class="comment__author" wp="comment-author">Anna</p>
    <div class="comment__text" wp="comment-text">Is the pumpkin latte vegan?</div>
  </div>
</section>

<form class="comment-form" wp="comment-form">
  <label for="name">Name</label>
  <input type="text" id="name" wp="comment-input-author">
  <button type="submit" wp="comment-submit">Post comment</button>
</form>

<form class="comment-form" wp="comment-form">
  <div class="field" wp="comment-input-author">
    <label for="name">Name</label>
    <input type="text" id="name">
  </div>
  <button type="submit" wp="comment-submit">Post comment</button>
</form>

<section class="comments" wp="comment-list">
  <div class="comment">
    <p wp="comment-author">Anna</p>
  </div>
  <div class="comment">
    <p wp="comment-author">Tom</p>
  </div>
</section>

<section class="comments" wp="comment-list">
  <div class="comment">
    <p wp="comment-author">Anna</p>
  </div>
</section>

Atributos de esta receta

Más recetas