将 css 类添加到 WooCommerce 按产品属性过滤器小部件

如何解决将 css 类添加到 WooCommerce 按产品属性过滤器小部件

我正在使用 WooCommerce“按产品属性过滤”小部件在类别页面上创建产品过滤器。这是 WooCommerce 开箱即用的标准小部件。

我为每个属性多次添加了这个小部件 - 这允许用户按大小、颜色等进行过滤。

当有人点击某个属性时，页面会重新加载，然后根据他们的选择过滤产品。

但是，我想隐藏不活动的过滤器，并显示活动的过滤器。单击不活动的过滤器会将其展开打开，以便有人可以进行选择。但是在进行选择并重新加载页面后，该小部件应该保持打开状态。见下图：

基本上我想为活动过滤器添加一个类名。

我们将小部件标记更改如下：

// Change widget markup
add_filter( 'dynamic_sidebar_params',function($params) {
    $params[0]['before_widget'] = '<section class="widget">';
    $params[0]['after_widget'] = '</div></section>';
    $params[0]['before_title'] =  '<h2 class="widget-title">' ;
    $params[0]['after_title'] =  '</h2><div>' ;
    return $params;
});

在“按产品属性过滤”小部件的情况下，这会导致以下标记：

<section class="widget">
    <h2 class="widget-title">Color</h2>
    <div>
        <ul class="woocommerce-widget-layered-nav-list">
            <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term woocommerce-widget-layered-nav-list__item--chosen chosen">
                <a rel="nofollow" href="xxx/?query_type_color=or">Red</a>
                <span class="count">(2)</span>
            </li>
            ...
        </ul>
    </div>
</section>

我使用 CSS 来隐藏所有过滤器：

.widget > div { display: none; }

然后我使用 jQuery 取消隐藏活动过滤器小部件：

// Mark widget as active
$(".widget .chosen").closest(".widget > div").show();

但是，我真的不想使用 jQuery 取消隐藏活动过滤器，因为它会导致页面加载时布局发生变化。我想在活动过滤器标记上包含一个 active 类（不使用 jQuery），以便生成的标记为：

<section class="widget">
    <h2 class="widget-title">Color</h2>
    <div class="active">

到目前为止，我一直无法找到任何方法来访问小部件本身，确定它是否处于活动状态，并向其父包装器添加类名。