给网站woocommerce产品添加多属性筛选功能代码实现

摘要：// 注册自定义筛选表单功能和短代码 [product_search_form] function custom_product_search_form { // 获取产品分类 $categories = get_terms(array( 'taxonomy'

继续分享wordpress外贸建站教程，一个复杂的woocommerce产品自定义筛选功能实现方法。之前的一个产品展示型wordpress外贸建站项目中，客户想在网站首页实现上图中这种产品筛选功能，可通过产品分类、品牌及其它属性进行产品筛选，筛选后跳转到产品搜索页。

实现方法

这个功能看似简单，但真正在做时还是比较麻烦的。想在woocommerce产品目录或产品详情页实现这样的功能，有相关功能的主题和插件比较多，相对还算容易

但在网站首页或其它页面实现这种产品筛选功能就比较麻烦了。悦然wordpress建站尝试过高级主题及elemenotr自带的搜索功能，都实现不了，也用过其它一些搜索或elementor扩展插件，基本都不行，最多就只能实现按分类搜索筛选，也有一些插件能初步实现，但是效果不完整，只能在产品目录或产品详情页起作用。

所以最终得出结论，只能使用代码实现。

可能因为这是一个非常规的用户需求，所以没有这样的插件，但我们可以自己写一个插件，或者是代码，这里悦然wordpress建站就把功能实现的代码给大家分享出来，大家可自行参考使用，但你直接拿去用肯定是不行的，要根据你自己的网站做相应的修改，这个就自己去研究吧。

// 注册自定义筛选表单功能和短代码 [product_search_form] function custom_product_search_form { // 获取产品分类 $categories = get_terms(array( 'taxonomy' => 'product_cat', 'hide_empty' => true, )); // 获取品牌 $brands = get_terms(array( 'taxonomy' => 'product_brands', 'hide_empty' => true, )); // 获取 Year 属性 $years = get_terms(array( 'taxonomy' => 'pa_years', 'hide_empty' => false, )); // 获取 Working Hour (H) 属性 $working_hours = get_terms(array( 'taxonomy' => 'pa_working-hour', 'hide_empty' => false, )); ob_start; // 开启输出缓冲区 ?> " target="_blank" style="display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;"> EQUIPMENT All Equipment term_id); ?>"> name); ?> BRAND All term_id); ?>"> name); ?> YEARS All term_id); ?>"> name); ?> WORKING HOUR(H) All term_id); ?>"> name); ?> SEARCH EQUIPMENT .filter-field { flex: 1; /* 使每个筛选框占据相同的空间 */ min-width: 150px; /* 最小宽度，可以根据需求调整 */ } select { width: 100%; /* 使下拉框全宽 */ padding: 5px; /* 设置内边距为5px */ border: none; /* 去掉边框 */ border-radius: 4px; /* 边角圆滑 */ height: 40px; /* 设置固定高度 */ box-sizing: border-box; /* 包含内边距和边框的高度计算 */ } button { padding: 5px 10px; /* 设置按钮的内边距 */ border: none; /* 去掉边框 */ border-radius: 4px; /* 边角圆滑 */ cursor: pointer; /* 鼠标指针效果 */ height: 40px; /* 设置固定高度 */ display: flex; /* 使按钮文本垂直居中 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } is_main_query && is_search && isset($_GET['post_type']) && $_GET['post_type'] == 'product') { // 获取表单数据 $equipment = isset($_GET['equipment']) ? $_GET['equipment'] : ''; $brand = isset($_GET['brand']) ? $_GET['brand'] : ''; $years = isset($_GET['years']) ? $_GET['years'] : ''; $working_hour = isset($_GET['working_hour']) ? $_GET['working_hour'] : ''; // 设置查询参数 $query->set('post_type', 'product'); // 限制为产品类型 $tax_query = array('relation' => 'AND'); // 添加relation参数以正确组合税务查询 if ($equipment) { $tax_query = array( 'taxonomy' => 'product_cat', 'field' => 'term_id', 'terms' => $equipment, ); } if ($brand) { $tax_query = array( 'taxonomy' => 'product_brands', 'field' => 'term_id', 'terms' => $brand, ); } if ($years) { $tax_query = array( 'taxonomy' => 'pa_years', 'field' => 'term_id', 'terms' => $years, ); } if ($working_hour) { $tax_query = array( 'taxonomy' => 'pa_working-hour', 'field' => 'term_id', 'terms' => $working_hour, ); } if (count($tax_query) > 1) { // 只有在有条件的时候才设置 tax_query $query->set('tax_query', $tax_query); } } }

上面的代码应用成功后，我们可以通过[product_search_form]这个短代码在任意页面调用，如需修改样式，可以自行调整里面的CSS。