wordpress - Woocommerce 产品列表 - 将 替换为 Bootstrap div

Question

我整天都在寻找使用 Bootstrap 网格制作 woocommerce 模板的适当解决方案。我总是尝试使用钩子(Hook)进行更改，因为我认为这是最好的方法。

Woocommerce 展示产品列表如下:

<ul class="products">

<li class="post-24 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin product_tag-test first instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-30 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin  instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-31 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin  instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-32 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin last instock shipping-taxable purchasable product-type-simple"></li>

</ul>

我想将其更改为正确的 Bootstrap 网格。
类似的东西:

<div class="row">

<div class="col-md3">product</li>

<div class="col-md3">product</li>

<div class="col-md3">product</li>

<div class="col-md3">product</li>

</ul>

可以通过函数 woocommerce_product_loop_start() 将 ul 更改为 div，但是如何更改/替换 li class=".... 到 div class="col-md.... ?

预先感谢您的帮助

Answer 1

因此，您需要使用子主题中的模板文件覆盖 woocommerce 模板文件。
FTP 进入您的安装，转到 wp-content/plugins/woocommerce/templates ，复制 content-product.php，将该文件复制到您的子主题中的一个名为“woocommerce”的新文件夹中。
然后更改<ul <?php post_class(); ?>>到你的 div 和你想要的任何类。
如果您对覆盖 woocommerce 模板文件有疑问，请查看:https://wordpress.stackexchange.com/questions/256088/how-to-override-woocommerce-template-files