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();
}

Answer 3

更改它的简单方法是覆盖woocomerce模板。 Ul标签是由loop-start.php生成的您可以在content / plugins / woocommerce / templates / loop / loop-start.php上找到它如果要更改循环起点和终点，则必须复制以下文件：wp-content / plugins / woocommerce / templates / loop / loop-start.php到主题文件夹中-> wp-content / themes / mysuperchildtheme / woocommerce / loop /

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

3 个答案: