WordPress如何設(shè)置搜索產(chǎn)品規(guī)格框

來自：素雅營銷研究院

方知筆記

2025年06月27日 13:36

在電子商務(wù)網(wǎng)站中，讓用戶能夠根據(jù)產(chǎn)品規(guī)格進(jìn)行搜索是一個(gè)非常重要的功能。本文將詳細(xì)介紹如何在WordPress網(wǎng)站中設(shè)置搜索產(chǎn)品規(guī)格框，幫助訪客更精準(zhǔn)地找到他們需要的產(chǎn)品。

準(zhǔn)備工作

在開始設(shè)置之前，您需要確保：

使用WordPress搭建的網(wǎng)站
已安裝WooCommerce或其他電子商務(wù)插件
管理員權(quán)限

方法一：使用WooCommerce自帶功能

添加產(chǎn)品屬性：

進(jìn)入WordPress后臺(tái) > 產(chǎn)品 > 屬性
添加您的產(chǎn)品規(guī)格屬性（如顏色、尺寸、材質(zhì)等）
為每個(gè)屬性添加相應(yīng)的值

啟用屬性篩選：

在WooCommerce設(shè)置 > 產(chǎn)品 > 顯示中
勾選”啟用分層導(dǎo)航/過濾”
保存更改

小工具設(shè)置：

進(jìn)入外觀 > 小工具
將”WooCommerce分層導(dǎo)航”小工具添加到側(cè)邊欄或頁腳區(qū)域

方法二：使用插件增強(qiáng)搜索功能

如果WooCommerce自帶功能無法滿足需求，可以考慮以下插件：

Search & Filter Pro：

安裝并激活插件
創(chuàng)建新的搜索表單
添加基于產(chǎn)品屬性的過濾條件
將短代碼插入到產(chǎn)品頁面

FacetWP：

安裝插件并設(shè)置索引
創(chuàng)建包含產(chǎn)品規(guī)格的篩選器
通過短代碼或模板標(biāo)簽添加到網(wǎng)站

YITH WooCommerce Ajax Product Filter：

專為WooCommerce設(shè)計(jì)
提供AJAX即時(shí)過濾功能
可自定義篩選器樣式

方法三：自定義代碼實(shí)現(xiàn)

對(duì)于有開發(fā)能力的用戶，可以通過添加自定義代碼實(shí)現(xiàn)更靈活的搜索功能：

// 在functions.php中添加以下代碼
function custom_product_search_filter() {
// 獲取所有產(chǎn)品屬性
$attributes = wc_get_attribute_taxonomies();

// 創(chuàng)建搜索表單
echo '<form role="search" method="get" class="woocommerce-product-search" action="'.esc_url(home_url('/')).'">';
echo '<input type="search" id="woocommerce-product-search-field" class="search-field" placeholder="搜索產(chǎn)品..." value="'.get_search_query().'" name="s" />';

// 為每個(gè)屬性添加下拉菜單
foreach ($attributes as $attribute) {
$terms = get_terms(array('taxonomy' => 'pa_'.$attribute->attribute_name));
if (!empty($terms)) {
echo '<select name="filter_'.$attribute->attribute_name.'">';
echo '<option value="">選擇'.$attribute->attribute_label.'</option>';
foreach ($terms as $term) {
echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
}
echo '</select>';
}
}

echo '<button type="submit" value="搜索">搜索</button>';
echo '<input type="hidden" name="post_type" value="product" />';
echo '</form>';
}