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

Question

我整天都在寻找使用 bootstrap 网格制作 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>

我想将其更改为正确的 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，但是我如何 change/replace li class="... . 到 div class="col-md.... ?

提前感谢您的帮助

Answer 1

因此，您需要使用子主题中的模板文件覆盖 woocommerce 模板文件。

FTP 进入您的安装，转到 wp-content/plugins/woocommerce/templates，复制内容-product.php，在名为 'woocommerce' 的新文件夹中复制子主题中的该文件。

然后将 <ul <?php post_class(); ?>> 更改为您的 div 以及任何您想要的 class。

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

Answer 2

更改它的简单方法是覆盖 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/

Answer 3

您可以更改 <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();
}

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

Woocommerce products list - replace <ul><li> to bootstrap div

wordpress

hook

action

twitter-bootstrap

woocommerce