wordpress - 如何实现 WooCommerce 产品存档过滤器

Question

我希望可以问一个非常通用的顶 View 问题。我开始使用 WordPress，希望提高我的(不存在的)HTML/CSS/PHP/JS 等编码技能来定制我的网站。

我有了 WooCommerce 和 Elementor，我对我的商店页面相当满意，但我厌倦了尝试一个又一个插件来获得我需要的东西(我现在很着急，所以这可以是这是一段漫长的旅程，但我想确保我走在正确的方向上)。

所以我想知道如何才能改进过滤器和存档页面，以便我能够准确地获得我想要的内容？显然，我需要 HTML/CSS 技能，但是如何实现实际的过滤呢？

我通过 ACF 将自定义字段添加到 WooCommerce 产品中，因此理想情况下我想按此进行过滤。我还想根据这些自定义字段向各个产品(在存档页面中)添加徽章或自定义元素。

我假设我可以通过 JS(添加徽章)通过(以某种方式)查询字段值(如果我可以从 WooCommerce 中访问这些值)来执行某些操作，但是过滤是如何完成的？我是否必须重建整个 HTML(表)，或者可以通过过滤生成存档页面的输入来更智能地完成此操作(可能离这里很远......)

再说一次，我不要求确切的代码，只是想知道我是否应该尝试增加 JS 来实现此功能，和/或是否可以访问那些 WooCommerce 自定义字段(我将使用哪种方法那个)？

希望这不是一个太笼统的问题，并且对大家来说都有一定意义......

Answer 1

有两个 Hook 可供您使用产品字段和产品类别/标签创建自定义过滤器。

woocommerce_product_query

它的使用可以应用于“wp_usermeta”表中数据库中注册的所有字段(前面​​的“wp_”是安装wordpress时注册的前缀)，例如标准的Woocommerce字段或自定义字段由 woocommerce_wp_text_input 创建的例如。

add_action( 'woocommerce_product_query', 'name_of_function_to_call' );

在您的函数中，您将构建用于搜索数据库中信息的查询，这是如何搜索(或不搜索)特定价格范围内的产品的示例:

function name_of_function_to_call()
{
    $min_price = isset($_GET['min-price']) ? str_replace(",", ".", str_replace(".", "", str_replace("R$ ", "", $_GET['min-price']))) : false;
    $max_price = isset($_GET['max-price']) ? str_replace(",", ".", str_replace(".", "", str_replace("R$ ", "", $_GET['max-price']))) : false;

    if($min_price && $max_price){   
        $price_filter = array(
            'key'       => '_price',
            'value'     => array( $min_price , $max_price ),
            'compare'   => 'BETWEEN',
            'type'      => 'numeric'  
          ); 
        array_push($args, $price_filter);
    } elseif($min_price){
        $price_filter = array(
            'key'       => '_price',
            'value'     => array( $min_price , 9999999999 ),
            'compare'   => 'BETWEEN',
            'type'      => 'numeric'  
          ); 
        array_push($args, $price_filter);        
    } elseif($max_price){
        $price_filter = array(
            'key'       => '_price',
            'value'     => array( 0 , $max_price ),
            'compare'   => 'BETWEEN',
            'type'      => 'numeric'  
          ); 
        array_push($args, $price_filter);        
    }
    
    $q->set( 'meta_query', array_filter($args) );
}

在此步骤结束时，Wordpress 会将您在“meta_query”中输入的项目视为数据库搜索 SQL 中的 WHERE(如果您不理解这部分，请不要担心)。

woocommerce_product_query_tax_query

它的用途可以应用于分类法(类别)和标签，它们注册在数据库的“wp_terms”表中(前面的“wp_”是安装wordpress时注册的前缀)。要从执行中调用函数，请使用:

add_action( 'woocommerce_product_query_tax_query', 'name_of_function_to_call_for_taxonomy' );

在您的函数中，您将构建用于获取数据库中信息的查询，这是如何获取(或不获取)类别和标签的示例，其中类别存储产品品牌及其颜色标签:

function name_of_function_to_call_for_taxonomy($q='')
{
    $brand = isset($_GET['brand']) ? $_GET['brand'] : false;
    $color = isset($_GET['color']) ? $_GET['color'] : false;
    $tax_query = array();

    if($brand){
        $taxonomy = 'product_cat';
        $terms = array( $brand );

        $tax_query[] = array(
            'taxonomy' => $taxonomy,
            'field'    => 'term_id', // Or 'slug' or 'term_id'
            'terms'    => $terms,
        );
    }

    if($color){
        $taxonomy = 'product_tag';
        $terms = array( $color );

        $tax_query[] = array(
            'taxonomy' => $taxonomy,
            'field'    => 'term_id', // Or 'slug' or 'term_id'
            'terms'    => $terms,
        );
    }

    return array_filter($tax_query);
}

搜索表单

要传递字段，只需创建一个标准表单，在上面的示例中，它将类似于:

<form action="" method="GET" role="search">
    <div class="ac-filters-main">
        <div>
            <label>Price Min</label>
            <input id="price_min" class="ac-valid-price" type="text" name="min-price" value="<?php if(isset($_GET['min-price'])){ echo $_GET['min-price']; }?>" placeholder="Price Min">
        </div>
        <div>
            <label>Price Max</label>
            <input id="price_max" class="ac-valid-price" type="text" name="max-price" value="<?php if(isset($_GET['max-price'])){ echo $_GET['max-price']; }?>" placeholder="Price Max">
        </div>
        <?php 
            $categories = get_terms('product_cat');
            if($categories){ 
        ?>
            <div>
                <label>Brand</label>
                <select name="brand">
                    <option value="">Select</option>
                    <?php
                        foreach ($categories as $k => $v) {
                    ?>
                        <option value="<?=$v->term_id?>" <?php if(isset($_GET['brand']) && $_GET['brand'] == $v->term_id){ echo'selected=""'; } ?>><?=$v->name?></option>
                    <?php } ?>
                </select>
            </div>
        <?php } ?>
        <?php       
            $colors = get_terms('product_tag');
            if($colors){
        ?>
            <div>
                <label>Color</label>
                <select name="color">
                    <option value="">Select</option>
                    <?php
                        foreach ($colors as $k => $v) {
                    ?>
                        <option value="<?=$v->term_id?>" <?php if(isset($_GET['color']) && $_GET['color'] == $v->term_id){ echo'selected=""'; } ?>><?=$v->name?></option>
                    <?php } ?>
                </select>
            </div>
        <?php } ?>
    </div>
    <div class="ac-filters-bottom">
        <input type="text" name="s" value="<?php if(isset($_GET['s'])){ echo $_GET['s']; }?>" placeholder="I'm looking for..." class="ac-search-input">
        <button type="submit" class="ac-search-btn">Search</button>
    </div>
</form>