Woocommerce产品列表-将<ul> <li>替换为bootstrap div

Question

我整天都在寻找一种使用引导网格制作woocommerce模板的正确解决方案。我总是尝试用钩子进行更改，因为我认为这是最好的方法。

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>

我想将此更改为适当的引导网格。像这样：

<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”中。

然后将更<li <?php post_class(); ?>>改为div和所需的任何类。

如果您对覆盖woocommerce模板文件有疑问，请查看以下网址：https ://wordpress.stackexchange.com/questions/256088/how-to-override-woocommerce-template-files

Answer 2

您可以<ul>在不编辑模板的情况下进行更改，只需在functions.php中使用它：

/** 
 * Add Custom WooCommerce Loop Start
 */
function woocommerce_product_loop_start( $echo = true ) {
    ob_start();
    echo '<div class="something">'; 
    if ( $echo )
        echo ob_get_clean();
    else
        return ob_get_clean();
}