✨专业 WordPress 开发，定制建站，高效上线，合作即享优化服务！🚀
今天分享一个在WordPress外贸建站中遇到的“硬骨头”：为首页打造一个强大的WooCommerce产品筛选器。
一开始以为这是个简单需求，毕竟产品页的筛选插件一抓一大把。但实际一做才发现是个“坑”：这些插件和主题功能几乎全都限定只能在产品存档页或详情页工作，根本无法在首页使用。我们试了一圈，结果都不理想。
这段经历让我明白，对于在WordPress网站非标准页面实现复杂的交互功能，尤其是针对WooCommerce，自定义代码开发往往是唯一可靠且灵活的路径。
代码参考
可能因为这是一个非常规的用户需求，所以没有这样的插件，但我们可以自己写一个插件，或者是代码，这里就把功能实现的代码给大家分享出来，大家可自行参考使用，但你直接拿去用肯定是不行的，要根据你自己的网站做相应的修改，这个就自己去研究吧。
// 注册自定义筛选表单功能和短代码 [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(); // 开启输出缓冲区
?>
<form method="GET" action="<?php echo esc_url(home_url('/')); ?>" target="_blank" style="display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;">
<input type="hidden" name="post_type" value="product">
<input type="hidden" name="s" value=""> <!-- 用于存放搜索关键字 -->
<div class="filter-field">
<label for="equipment" style="color: #ffffff; font-weight: bold;">EQUIPMENT</label>
<select name="equipment" id="equipment" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">
<option value="">All Equipment</option>
<?php foreach ($categories as $category) : ?>
<option value="<?php echo esc_attr($category->term_id); ?>">
<?php echo esc_html($category->name); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="filter-field">
<label for="brand" style="color: #ffffff; font-weight: bold;">BRAND</label>
<select name="brand" id="brand" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">
<option value="">All</option>
<?php foreach ($brands as $brand) : ?>
<option value="<?php echo esc_attr($brand->term_id); ?>">
<?php echo esc_html($brand->name); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="filter-field">
<label for="years" style="color: #ffffff; font-weight: bold;">YEARS</label>
<select name="years" id="years" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">
<option value="">All</option>
<?php foreach ($years as $year) : ?>
<option value="<?php echo esc_attr($year->term_id); ?>">
<?php echo esc_html($year->name); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="filter-field">
<label for="working_hour" style="color: #ffffff; font-weight: bold;">WORKING HOUR(H)</label>
<select name="working_hour" id="working_hour" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">
<option value="">All</option>
<?php foreach ($working_hours as $hour) : ?>
<option value="<?php echo esc_attr($hour->term_id); ?>">
<?php echo esc_html($hour->name); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<button type="submit" style="background-color: #E04D0A; color: #ffffff; font-weight: bold; height: 40px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px 10px;">SEARCH EQUIPMENT</button>
</form>
<style>
.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; /* 水平居中 */
}
</style>
<?php
return ob_get_clean(); // 返回缓冲区内容并清空
}
// 注册短代码
add_shortcode('product_search_form', 'custom_product_search_form');
add_action('pre_get_posts', 'custom_product_search');
function custom_product_search($query) {
if (!is_admin() && $query->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。
