Why is the product displayed three times?

Question

WordPress

I make a request through a loop, and three identical products are displayed.

$args = array(
    'posts_per_page' => -1,
    'post_type' => 'product',
    'post_status'         => 'publish',
    'ignore_sticky_posts' => 1,
    	'order'               => 'DESC',
    'tax_query' => array(
      array(
        'taxonomy' => 'product_tag',
        'field' => 'slug',
        'terms' => 'popular',
      ),
    ),
  );


  $loop = new WP_Query($args);

  $product_count = $loop->post_count;
  

  if ($product_count > 0) :
  echo '<div class="swiper-wrapper">';
    while ($loop->have_posts()) : $loop->the_post();

      global $product;

      echo '
      <div class="swiper-slide">
      <a href="#">
        <div class="product-slide">
          <div class="product-hearth"><svg class="product-global__hearth"><use xlink:href="img/sprite.svg#hearth-icon"></use></svg></div>
          <div class="product-slide-img"><img src="img/product-img.jpg" alt="" class="product-slide__img"></div>
          <div class="product-global__footer">
            <p class="product-global__autor">Ольга Примаченко</p>
            <h3 class="product-global__title">К себе нежно</h3>
            <div class="product-global__interface">
              <div class="product-global__price">790</div>
              <div class="product-global__cart"><svg class="product-global__cart"><use xlink:href="img/sprite.svg#cart-icon"></use></svg></div>
            </div>
          </div>
        </div>
      </a>
      </div>
    ';
    endwhile;
  echo '</div>';
  else :

    _e('No product matching your criteria.');

  endif; // endif $product_count > 0

  return ob_get_clean();

What could be the reason?

Answer 1

You have this piece displayed three times

echo '
      <div class="swiper-slide">
      <a href="#">
        <div class="product-slide">
          <div class="product-hearth"><svg class="product-global__hearth"><use xlink:href="img/sprite.svg#hearth-icon"></use></svg></div>
          <div class="product-slide-img"><img src="img/product-img.jpg" alt="" class="product-slide__img"></div>
          <div class="product-global__footer">
            <p class="product-global__autor">Ольга Примаченко</p>
            <h3 class="product-global__title">К себе нежно</h3>
            <div class="product-global__interface">
              <div class="product-global__price">790</div>
              <div class="product-global__cart"><svg class="product-global__cart"><use xlink:href="img/sprite.svg#cart-icon"></use></svg></div>
            </div>
          </div>
        </div>
      </a>
      </div>
    ';

You need to dynamically take the title, link, image, price and author from the $loop using the functions the_title(), the_post_thumbnail(), the_permalink()etc.
It's even better to use wc_get_template_part( 'content', 'product' );. I advise you to find this template, disassemble and redo your code according to the woocommerce specification
global $product;and you can safely remove it from your code, and add return ob_get_clean();a checkif ( $loop->have_posts() ) { ... }