Wordpress包装商店<ul>项目在<div>中

Question

我正在构建一个主题，我遇到了一点小麻烦，我正在尝试修改/shop页面模板。

我当前的HTML输出如下：

<div class="row">
<section id="nav_menu-3" class="col-md-3"> [nav menu items go here] </div>  // this is a sidebar widget
<ul class="products columns-3"> <li> [woocomerce products go here]</li></ul> 
</div>

我已经能够添加第一行使用钩子- add_action( 'woocommerce_before_shop_loop')和后商店循环。

现在我想将类包装在另一个类中，因此输出如下所示：

<div class="row">
<section id="nav_menu-3" class="col-md-3"> [nav menu items go here] </div>  // this is a sidebar widget
<div class="col-md-8"> // start new div
<ul class="products columns-3"> <li> [woocomerce products go here]</li></ul> 
</div> // end new div
</div>

如果我将它添加到我的当前函数中，它似乎破坏了布局--这是我的Add循环项目。

function  woocommerce_product_columns_wrapper() {
    $columns =  woocommerce_loop_columns();
    echo '<div class="row">';       
 }

}
add_action( 'woocommerce_before_shop_loop', ' woocommerce_product_columns_wrapper', 40 
);

after_shop_loop也使用相同的函数来关闭div。我怎么才能把额外的钱加起来呢？

Answer 1

若要在<ul>商店和归档页上的WooCommerce HTML标记之前添加自定义类，请执行以下操作：

首先，阅读"通过主题覆盖模板“官方文档，这说明了如何通过主题覆盖woocommerce模板。

用于“高级主题”的Note：在一些高级主题上，它们可以使用一些定制的WooCommerce模板，因此您必须使用它们。如果您使用的是子主题，请将相关模板复制到您的子主题，同时尊重相同的文件夹层次结构。

一旦理解了这一点，要编辑的相关模板就是loop/loop-start.php。

打开/编辑它并替换：

 <div class="col-md-8">
    <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

现在，打开loop-end.php并关闭标记

保存…你完了。

Answer 2

在woocomerce中，转到模板中，将所有文件复制到主题文件夹中。

然后，您会看到循环文件夹包含循环-start.php代码，如下所示

<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

您可以将此更改为

<div class="col-md-8">
 <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

还有一个循环-end.php

</ul>

将此更改为

</ul></div>

谢谢