Как показать мои собственные продукты WooCommerce в 4 колонках? - PullRequest
Новая
       14

Как показать мои собственные продукты WooCommerce в 4 колонках?

0 голосов
/ 24 июня 2018

Я создаю пользовательскую страницу магазина woocommerce.Прямо сейчас они отображаются в одном столбце, один за другим.

Но я хочу показать товары в 4 колонках.Пожалуйста помоги.

Вот мой код 

<section class="text-center jp-p-60">

      <div class="row shop-listing">

        <div class="col-6 col-lg-3 jp-p-15">
          <div class="bg-center">
              <?php /* image*/
        do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
            <b class="btn btn-outline-white rounded-0 font-weight-bold"><?php /* price*/
        do_action( 'woocommerce_after_shop_loop_item_title' );
        ?></b>
          </div>
        </div>

      </div>



    </section>

1 Ответ

0 голосов
/ 24 июня 2018

Добавьте класс row в ul вместо shop-listing div. И добавьте col-6 col-lg-3 классы в section вместо .jp-p-15 div класса. 

 <ul class="products columns-4 row">

   <section class="col-6 col-lg-3 text-center jp-p-60">

  <div class="shop-listing">

    <div class="jp-p-15">
      <div class="bg-center">
          <?php /* image*/
    do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>
        <b class="btn btn-outline-white rounded-0 font-weight-bold"><?php /* price*/
    do_action( 'woocommerce_after_shop_loop_item_title' );
    ?></b>
      </div>
    </div>

  </div>
</ul>


</section>


.abc {}
<link rel="stylesheet" id="woocommerce-layout-css" href="https://inprogress.duniya.biz/theme/wp-content/themes/jxta/css/main.css" media="all">
<section class="text-center jp-p-60">

  <div class="row shop-listing">

    <div class="col-6 col-lg-3 jp-p-15">
      <div class="bg-center">
        <img src="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg 300w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-100x100.jpg 100w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-150x150.jpg 150w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-250x250.jpg 250w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-120x120.jpg 120w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6.jpg 500w"
          sizes="(max-width: 300px) 100vw, 300px"> <b class="btn btn-outline-white rounded-0 font-weight-bold">
	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span></span>
</b>
      </div>
    </div>

    <div class="col-6 col-lg-3 jp-p-15">
      <div class="bg-center">
        <img src="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg 300w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-100x100.jpg 100w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-150x150.jpg 150w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-250x250.jpg 250w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-120x120.jpg 120w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6.jpg 500w"
          sizes="(max-width: 300px) 100vw, 300px"> <b class="btn btn-outline-white rounded-0 font-weight-bold">
	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span></span>
</b>
      </div>
    </div>

    <div class="col-6 col-lg-3 jp-p-15">
      <div class="bg-center">
        <img src="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg 300w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-100x100.jpg 100w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-150x150.jpg 150w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-250x250.jpg 250w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-120x120.jpg 120w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6.jpg 500w"
          sizes="(max-width: 300px) 100vw, 300px"> <b class="btn btn-outline-white rounded-0 font-weight-bold">
	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span></span>
</b>
      </div>
    </div>
    <div class="col-6 col-lg-3 jp-p-15">
      <div class="bg-center">
        <img src="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-300x300.jpg 300w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-100x100.jpg 100w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-150x150.jpg 150w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-250x250.jpg 250w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6-120x120.jpg 120w, https://inprogress.duniya.biz/theme/wp-content/uploads/2018/05/p6.jpg 500w"
          sizes="(max-width: 300px) 100vw, 300px"> <b class="btn btn-outline-white rounded-0 font-weight-bold">
	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span></span>
</b>
      </div>
    </div>



  </div>



</section>
...