我正在构建一个自定义的 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>
最佳答案
在ul
上添加row
类,而不是shop-listing
div。并添加col-6 col-lg -3
classes on the 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>
关于html - 如何在 4 列中显示我的自定义 woocommerce 产品?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51009323/