Вывод товаров «3 в ряд»?

Question

[Андрей Димаков]

Доброго времени суток! В общем, проблема такова: товары располагаются не 3 в ряд, а каждый в отдельном ряду
Как это выглядит:
Как должно выглядеть:
Как выводит php:

<div class="container catalog"> 
<div class="row shoes">
<a class="col-4 fash" href="#">
<img src="#">
</a>
</div> (Дальше идет повторение второго div'a)

Как надо вывести правильно:

<div class="container catalog"
   <div class="row shoes">
      <a class="col-4 fash" href="#">
           <img src="#">
     </a>
     <a class="col-4 fash" href="#>
            <img src="#" height="500">
     </a>
     <a class="col-4 fash" href="#>
        <img src="#" height="500">
</a>

Через wp_query не совсем понимаю, как это сделать:

<?php $loop = new WP_Query( array(
'post_type' => 'product',
'posts_per_page' => 6,
'orderby' => 'menu_order',
'order' => 'ASC',
));
?>
<div class="container catalog"> 
<?php while ( $loop->have_posts() ): $loop->the_post(); ?>
<div class="row shoes">
<a class="col-4 fash" href="<?php the_permalink(); ?>">
<img src="<?php $id = get_post_thumbnail_id(); $url = wp_get_attachment_image_src($id, true); echo $url[0];?>">
</a>
</div>
<div class="row text">
<div class="col-4">
<p class="name">
<?php the_title(); ?>
</p>
<?php the_content(); ?>
<p class="price">
<?php _e("Цена:","examp"); ?>
<?php woocommerce_template_loop_price(); ?>
</p>
<?php woocommerce_template_loop_add_to_cart(); ?>
</div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>

Answer 1

[Олег]

<div class="container catalog">
	<div class="row shoes">
		<?php while ( $loop->have_posts() ): $loop->the_post(); ?>
		<div class="col-4">
                       // картинка
			<a class="col-12 fash" href="<?php the_permalink(); ?>">
				<img src="<?php $id = get_post_thumbnail_id(); $url = wp_get_attachment_image_src($id, true); echo $url[0];?>">
			</a>
                      // название товара
			<p class="name">
				<?php the_title(); ?>
			</p>
                     // описание товара
			<div class="col-12">
				<?php the_content(); ?>
			</div>
                     // цена товара
			<p class="price">
				<?php _e("Цена:","examp"); ?>
				<?php woocommerce_template_loop_price(); ?>
			</p>
                      // кнопка добавить в корзину
			<?php woocommerce_template_loop_add_to_cart(); ?>
		</div>
		<?php endwhile; wp_reset_postdata(); ?>
	</div>
</div>

P.S. из-за
<div class="col-4">
выделенного под блок товарной карточки на мобилках будет фигово смотреться, имеет смысл добавить туда col-sm-12 col-md-6 классы ещё.

P.P.S.Порядок блоков сами поправьте теперь не сложно разобраться

Comments

[Андрей Димаков]

Спасибо огромное)