如何在 4 列中显示我的自定义 woocommerce 产品？

Question

我正在构建自定义 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>

Answer 1

在 ul 上添加 row class，而不是在 shop-listing div.And 上添加 col-6 col-lg-3 class section 而不是 .jp-p-15 class 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>

如何在 4 列中显示我的自定义 woocommerce 产品？

How to show my custom woocommerce products in 4 columns?

html

css

wordpress

custom-wordpress-pages

woocommerce