無程式碼方法：自訂 WooCommerce 產品頁面
已發表: 2024-04-08您是否希望自訂產品頁面以獲得更多銷售量？
精心設計和優化的產品是一項巨大的資產，可以推動轉換和收入。 產品頁面是您的線上店面，其作用是說服客戶向您購買。
不幸的是，預設的 WooCommerce 產品並沒有提供太多幫助轉換的功能。 這就是為什麼您應該自訂 WooCommerce 產品頁面設計以提供更個人化的購物體驗。
過去，您需要成為開發人員才能自訂頁面。 但由於技術進步，您現在可以優化產品頁面並使其在視覺上更具吸引力，而無需編寫一行程式碼。
在本文中，我將概述如何在沒有程式碼的情況下自訂 WooCommerce 產品頁面設計。 在本文的最後，您應該能夠設計和優化 WordPress 產品頁面的各個方面，以提高轉換率。
WooCommerce 產品頁面客製化簡介
WooCommerce 產品頁面是您的數位店面，您可以在其中給客戶留下深刻印象並吸引他們向您購買。
每個 WooCommerce 產品都有自己獨特的頁面，您可以在其中顯示相關詳細信息，例如產品名稱、描述、價格、圖像和任何變體。 但這些細節不足以說服您的客戶向您購買。
因此，您需要進一步優化頁面，使其成為能夠吸引客戶注意力並說服他們購買的銷售機器。
好消息是您無需編碼即可完成所有這些工作。 您只需要使用我將在本文中分享的特定工具來調整您的產品頁面和整個網站。
產品頁面上要包含的關鍵元素
在我們開始客製化 WooCommerce 產品頁面設計之前，我們先來看看高轉換率產品頁面的關鍵組成部分：
- 產品詳細資訊：該頁面將包含產品名稱、描述和圖像。 它還應該大膽地展示產品價格。
- 加入購物車或立即購買按鈕：加入購物車按鈕是號召性用語按鈕。 所以它需要大膽且具有視覺吸引力。 使用綠色等顏色作為背景，使其脫穎而出。
- 願望清單：產品頁面允許客戶為商品添加書籤以供將來購買。
- 客戶評論：大多數客戶在購買前都會查看評論。 與沒有評論的產品相比，擁有至少 5 則評論的產品更有可能被購買。
- 產品變化：顯示每個流程的所有變化（顏色和尺寸），以改善客戶的選擇並幫助推動銷售。
- 相關產品：新增相關產品，為買家提供選擇。 產品推薦可以將收入提高 300%。
- 交貨詳細資訊：客戶想了解交貨細節。 提供重要訊息，例如提貨通知、送貨區域和包裝細節。
- 退貨政策：提供有關退貨和換貨政策的信息，以讓客戶放心。
- 品牌資訊：展示產品的品牌詳細資訊以建立品牌忠誠度。 如果產品來自知名品牌，這一點就更為重要。
用於自訂 WooCommerce 產品頁面的無程式碼工具和擴展
使用 WooBuilder Blocks 外掛程式進行自訂
WooBuilder Blocks 是一個用於自訂 WooCommerce 產品頁面設計的 WordPress 建構器。 該插件提供了將無聊的產品頁面轉換為銷售管道所需的一切。 它與古騰堡區塊編輯器集成，可讓您直接在 WordPress 編輯器中自訂頁面。
如何使用 WooBuilder 區塊進行產品頁面定制
WooBuilder Blocks 是一個高級插件，因此您需要先從 PootlePress 網站購買它。 他們提供 14 天的試用期。
獲得插件檔案後，繼續安裝並啟動它。
若要使用插件，請建立新產品或編輯現有產品。 您將在頁面右側看到一個啟用 WooBuilder 區塊的按鈕。 點擊它。
接下來，您將看到一個包含 2 或 3 個選項的彈出窗口，具體取決於您是編輯現有產品還是建立新產品。
- 白手起家
- 選擇一個模板
- 告訴我怎麼做
在此圖中，我們正在編輯現有產品。 因此，我會選擇一個模板。
現在有 5 種不同的佈局可供選擇。 選擇您認為最能展示該特定產品的產品。
我將為該產品選擇“Classic Image Right”佈局。
就是這樣。 該插件將自動自訂產品詳細資訊以適合所選模板。
正如您在上面所看到的，產品頁面已經過全面優化，包括「加入購物車」按鈕、評論顯示和其他重要的產品詳細資訊。
您也可以透過新增更多元件來進一步自訂產品頁面。
為此，請點擊“新增區塊”圖示。
然後點擊瀏覽全部以顯示古騰堡塊小工具。
您會發現兩個額外的區塊部分： Caxton和WOOBUILDER 。
您可以拖放任何這些區塊來進一步自訂您的產品頁面。
完成後，按一下「更新」以發布優化後的頁面
PootlePress 擁有內容豐富的指南，可協助您使用 WOOBUILDER 自訂 WooCommerce 產品頁面設計。 確保檢查出來。
使用 WooCommerce 360° 圖像和變化樣本優化產品圖像
現在，讓我們來看看這兩個產品，分別幫助您自訂 WooCommerce 產品頁面圖像和變體。
WooCommerce 360 圖像
WooCommerce 360 Image 提供了一個無縫解決方案，可將迷人的 360 度圖像旋轉整合到您的 WooCommerce 網站中。 客戶希望看到產品的各個角度，而 360 度影像可以在您的商店中實現這一目標。
有多個 WooCommerce 360 圖像插件，既有付費的，也有免費的。 WooCommerce 360 Image 是流行的之一。 但是，在本教程中，我們將使用「Algori 360 Image」外掛程式。 它是一個古騰堡區塊插件，可以在 WooCommerce 商店上啟用互動式 360 度影像。
如何在您的商店中實施 WooCommerce 360 圖像。
要實現 360 度圖像，您首先需要安裝 WooCommerce 360 圖像插件（在本例中）。 導航至“新增外掛程式”頁面並蒐索“Algori 360 Image”。 安裝並啟用插件。
若要使用該外掛程式自訂 WooCommerce 產品頁面設計，您可以建立新產品或編輯現有產品。
按一下「新增區塊」圖示可將新區塊新增至您的產品頁面。
搜尋“360 image”區塊並點擊新增它。
現在在您的媒體庫中上傳或搜尋 360 度影像。 確保您選擇的影像是 360 度影像。 最好將其用作產品圖像之外的額外圖像。
完成編輯後，按一下「更新」或「發布」 。
現在，當您在圖像周圍拖曳遊標時，它將顯示圖像的其他部分。 這將使客戶能夠看到產品的各個方面，以便他們可以更快地做出購買決定。
WooCommerce 的變體樣本
Variation Swatches 是另一個用於自訂 WooCommerce 產品頁面設計的工具。 這些插件提供直覺的樣本而不是傳統的下拉式選單。
它們允許自訂屬性樣式，如顏色、圖像或標籤，並提供變體預覽。 這使您的產品更具視覺吸引力，並促進更具互動性的購物體驗，最終推動轉換和客戶滿意度。
有多種變體樣本插件，但我們將使用 CartFlows 的 WooCommerce 變體樣本來進行此說明。 以下是在商店中設置變體的步驟
步驟 1. 安裝插件
首先，您必須安裝並啟用該插件。 搜尋“Variation Swatches”並安裝 CartFlows 的插件。
步驟 2. 建立屬性
您必須先建立屬性才能建立顏色、尺寸等變體。
若要建立變數，請前往產品>屬性。
若要新增屬性，請輸入名稱和名稱。 我們想先為我們的產品創造顏色變化。 所以我們為此創建一個屬性和屬性。
使用“顏色”作為名稱和別名。
現在向下捲動到“類型”並從下拉清單中選擇顏色。
然後點擊“新增屬性”進行儲存。
步驟 3. 配置變體
儲存屬性後，您現在可以配置變體。
為此，請按一下屬性旁邊的「配置條款」 （在本例中為「顏色」）。
現在您需要創建適用於您的產品的各種顏色。 輸入每種顏色的名稱。 例如，藍色。 另外，輸入顏色的值。
然後選擇顏色並點擊新增顏色。 對您擁有的每種顏色的產品執行此操作。
你將會得到這樣的東西。
步驟 4. 建立其他屬性
您還可以建立尺寸和標籤屬性，並按照相同的流程配置它們。 選擇“按鈕”作為尺寸的屬性類型。
步驟 5. 應用屬性
建立完屬性後，下一步是將它們套用到特定產品。 為此，請編輯要套用變體的產品。
然後向下捲動到“產品資料”部分，並將產品類型變更為可變產品
接下來，按一下屬性。
然後點擊“新增現有”並從下拉清單中選擇您建立的屬性。 例如，我們將選擇顏色來設定產品的顏色變化。
現在您必須選擇適用於該特定產品的特定顏色。 為此，請使用搜尋功能。
選擇所有適用的顏色，然後按一下儲存屬性。
步驟 6. 建立產品變體
儲存屬性後，您將需要設定變體。 為此，請按一下“變體” 。
您可以根據可用的產品手動新增變體。 這意味著您將設定產品的尺寸、顏色和其他變化。 例如，如果您有 10 件這種黑色襯衫產品，有哪些尺寸可供選擇？
如果您的產品有多種尺寸和顏色，請按一下「產生變體」以產生所有可能的變體。
步驟 7. 增加變體的價格
建立變體後，您需要為其添加價格。 您可以編輯每個變體並為其添加特定價格，或添加適用於所有變體的一般價格。
若要新增單獨的價格，請按一下「編輯」 。 然後輸入變化的價格。 您還可以上傳圖片，並輸入其他詳細信息，例如重量和運輸等級。 對所有變體都執行此操作。
若要新增所有變體的一般價格，請按一下「新增價格」。
然後輸入價格並點擊新增價格
最後，向上捲動並點擊“發布”或“計劃”。
就是這樣。 恭喜。 您已成功自訂產品頁面設計以包含產品顏色變更。 您可以對尺寸、標籤等執行相同的操作。
以下是套用顏色和尺寸變化後頁面的外觀。
優化您的 WooCommerce 產品頁面模板
提高產品頁面載入速度
產品頁面的載入速度是一個重要因素，可以決定客戶的購物體驗，從而決定您獲得的轉換程度。 頁面載入緩慢通常會導致跳出率較高，導致您花錢。
Google 建議將載入速度保持在 3 秒或更短。 以下是一些有助於提高載入速度的提示。
1.檢查你的載入速度
首先檢查你的立場。 Google 的 PageSpeed Insights 是您的首選工具。 它將準確指出是什麼導致您的網站速度變慢以及如何修復它
2. 選擇正確的主題
選擇主題就像為您的網站挑選一套服裝。 它需要看起來不錯，但也必須適合場合。 選擇 WooCommerce 友善的主題。 它不必太浮華； 它只需要與 WooCommerce 良好配合即可。
3. 注意插件的使用
如果您使用一些插件，那就太好了。 但是，您的商店中擁有太多 WooCommerce 外掛程式可能會成為一個問題。 借助數千個外掛程式來更好地自訂 WooCommerce 產品頁面設計，很難不過度。 將您的外掛程式限制在少數，並堅持使用與 WooCommerce 相容的外掛程式。
4. 縮小影像尺寸
大圖像會拖慢您的網站速度。 TinyPNG 等工具可讓您在不犧牲品質的情況下將影像壓縮高達 75%。
5. 刪除不必要的程式碼
刪除任何不必要的程式碼。 太多的程式碼會減慢您的網站速度。
6.激活瀏覽器緩存
當您啟動快取時，它將保存您網站頁面的部分內容並減少載入時間。
7. 獲得可靠的伺服器
確保您的伺服器配置良好並且位於目標受眾所在的位置，以確保更快的載入速度。
8. 嘗試 CDN
內容交付網路 (CDN) 將重要資料（例如產品圖像）儲存在離使用者更近的地方，以幫助減少載入時間。
利用附加元件增強客製化能力
WooCommerce 產品選項
WooCommerce 產品選項是一個廣泛使用的插件，可透過條件邏輯為您的 WooCommerce 產品添加補充產品選項。 它與多個 WooCommerce 支付網關和運輸外掛程式順利集成，並相容於知名的 WooCommerce 主題，確保統一設計
WooCommerce 保護類別
PPWP 讓您可以保護您的 WooCommerce 商店。 該外掛程式可讓您使用密碼鎖定高級產品頁面，確保只有 VIP 或會員才能存取它們。 您甚至可以設定到期日期以增強安全性並輕鬆管理存取角色。
價格： PPWP 有免費版本。
3.Yay貨幣
YayCurrency 讓您的客戶輕鬆輕鬆地切換貨幣。 它支援超過 160 種貨幣單位並自動更新匯率。 對於國際購物者來說，這改變了遊戲規則。 另外，它與其他 WooCommerce 擴充功能相容。
價格： YayCurrency 有免費版本。 高級版本的年度許可證費用為 49%，終身付款費用為 195 美元。
結論：無程式碼 WooCommerce 產品頁面客製化的後續步驟
自訂您的 WooCommerce 產品頁面不是一次性的事情。 我概述如何使用 WooBuilder Blocks 自訂產品頁面。 我們還討論瞭如何為您的產品添加 360 度圖像和變體，以及幾個外掛程式以進一步優化您的商店和產品頁面。
完成自訂後，您必須進行使用者測試，以獲得有關新自訂的產品頁面效能的回饋。 測試自訂頁面以確保它們在所有裝置上快速加載，並驗證您的產品頁面在行動裝置上完全回應。
您還需要優化產品頁面的速度並定期監控其效能以找到需要改進的地方。
今天就開始吧！