Woocommerce 自定义店铺页面布局答案

【问题标题】：Woocommerce custom shop page layoutWoocommerce 自定义店铺页面布局
【发布时间】：2019-12-22 11:57:17
【问题描述】：

我已根据我的要求修复了 Woocommerce 插件中的所有内容，但我找不到一种解决方案。 Woocommerce默认商店页面产品循环代码是这样的

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我想让它把这段代码改成这个

<div class="row">
  <div class="col-md-4">
     // Product Loop Card here
  </div>
  <div class="col-md-4">
     // Product Loop Card here
  </div>
  <div class="col-md-4">
     // Product Loop Card here
  </div>
  <div class="col-md-4">
     // Product Loop Card here
  </div>
  // etc etc etc
</div>

出现问题的屏幕截图

哪个函数/过滤器/钩子或自定义模板可以做到这一点？请帮帮我

【问题讨论】：

有多种方法可以解决这个问题，但就可扩展性和可扩展性而言，这被认为是“不良做法”。几乎所有 wordpress/woocommerce 开发人员都遵循标准蓝图（即标准 html 标记、类、id 等）。用你自己的东西替换 wordpress/woocommerce 的标准蓝图，只会破坏一切，并在未来创造更多的错误！此外，您将无法使用其他开发人员插件/代码，因为您没有使用标准的 woocommerce，而插件会挂接到标准标记中。这根本不是一个好主意！

标签： php wordpress woocommerce wordpress-theming hook-woocommerce

【解决方案1】：

您需要访问 woocommerce/loop 文件夹

里面有两个loop-strat和loop-end文件

删除ul，如果使用bootstrap输入以下代码

<div class="container">
    <div class="row">

在loop-end文件中你需要关闭div

</div>
</div>

现在您将在内容产品文件中创建循环，我将在此处留下一个文件示例。

<div class="col-md-3 col-sm-6" >

    <div class="product-grid6">
        <div class="product-image6">

            <?php do_action('woocommerce_before_shop_loop_item_title');?>
        </div>
        <div class="product-content">
            <h3 class="title"><?php do_action('woocommerce_shop_loop_item_title');?></h3>
            <div class="price">
                <span>          <?php do_action('woocommerce_after_shop_loop_item_title');?>
</span>
            </div>

        </div>
        <ul class="social">
            <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li>
            <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>
            <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li>
        </ul>
    </div>

</div>

【讨论】：

【解决方案2】：

您必须更改名为

的文件

content-product.php

你可以在这里买到

wp-content\plugins\woocommerce\templates

【讨论】：

我已经将 woocommerce 插件文件夹中的模板文件夹复制到我的主题文件夹中，并将其重命名为“woocommerce”。现在，我必须更改文件名还是其他？
您不能更改文件名，否则将无法正常工作。您只需更改文件中的代码，或者您可以像这样添加钩子 ``` add_action( 'woocommerce_before_shop_loop', 'storefront_product_columns_wrapper', 40 );功能 storefront_product_columns_wrapper() { echo '
'; }

【解决方案3】：

只需更改以下模板，将其覆盖到您的主题中 -

loop/loop-start.php -> 移除<ul> 标签并替换为<div class="row products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

loop/loop-end.php -> 移除</ul> 标签并替换为</div>

content-product.php -> 1. 删除<li <?php wc_product_class( '', $product ); ?>> 标签并替换为<div class="col-md-4"> 2.去掉</li>标签，换成</div>

【讨论】：

我做了但是看起来很难看，看上面的结果截图，我已经更新了帖子
@Zain 似乎是 CSS 问题。首先确保你已经得到了上述的实际结构。如果没问题，那么您必须通过 css 修复它。