Wordpress Loop - сделайте новый слайд с 4 продуктами в

Question

Я пытаюсь создать собственный слайдер, используя цикл WP и flexslider. Мне удалось получить слайдер с продуктами, но в настоящее время он отображает только 1 на слайд, а не 4 на слайд, который я хотел бы.

<div id="slider" class="flexslider">
  <ul class="slides">
    <?php
      $args = array( 'post_type' => 'product',
                                    'post_per_page' => 12              
                   );

      $loop = new WP_Query( $args );
      $counter = 0;
      while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
      if($counter % 4 == 0) : ?>
        <li>
          <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
      <?php
        if (has_post_thumbnail( $loop->post->ID ))
          echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');
        else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"/>';
      ?>
      <span class="price">
        <h2 class="woocommerce-loop-product__title">
          <?php the_title(); ?>
        </h2>
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol"></span>
        <?php echo $product->get_price_html(); ?>
        <br />
      </span>
    </a>
  </span>

  <?php
    woocommerce_template_loop_add_to_cart( $loop->post, $product ); 

    endif;

    $counter++;

    endwhile; ?>
  </li>
  <?php wp_reset_query(); ?>
</ul>
</div>

Я близко, но я уверен, что что-то упустил. Мне нужно 4 товара в каждом элементе списка.

Answer 1

Одна вещь, которую я сразу замечаю, это то, что вы открываете свой тег li внутри «while», закрываете свой тег li за пределами «while», это может быть так просто, как, может быть, проверить HTML и посмотреть, есть ли что-нибудь остальное.

Хорошо, вот упрощенный способ ее решения, вы можете изменить его, чтобы сделать его немного более аккуратным, но логика есть:

<?php
$counter = 0;
while ( $loop->have_posts() ) : $loop->the_post(); global $product;?>

    <?php if($counter % 4 == 0): echo '<li>'; endif; ?>
        <a href="#">WooCommerce Product</a>
    <?php if($counter % 4 == 4): echo '</li>'; endif; ?>

    <?php
    $counter++;
    if($counter === 4) : $counter = 0; endif;

endwhile;
?>