如何編輯和自定義您的 WooCommerce 產品頁面
已發表: 2023-02-14產品頁面對銷售過程至關重要。 這是購物者決定繼續購買商品或在不保證退貨的情況下離開的地方。 作為在線商店所有者，您的目標是讓網站訪問者訪問您的產品頁面，然後讓他們執行添加到購物車和結帳的最後步驟。
為此，您的產品頁面必須盡可能最好地宣傳所售商品。 WooCommerce 默認產品模板乾淨且專業，為您的頁面奠定了堅實的基礎，您可以使用以下方法在此基礎上構建。
如何優化您的 WooCommerce 產品頁面模板
您可以通過多種方式自定義 WooCommerce 產品頁面或模板。 WooCommerce 中包含一些方法。 對於其他人，您需要延期。 您還可以使用站點編輯器或手動進行自定義。 讓我們仔細看看每個選項。
如何使用內置功能自定義您的 WooCommerce 產品頁面
許多產品頁面優化無需任何附加組件或編碼即可完成。 高質量的照片、信息豐富的描述和關鍵產品信息使訪問者更容易放心地購買產品。
啟用評論和評級以建立信心。 設置相關產品、交叉銷售和追加銷售以增加平均訂單量並使客戶更容易發現新商品。 在您的產品描述或標籤中包含客戶推薦以獲得社會證明。
優化頁面內容後，您可以通過使用 WooCommerce 擴展、使用站點編輯器編輯產品頁面模板以及使用代碼和掛鉤手動自定義它們來進一步增強產品頁面。
如何使用 WooCommerce 擴展自定義您的產品頁面
擴展是專門為 WooCommerce 商店提供附加功能而構建的 WordPress 插件。 以下是一些 WooCommerce 擴展，您可以使用它們來提供額外的產品信息、升級購物體驗以及擴展您的頁面以使其超出其默認功能。 您可以在官方 WooCommerce 擴展庫中找到更多用於進一步自定義的擴展。
1. WooCommerce 的高級產品變體
可變產品是具有尺寸和顏色等選項的項目——購物者在結賬前做出的選擇。 在前端，WooCommerce 為每個屬性（如尺寸或顏色）顯示一個下拉列表，並在下方列出可用的變體（如小、中或大）。
對於更直觀的方法，WooCommerce 的高級產品變體讓您可以使用色板（顏色、圖像和文本）、畫廊和表格展示產品變體。 您甚至可以在色板中加入視頻。
根據您配置的設置，變體樣本顯示在產品頁面或主商店頁面上。 您可以利用現有的產品圖像和特色圖像來創建樣本。
您還可以自定義產品圖庫佈局，將其從特色圖片下方的默認位置移至左側。
詳細了解 WooCommerce 的高級產品變體。
2.WooCommerce 選項卡管理器
WooCommerce 產品頁面選項卡顯示在“添加到購物車”按鈕下方，讓您可以展示更多信息，同時將標題和價格等關鍵元素放在首屏。
這些附加信息可以包括產品材料和成分、重量和尺寸、尺碼表、價格表、交貨時間、運費、操作視頻——任何東西 這將幫助客戶有信心進行購買。
使用 WooCommerce 選項卡管理器，您可以重命名、重新排序和刪除默認選項卡——詳細說明、附加信息和評論——並通過創建您自己的全局、類別範圍和特定於產品的選項卡來自定義此部分。
使用該插件設置可以在產品級別覆蓋的默認 Tab 鍵順序。 使用拖放式界面，您無需修改主題文件或進入代碼。
如果您已經通過其他插件擁有自定義選項卡，WooCommerce 選項卡管理器會檢測到它們，讓您可以選擇顯示或隱藏它們。 這個插件的一個主要好處是您的選項卡中的內容包含在您的站點搜索結果中。
了解有關 WooCommerce 選項卡管理器的更多信息。
3. 產品常見問題
常見問題或常見問題解答是一種用戶友好的方式來組織和向訪問者展示產品信息。 使用產品常見問題解答擴展，您可以為每個產品添加一個專用的常見問題解答選項卡，其中包含無限的問題和答案。
該插件適用於所有產品類型，並在您創建或編輯產品頁面時添加常見問題解答部分。
在前端，常見問題解答以帶有動畫的手風琴樣式顯示。
詳細了解產品常見問題解答。
4. 複合製品
借助複合產品，您的客戶可以構建套件或可配置產品。
對於每個複合產品，您將允許客戶在現有庫存中預先確定的選擇之間進行選擇。 您可以為特定選擇分配額外費用，並允許某些類別是可選的。
例如，一條項鍊可能包含鏈條（銀、金）、寶石（紅寶石、石榴石、祖母綠）和可選飾物（多種形狀選擇）的選項。
對於套件的每個構建塊（鏈條、石頭和飾物），您可以選擇客戶可以選擇的 SKU 或讓他們從整個產品類別中選擇任何選項。
條件邏輯讓您可以根據之前的選擇顯示或隱藏選項（例如，紅色襯衫沒有特定尺碼），組件級跟踪支持高級庫存管理。 如果您有大量選項，您可以創建具有排序、過濾和分頁功能的視圖，以便於購物。
了解有關複合產品的更多信息。
5. 產品附加組件
Product Add-Ons 擴展讓您的購物者可以通過免費和付費的額外服務來定制和升級他們的購買。
附加組件可能包括保修、更高質量的材料、優先運輸選項或自定義字母組合和雕刻等個性化設置。 如果人們經常購買您的產品作為禮物，您可以添加包裝選項或禮品信息字段。
非營利組織可以允許購物者在他們的購買中加入捐款，並通過添加姓名和信息來向某人捐款。
如果您有 WooCommerce Bookings，Product Add-Ons 可讓您創建額外服務選項（理髮後沖洗頭髮）或 VIP 升級以獲得特殊座位和訪問權限。 它還適用於 WooCommerce 訂閱，以便您可以為您的訂閱產品提供附加組件。
您的附加組件可以包括顯示為文本框、下拉菜單、複選框、基於圖像的選擇的自定義字段，以及小費和捐贈等項目的自定義價格輸入。 這些字段可以應用於您的整個目錄或分配給特定產品。
一旦您設置了附加組件，它們就會按照您選擇的順序出現在“添加到購物車”按鈕上方的產品頁面上。
詳細了解產品插件。
使用站點編輯器自定義您的產品頁面
使用塊主題，您可以通過在站點編輯器中編輯單一產品頁面模板來自定義產品頁面的外觀。 在 WordPress 管理員中，轉到外觀 → 編輯器。
從頁面頂部中心的下拉菜單中選擇“瀏覽所有模板” 。 從出現的列表中選擇單一產品模板。
默認頁面佈局包含頁眉、頁腳和顯示產品信息、價格和圖像元素的 WooCommerce 單一產品塊。
在對產品頁面模板進行編輯之前，您應該備份您的網站。 某些更改——例如，不小心刪除了單一產品塊並保存——將使您的訪問者無法購物或購買。
如何編輯單一產品頁面頁眉和頁腳模板
設置下的模板選項卡（右上角的齒輪圖標）包含管理頁眉和頁腳的鏈接。 單擊任一選項以管理頁面模板的該部分。 您也可以直接單擊模板的某個區域以開始編輯。 請記住，此處所做的任何更改都將應用到使用該模板的所有產品。
在標題中，您可以編輯網站標題和主導航菜單中的鏈接，甚至可以添加新塊來專門定制您的產品頁面。 使用此空間添加圖像、文本等，以增強產品頁面的銷售能力。 您可以添加促銷或政策說明或橫幅，讓購物者了解當前的促銷活動或如何獲得超過一定金額的訂單免費送貨。
您可以對產品頁面頁腳執行類似的操作。 例如，添加客戶評價或有關滿意度保證政策的信息。
如何自定義Single Product body
單一產品塊在頂部顯示一個粗體警告，“不要刪除此塊！ 刪除此塊將對您的商店造成意想不到的影響。” 認真對待這條消息！
但是，您可以在單一產品塊周圍添加新塊以完全自定義您的產品頁面設計。
使用+ 圖標在單一產品塊上方或下方添加元素，然後包含您想要自定義頁面的任何塊。
使用段落塊來包括當前優惠（“花費 100 美元或更多免費送貨”）、滿意度保證或任何有助於訪客做出購買決定的內容。 添加一個視頻塊，讓您了解您的流程的幕後情況。 或者包括您想要推廣的特定推薦產品。 天空是這裡的極限！
對於每個塊，您可以編輯背景顏色、排版和間距等設置，使其真正屬於您自己。
手動自定義您的產品頁面（使用代碼和掛鉤）
對於高級選項——無需插件的成本或維護——您可以使用代碼和掛鉤手動編輯和自定義您的產品頁面。
在對文件進行任何更改之前，請務必花時間備份 WooCommerce。 如果您使用 Jetpack VaultPress Backup，這會自動實時為您完成。 因此，如果您的任何更改導致您的網站出現故障，您只需點擊幾下即可恢復備份，即使您無權訪問 WordPress 儀表板。
您還需要使用子主題來進行這些更改。 否則，當您更新主題或 WooCommerce 時，您可能會丟失所有自定義設置。 另一種選擇是使用像 Code Snippets 這樣的插件，它可以讓您以片段的形式將自定義代碼添加到您的站點，您可以根據需要打開和關閉這些片段。
使用掛鉤自定義 WooCommerce 產品頁面
掛鉤允許站點所有者添加代碼和自定義頁面，而無需擔心與編輯核心文件相關的危險。 有兩種類型的鉤子：動作和過濾器。 操作允許您在特定點插入代碼，而過濾器允許您操作和返回變量。
例如，您可以使用操作添加新的結帳字段，然後使用過濾器更改現有結帳字段的標籤或占位符。 您可以在此處找到可用的 WooCommerce 掛鉤列表。
以下是您可以使用掛鉤對產品頁面進行更改的更多示例：
- 更改添加到購物車按鈕文本。 例如，您可以改為說“立即捐贈”。
- 自定義 WooCommerce 麵包屑。 更改麵包屑分離器，完全刪除麵包屑等。
- 刪除、重命名和重新排序產品選項卡。 例如，添加成分選項卡，或在其中一個選項卡中包含視頻。
使用 CSS 自定義 WooCommerce 產品頁面
CSS 是一種用於控制設計元素的編碼語言（與控制操作的 JavaScript 相反）。 您可以使用它來修改產品頁面的設計。 一旦您了解了 CSS 的基礎知識，您就可以自定義從顏色和字體到單個元素的大小的所有內容。
您可以通過在 WordPress 儀表板中轉到外觀 → 自定義 → 附加 CSS輕鬆添加 CSS 代碼。 例如，如果您想更改產品標題的字體顏色，您可以使用以下代碼，將顏色的十六進制代碼替換為您自己的代碼：
.woocommerce div.product .product_title { color: #222222; }如果您想更改“立即購買”按鈕的顏色，您可以使用此代碼，再次將十六進制代碼替換為您選擇的顏色：
.woocommerce div.product .button { background: #000000; }您可以在 WooCommerce 的這篇文章中看到更多示例。
如何提高產品頁面加載速度
快速加載網站對訪問者和搜索引擎都很重要。 人們不想等待，搜索引擎也不想將人們送到表現不佳的網站。
從字面上看，每一秒都很重要——加載時間延遲一秒會使轉化率降低 20%！
Jetpack Boost 是 WordPress 的頂級網站速度和性能優化解決方案。 它有一個快速簡單的設置過程——不需要開發人員——並擁有在頭對頭測試中擊敗前五名性能插件的結果。
安裝免費插件後，您可以運行審核並獲得有關當前站點性能分數的報告。 這些將作為基準，您可以用來衡量您的核心網絡生命力的改進，谷歌使用這些指標來衡量您網站的用戶體驗和技術性能。
一個簡單的儀表板使得通過一鍵激活配置優化選項變得簡單。 這使您可以靈活地單獨測試性能模塊並配置 Jetpack Boost 以完美適應任何場景。
有關加速產品頁面的更多方法，請查看加速 WooCommerce 商店的九種方法。
有關自定義產品頁面的常見問題
還有問題嗎？ 看看下面一些常見問題的答案。
自定義 WooCommerce 產品頁面的最佳方式是什麼？
沒有單一的最佳方法。 最適合您的方法取決於您對各種方法的熟悉程度。
網站編輯器將所有權力交到您手中，讓您可以拖放元素來創建您自己的個性化產品頁面，而無需編輯任何代碼。 對於初學者和高級用戶來說，這都是一個很好的解決方案！
如果您正在尋找特定的附加功能，WooCommerce 擴展是一個不錯的選擇。 它們經過 WooCommerce 審查和批准，並為商家提供無需自定義代碼的高級自定義選項。
手動定制和編碼提供了最大的靈活性，但也需要最多的技術知識。 與使用塊或擴展程序相比，此方法最有可能導致問題甚至破壞站點。
我應該在編輯產品頁面模板之前備份我的網站嗎？
是的。 與頁面和帖子不同，站點模板沒有修訂歷史記錄。 在對產品頁面模板進行任何更新之前備份您的站點，以便在出現任何問題時可以快速恢復。
Jetpack VaultPress Backup 是一個實時的 WordPress 備份插件，這意味著您的站點不僅會按每日計劃或在您進行手動複製時進行備份。 相反，每次您對站點進行更改、客戶下訂單或訪問者發表評論時，它都會自動保存。 什麼時候有重要的事情發生？ 得救了！
電子商務商店不能丟失數據，尤其是當數據代表真實世界的客戶訂單時。 不要滿足於僅偶爾保存您的網站或需要長時間的客戶服務交互才能在出現問題時恢復內容的解決方案。
使用 Jetpack VaultPress Backup，您可以一鍵恢復您的網站并快速恢復在線。 使用 Jetpack 移動應用程序，您可以隨時隨地恢復，即使網站完全宕機也不例外。
對店主最好的部分？ 您的所有客戶數據和訂單都受到保護並保持最新狀態。
自定義 WooCommerce 產品頁面的一些最佳實踐是什麼？
無論您使用何種方法編輯和自定義 WooCommerce 產品頁面，請遵循這些最佳實踐來保護您自己、您的網站和您的客戶。
每次都先備份您的站點。 添加或更新站點代碼時，一個錯誤都可能導致問題。 您需要準備好盡快恢復站點，而不會丟失任何訂單。 Jetpack VaultPress Backup 是適用於 WordPress 的最佳實時自動備份解決方案。
它已為您完成，因此您甚至不必擔心在嘗試更改之前保存您的站點。
在父主題文件之外更改代碼。 當您編輯主題或插件文件時，這些更改將在下次更新主題或插件時被覆蓋和撤消。
有多種方法可以在不直接編輯主題或插件文件的情況下將代碼添加到您的網站。 您可以使用代碼片段插件添加、編輯或刪除頁面上的元素，並通過主題定制器中的附加 CSS 字段設置您的網站樣式。 您還可以創建子主題。 重要的是在不受主題或插件更新影響的地方進行更改。
注意速度。 無論您如何自定義您的產品頁面，您都希望確保您的網站速度不會受到影響。 借助 Jetpack Boost，您可以立即改進關鍵領域，從而改善用戶體驗和 Google 對您網站質量的看法。 更快的網站意味著客戶更有可能留下來，Google 也更有可能在搜索結果中推薦您。 快速提升可以走很長一段路。