WordPress如何顯示產(chǎn)品變體信息

來自：素雅營銷研究院

方知筆記

2025年06月06日 10:31

在WordPress電商網(wǎng)站中，特別是使用WooCommerce插件時，產(chǎn)品變體（如不同顏色、尺寸等選項）的展示對用戶體驗至關重要。本文將詳細介紹幾種在WordPress中顯示產(chǎn)品變體信息的方法。

方法一：使用WooCommerce默認功能

WooCommerce本身就具備基本的變體展示功能：

在WordPress后臺進入”產(chǎn)品” > “添加新產(chǎn)品”
設置產(chǎn)品為”可變產(chǎn)品”類型
在”屬性”選項卡中添加屬性（如顏色、尺寸等）
在”變體”選項卡中生成所有可能的變體組合
為每個變體設置價格、庫存等信息

前臺產(chǎn)品頁就會自動顯示變體選擇下拉菜單和相關信息。

方法二：使用短代碼顯示變體信息

可以在產(chǎn)品描述或自定義模板中使用WooCommerce短代碼來顯示特定變體信息：

[product_variations]

這個短代碼會在產(chǎn)品頁顯示所有可用變體的表格，包含價格差異、庫存狀態(tài)等信息。

方法三：自定義模板文件

對于更高級的定制需求，可以編輯主題模板文件：

復制wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php到你的主題目錄wp-content/themes/your-theme/woocommerce/single-product/add-to-cart/
修改這個文件來自定義變體選擇器的外觀和行為
可以使用$product->get_available_variations()獲取所有可用變體數(shù)據(jù)

方法四：使用插件增強功能

如果默認功能不能滿足需求，可以考慮以下插件：

Variation Swatches for WooCommerce - 將下拉菜單轉(zhuǎn)換為可視化選擇器
WooCommerce Show Single Variations - 允許單獨展示每個變體
Product Variations Table for WooCommerce - 以表格形式展示所有變體信息

方法五：自定義代碼顯示變體詳情

在主題的functions.php文件中添加以下代碼可以顯示變體詳細信息：

add_action('woocommerce_after_variations_form', 'display_variation_info');
function display_variation_info() {
global $product;

if($product->is_type('variable')) {
$variations = $product->get_available_variations();

echo '<div class="variation-details">';
foreach($variations as $variation) {
echo '<div class="variation-item">';
echo '<h4>變體 #'.$variation['variation_id'].'</h4>';
echo '<p>價格: '.$variation['display_price'].'</p>';
echo '<p>庫存: '.($variation['is_in_stock'] ? '有貨' : '缺貨').'</p>';
echo '</div>';
}
echo '</div>';
}
}