如何為 WooCommerce 可變產品屬性創建單選、標籤、顏色和圖像變化樣本

WooCommerce 產品變化樣本是一項令人難以置信的技術，旨在促進網站銷售和轉化。

想想為什麼樣本令人難以置信，對吧？

產品變體色板替換默認的 WooCommerce 產品變體選擇下拉字段並啟用顏色、圖像、標籤和單選色板。 因此，客戶可以輕鬆選擇所需的產品變體並立即將它們添加到購物車中。

在本教程中，我將向您展示如何使用 OceanWP Theme 在 WooCommerce 可變產品中啟用單選、標籤、顏色和照片變化樣本。

我假設您安裝了 OceanWP 主題。 要在您的可變產品中啟用色板，請先安裝WooCommerce Variation Swatches插件。

現場演示 | 下載 WooCommerce 變體色板插件

WooCommerce 變體色板安裝

您也可以從您的網站後端下載 WooCommerce Variation Swatches 插件。 從頂部管理員通知中選擇開始安裝插件。

安裝並激活WooCommerce Variation Swatches和Ocean Extra插件。

如果您沒有收到安裝色板插件的首要通知，請導航至Plugins >> Add New 。 在搜索字段中搜索WooCommerce 變體色板。 安裝並激活Emran Ahmed 的 WooCommerce Variation Swatches 插件。

成功安裝和激活插件後，就可以在 OceanWP 主題中創建收音機、標籤、顏色和圖像變化樣本了。 讓我們開始這個過程。

WooCommerce 變化樣本設置

在您的 OceanWP 主題中安裝Woocommerce Variation Swatches 和 Photos 插件後。 是時候為您的可變產品配置此插件了。 有兩種方法可以安裝此插件。

1. 為現有可變產品啟用變體樣本
2. 為新的可變產品設置變化樣本

在本教程中，我將描述這兩種方式。

為現有可變產品啟用變體色板

你們中的許多人已經在商店中創建了可變產品。 如果您想將產品變體下拉選擇轉換為單選、標籤、顏色和圖像樣本，您已從此處遵循本教程。 檢查以下屏幕截圖。 當前，默認變體選擇下拉菜單類似於您網站中的以下屏幕截圖。 在接下來的步驟中，我將向您展示如何將變體選擇字段變成漂亮的樣本。

前

後

步驟 01：編輯屬性

前往產品>>屬性。 所有現有的全局屬性都列在屬性部分。 安裝 WooCommerce Variation Swatches 插件後，它添加了類型字段。 默認情況下，它會在類型標題下顯示選擇。

由於 WooCommerce Swatches 插件帶有三種屬性類型：顏色、圖像、按鈕。 您可以為所需的屬性設置任何屬性類型。

出於演示目的，已創建Fabrics、Pattern 和 Label屬性。 為Pattern屬性添加Color屬性類型，為Fabrics屬性添加Image屬性類型，為Label屬性添加Button屬性類型。

要將顏色屬性類型設置為Pattern屬性，請單擊Edit 。

從類型下拉列表中選擇顏色類型。

返回產品>>屬性。 編輯面料屬性，如圖案屬性。

再次取回產品>>屬性。 編輯標籤屬性，如面料和圖案屬性。

屬性類型選擇完成後，返回屬性列表頁面。 屬性列表如下圖所示。

選擇產品屬性的屬性類型後，產品的前端將如下圖所示。

Label 屬性的變體看起來不錯，但 Pattern 屬性的變體需要定義顏色，Fabrics 屬性的變體需要添加圖像。

步驟 02：編輯變體

將顏色定義為Pattern屬性中的變體。 前往產品>>屬性。 從模式屬性中選擇配置術語。

選擇配置術語後，出現屬性變體列表。 對於 Pattern，此處列出了三種變體： Blue 、 Green和Red變體。 逐一編輯每個變體以添加變體顏色。

對於演示，選擇綠色變體的編輯鏈接。

從變體編輯面板。 從顏色選擇器中選擇所需的顏色，然後按更新按鈕更新更改。

成功更新所有變體顏色後，前端如下所示。

更新圖案屬性變體後，編輯面料屬性，選擇配置圖案屬性等術語。

按下配置術語後，會出現類似模式的 Fabrics 術語列表。 編輯每個變體以插入變體圖像。 出於演示目的， Chambray屬性的編輯鏈接。

從變體編輯面板。 從圖像上傳所需的變化圖像並按更新按鈕更新更改。

在為所有變體更新圖像後，前端會喜歡以下屏幕截圖。

為新的可變產品設置變化樣本

這是那些沒有為他們的商店創建任何可變產品的人的步驟。 首先，我們將創建可變產品並為它們啟用色板。

步驟 01：創建全局屬性和變體

成功安裝和激活插件後，從Products >> Attributes全局創建所需的屬性。 創建圖案、面料、長度和尺寸變化，從類型下拉列表中輸入屬性標題和相應的屬性類型。

當顏色、圖像和標籤Pattern 、 Fabrics 、 Label和Size屬性創建成功時，它會在左側創建一個屬性列表。

創建全局屬性後，選擇配置術語添加屬性變體。 要為模式屬性創建變體，請選擇配置術語鏈接。 填寫名稱字段並選擇顏色代碼。 為顏色屬性創建綠色、藍色和紅色變體。

為模式屬性添加變體後，左側屏幕中會出現屬性變體列表。

再次進入產品>>屬性。 為Fabrics屬性創建變體，從Fabrics中選擇配置術語鏈接。 填寫名稱字段並從媒體庫添加變體圖像或從計算機上傳。

為圖像屬性創建青年布、燈芯絨和浮雕變體，它們將出現在左側。

為 Radio 和 Label 屬性創建變體，例如 Image 和 Color 變體。

步驟 02：在可變產品頁面中顯示色板

在可變產品頁面上啟用色板。 進入您想要的產品編輯模式，從產品數據中選擇可變產品。

前往屬性選項卡。 單擊自定義產品屬性下拉菜單。 這裡出現了所有全局創建的屬性。 將所有屬性一一添加。

添加所有屬性後，按每個屬性設置中的“全選”按鈕一次添加所有可用的變體。 添加產品屬性變體後，選擇保存屬性按鈕保存設置。

現在進入變體選項卡。 單擊添加變體下拉菜單。 這裡出現了兩個選項。 第一個是添加變體，第二個是從所有屬性創建變體。

選擇從所有屬性創建變體，然後按Go 。 它將添加為屬性創建的所有可用變體組合。 為個別變化添加價格和變化圖像並保存設置。

結論

我試圖涵蓋在 OceanWP 主題中安裝 WooCommerce Variation Swatches 插件的每一個步驟。 如果您需要更多幫助，請在評論框中告訴我。