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

【问题标题】：How to show my custom woocommerce products in 4 columns?如何在 4 列中显示我的自定义 woocommerce 产品？
【发布时间】：2018-12-03 04:39:15
【问题描述】：

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

【问题讨论】：

标签： html css wordpress woocommerce custom-wordpress-pages

【解决方案1】：

在ul 上添加row 类，而不是shop-listing div。并在section 上添加col-6 col-lg-3 类而不是.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>

【讨论】：

谢谢。但我也想显示当所有者添加产品时，它会自动出现在此页面上。
我不明白我该如何提供帮助。我的回答没有解决你原来的问题吗？
目前该页面上有 13 个产品。当我添加另一个产品时，将有 14 个产品，依此类推。我希望它们显示在 4 列中。这就是问题所在。通过使用我的代码，我可以在该页面上添加产品，但我希望它们分四列。
如果您按照我的要求进行操作，它应该会自动显示在 4 列中。
您的代码以静态方式显示 4 列。你能给我一个解决方案如何将它发布在一个行 div 中。我不太擅长这种基于列的 css 相关问题。