Как вывести товары на главной странице магазина на Woocommerce?

Question

[Станислав]

Подскажите пожалуйста, как вывести товары на главной странице?
(ключевой момент - запускать цикл в каждой карточке товара или как-то обходить баннеры)

- магазин сделан на Woocomerce
- макет главной странице имеет сложную структуру (использую css grid area)


- уместно ли запускать цикл вывода товаров в каждой карточке? Как здесь

<div class="s312_card card">
                <?php
                    $loop = new WP_Query( array(
                      'post_type' => 'product',
                      'posts_per_page' => 1,
                      'orderby' => 'menu_order',
                      'order' => 'ASC',
                      ));
                      while ( $loop->have_posts() ): $loop->the_post(); ?>
                     
                <div class="card__img">
                    <?php the_post_thumbnail("thumbnail-215x300"); ?>
                </div>
                <div class="card__info">
                    <h3><?php the_title(); ?></h3>
                    <a href=""></a>
                    <div class="card__btns">
                        <span><?php _e("Price:","examp"); ?>
                              <?php woocommerce_template_loop_price(); ?>
                        </span>
                        <button type="button"><?php woocommerce_template_loop_add_to_cart(); ?> +</button>
                    </div>
                </div>
                <?php endwhile; ?>
            </div>

- мне было бы очень удобно запускать цикл в каждой карточке товара, не знаю как это сделать (получается вывести только один и тот же товар, самый первый)

- не хотелось бы переделывать верстку, css имеет структуру (не спрашивайте почему я это все нагородил:) )

.s3 .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-template-areas: "s311 s311 s311 s311 s311 s311 s311 s311 s312 s312 s313 s313" "s321 s321 s321 s321 s321 s321 s321 s321 s321 s321 s321 s321" "s331 s331 s331 s332 s332 s332 s333 s333 s333 s334 s334 s334" "s341 s341 s341 s341 s341 s341 s341 s341 s342 s342 s343 s343" "s351 s351 s351 s352 s352 s352 s353 s353 s353 s353 s353 s353" "s361 s361 s361 s362 s362 s362 s353 s353 s353 s353 s353 s353" "s371 s371 s371 s372 s372 s372 s373 s373 s373 s374 s374 s374" "s381 s381 s381 s381 s381 s381 s381 s381 s381 s381 s381 s381";
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 3rem;
}

Заранее благодарю!

Comments

[Михаил Лисецкий]

На вскидку можно вывести сначала нужное количество товаров одним циклом и вторым циклом вывести банеры а потом с помощью css grid указать в каком порядке элементы расположить в сетке.

[Станислав]

Михаил Лисецкий, спасибо большое! Теперь все понял, присвою через псевдоклассы каждой карточке позицию