在产品页面的 WooCommerce 过滤器中添加属性名称作为类答案

【问题标题】：Add attribute name as class in WooCommerce filter on product page在产品页面的 WooCommerce 过滤器中添加属性名称作为类
【发布时间】：2020-07-23 12:09:58
【问题描述】：

我在我的 Woocommerce 商店中创建类别页面。我想在顶部显示过滤器。所以我在我的functions.php文件中注册了一个新的侧边栏，并把代码 <?php dynamic_sidebar( 'filters-1' ); ?> 在 breadcrumb.php 模板文件中。到目前为止，一切顺利。

现在的想法是将过滤器属性（例如：BLACK、WHITE、RED）转换为彩色圆圈。所以我认为最好的方法是将颜色属性分类添加为<li> 类，然后在 CSS 中做一些魔术。

但问题是如何将具有属性名称/分类的变量添加到属性的<li> 类中。这是 HTML 输出：

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">
        <a rel="nofollow" href="/?filter_color=black">Black</a> <span class="count">(2)</span>
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">
        <a rel="nofollow" href="/?filter_color=white">White</a> <span class="count">(1)</span>
    </li>
</ul>

我知道有一个插件可以做到这一点，但我不喜欢插件。 :) 我更喜欢写一些。我认为这里不需要额外的插件。

【问题讨论】：

标签： php wordpress woocommerce wordpress-theming

【解决方案1】：

之前：

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">red</a> 
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">green</a> 
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">blue</a> 
    </li>
</ul>

之后：

document.body.onload = function() {
  var list = document.getElementsByClassName('wc-layered-nav-term');

  for (i = 0; i < list.length; i++) {
    var name = 'pa_'; // Prefix to class
    name += list[i].firstElementChild.innerHTML;
    list[i].classList.add(name);
  }
}();

/* This is just sample code */
.pa_blue {
  color: blue;
}

.pa_green {
  color: green;
}

.pa_red {
  color: red;
}
/* --- */

<ul class="woocommerce-widget-layered-nav-list">
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">red</a>
  </li>
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">green</a>
  </li>
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">blue</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

您有过滤器 woocommerce_layered_nav_term_html

因此，您可以在插件或主题的 functions.php 中添加该过滤器，然后将相应的样式应用于刚刚添加的每个跨度类。

add_filter('woocommerce_layered_nav_term_html', 'custom_woocommerce_layered_nav_term_html', 10, 4);
    function custom_woocommerce_layered_nav_term_html( $term_html, $term, $link, $count ){ 
        return '<span class="'.strtolower($term->slug).'"></span> '.$term_html;
    }

这将使用您的属性名称的类写入一个标签，它将应用于分层导航过滤器中的所有属性。为了仅将其应用于颜色属性，我想您可以这样做（考虑到属性的名称是“颜色”）：

function custom_woocommerce_layered_nav_term_html( $term_html, $term, $link, $count ){ 
if($term->taxonomy=='pa_color'){
        $newterm_html='<span class="'.strtolower($term->slug).'"></span> '.$term_html;
    } else {
        $newterm_html=$term_html;
    }
    return $newterm_html;
}

【讨论】：