Woocommerce Wordpress PHP 包装店 <ul> 项目在 <div>答案

【问题标题】：Woocomerce Wordpress PHP wrap shop <ul> items in <div>Woocommerce Wordpress PHP 包装店 <ul> 项目在 <div>
【发布时间】：2020-01-29 21:14:32
【问题描述】：

我正在构建一个主题，但遇到了一点麻烦，我正在尝试修改 /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>

如果我在我当前的函数中添加它，它似乎会破坏布局 - 这是我之前的商店循环项目。

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。我怎样才能添加额外的东西来把它包起来？

【问题讨论】：

能否分享页面截图或链接。
我已经能够使用 Jquery 和 $( ".products.columns-3" ).wrap( "
" 修复它);但是我想知道是否有办法在 php 中做到这一点

标签： php wordpress woocommerce hook-woocommerce

【解决方案1】：

在 WooCommerce 商店和档案页面上的 <ul> HTML 标记之前添加自定义类：

首先，阅读“Overriding templates via a theme”官方文档，它解释了如何通过主题覆盖 woocommerce 模板。

注意“高级主题”：在一些高级主题上，他们已经可以使用一些自定义的 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 并关闭标签

保存...你完成了。

【讨论】：

谢谢你，我一直在寻找比使用 jquery 更好的方法

【解决方案2】：

在 woocomerce 中转到模板，将所有文件从那里复制到您的主题文件夹

然后您会看到包含 loop-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' ) ); ?>">

还有一个loop-end.php

</ul>

把它改成

</ul></div>

谢谢

【讨论】：