如何輕鬆自定義 WooCommerce 商店頁面？

WooCommerce 的默認商店頁面是動態預設的，大多數情況下您無法控制其設計。 那麼如何自定義 WooCommerce 商店頁面呢？ 如何使它符合您的需求，因為它是您網站上的基本頁面之一？ 能夠有效地管理商店頁面絕對是一個優勢。

商店頁面經常用作佔位符來顯示您當前所有可供出售的商品。 商店頁面的顯示方式可能與您網站上其他頁面的顯示方式不同，因為您可以為特定的帖子類型存檔設置不同的設置。

您使用的主題將成為默認 WooCommerce 商店頁面外觀和佈局的基礎。 商店頁面上的產品通常以網格佈局顯示。

網格佈局通常包含產品的圖像，以及來自客戶評論的價格、產品名稱和星級。 該頁面上列出了每個產品的簡要產品說明。 產品變體或產品數量通常不包括在網格數據中。

許多默認的 WooCommerce 商店頁面都是全寬的。 有些有一個側邊欄，允許您添加過濾器小部件（檢查最佳 WooCommerce 產品過濾器插件）和其他自定義選項。

無需任何定制，商店頁面就可以看起來很棒。 定制對於某些產品可能是理想的，但對於其他項目也無效。 如果您正在尋找一種更好的方式來展示您所銷售的產品，那麼現在是考慮自定義 WooCommerce 商店頁面的好時機。

如何自定義 WooCommerce 商店頁面？

有很多方法可以自定義默認的 WooCommerce 商店頁面。 您可以進行的更改數量或類型沒有限制。 例如，您可以添加自定義字段、顯示獨家優惠、編輯默認佈局、包括產品過濾器、添加或刪除側邊欄、創建自定義 WooCommerce 側邊欄或進行任何其他編輯。

您的商店頁面佈局和設計應該適合您銷售的產品。 商店頁面可用於：

• 鼓勵新客戶和現有客戶滾動瀏覽您的產品選擇。
• 讓訪問者在網站上快速找到他們想購買的商品。
• 使整個採購過程用戶友好和直觀。

您可以使用帶有過濾器選項的表格佈局在商店頁面上顯示和展示產品。 這種頁面可以使批發商和其他批量銷售商品的商店、提供高度可定制的商品（例如禮品籃、一盒巧克力或比薩餅）的商家、商品具有多種規格（例如筆記本電腦、硬件、廚房檯面等）以及提供具有各種附加或變體選項（鞋子、衣服和其他類型的個性化禮物）的產品的公司。

方法 1 使用頁面構建器自定義 WooCommerce 商店頁面

頁面構建器可以更改商店頁面的佈局、設計、顯示的商品數量、產品類型等。使用頁面構建器的最佳部分是您無需更改任何主題文件或編寫代碼。

您可以使用 Beaver Builder（請參閱 Beaver Builder 免費與付費比較）、Divi、Elementor、Visual Composer（Visual Composer 免費與高級之間的區別）或使用任何其他流行的頁面構建器來編輯 WooCommerce 商店頁面，而無需觸摸任何一個代碼行。

如果您使用的是 Elementor，則可以按照本指南使用 Elementor 自定義 WooCommerce 商店頁面。 如果您使用的是 Divi，請按照本指南編輯 WooCommerce 默認商店頁面。 如果使用 Beaver Builder，請遵循本指南。

此外，像 Astra、GeneratePress、OceanWP 等一些主題已經提供了用於自定義 WooCommerce 頁面的集成選項。

方法 2 使用插件自定義默認的 WooCommerce 商店頁面

以下是一些其他插件，它們不是可用於自定義和編輯 WooCommerce 頁面的頁面構建器：

1. StoreCustomizer（原 WooCustomizer）

StoreCustomizer 插件有免費和付費版本​​。 該插件使用 WordPress 定制器的設置對您的 WooCommerce 商店進行實時更改。 您可以在進行編輯時查看編輯。

如果需要，您可以隱藏價格（如何在 WooCommerce 中隱藏價格）或從您的在線商店中刪除“購買”和“添加到購物車”功能。 這樣做可以讓您創建自己獨特的 WooCommerce 目錄。

可以為特定產品或所有 WooCommere 產品設置目錄模式設置。 這些設置也可以僅適用於尚未登錄的用戶。這將要求用戶創建一個帳戶並登錄，以便他們可以從您的站點購買商品。

可以激活 WooCommerce 的產品快速查看以幫助用戶更快地瀏覽您的在線產品目錄。 用戶可以預覽他們感興趣的項目，然後將它們添加到他們的在線購物車中。

他們還可以使用 WooCommerce 商店頁面查看他們正在搜索的項目的簡短圖片庫彈出窗口。 一旦您的客戶知道他們要購買什麼，他們就可以輕鬆點擊“添加到購物車”。

彈出窗口可以設置為出現在您的類別和產品頁面上。 還有其他設置可用於根據 WooCommerce 商店的設計和佈局自定義圖片庫彈出窗口和產品快速查看。

WooCommerce Ajax 搜索可用於幫助您的客戶在更短的時間內找到他們想要的商品。 您可以使用簡單的短代碼在站點的任何位置顯示 Ajax 產品搜索功能。

調整該功能的設置，以便每當您的網站訪問者使用 Ajax 搜索欄時，都會顯示各種預測的 WooCommerce 項目。 該插件還有更多功能，它是自定義 WooCommerce 商店頁面的最佳方式之一。

2. 店面街區

Storefront Blocks 可用於覆蓋現有的默認 WooCommerce 商店頁面佈局和設計、類別頁面和主頁。 無需輸入任何代碼即可集成這些塊。

有八種不同的優質 WooCommerce Storefront Blocks 。 產品類別塊、產品輪播塊、產品滑塊塊、產品表塊、砌體產品塊和方形網格塊只是一些可用選項。

通常，WooCommerce 會為您動態創建類別頁面。 這些頁面不是很明顯。 它們通常與您商店中的所有其他頁面具有相同的佈局和設計。 你也不能改變他們的外表。

使用 Storefront Blocks，您可以創建自定義類別頁面。 如果您可以更改每個類別頁面的外觀，則銷售量增加的可能性更大。

Storefront Blocks 可以幫助改進您的搜索引擎優化，因為您可以添加與您要銷售的特定項目相關的更具吸引力的內容。

您甚至可以使用 Storefront Blocks 來重新設計您的主頁。 主題通常會自動生成在您網站主頁上找到的項目。 Storefront Blocks 允許您控制內容。 您可以重新排列現有部分或添加全新的部分、類別和產品。

塊可以重複使用、轉換和擴展到全寬。 它們允許您調整產品網格列和行、標籤對齊和定位、網格間隙、顏色、字體等等。

3. WooCommerce 塊

WooCommerce Blocks 可用於顯示您想要在商店中展示的產品。 產品可以按類別和標籤顯示。 您還可以展示特色商品、精選商品、暢銷商品或當前正在銷售的商品。

WooCommerce Blocks 的最新版本還包括分頁。 對於擁有大量產品供客戶選擇的店主來說，這是一個方便的功能。

方法 3 手動自定義 WooCommerce 商店頁面

另一種選擇是跳過頁面構建器和插件並手動自定義您的站點。 如果沒有必要，這是不想添加第三方插件的人的首選方法。

如果你要走這條路，你不必是編碼專家，但你應該有一些基本的編碼知識。 這種方法並不適合所有人。

第 1 步：創建子主題

如果您還沒有創建子主題（如何創建子主題），現在是創建子主題的最佳時機。 這樣，如果您編輯和更新主主題，您就不必擔心在保存這些編輯後有新主題更新時丟失所有這些更改。

有很多方法可以創建子主題。 您可以手動或借助諸如子主題嚮導和子主題配置器之類的插件來完成。 但是您在購買主題時可能已經有可用的子主題，或者您可以從主題開發人員那裡請求一個。

第 2 步：在您的子主題中創建文件夾結構

cPanel（請參閱 cPanel 與 vDeck 比較）或 FTP 客戶端可用於更改網站文件。 創建子主題後，請使用 cPanel 文件管理器或 FTP（如 FileZilla）轉到 /wp-content/themes/your-theme-name。 例如，如果您的子主題是二十二十個主題，您可以將您的子主題命名為二十二十個子主題或類似名稱。

現在在 /wp-content/themes/your-theme-name 創建名為 WooCommerce 的文件夾。 之後，在該文件夾中創建一個名為archive-product.php的文件，即商店頁面模板文件。

您現在有一個 WooCommerce 商店頁面。 下一步是向這個空頁面添加內容。

第 3 步：為您的商店頁面創建內容

您的網站訪問者可以在商店頁面中看到您在 archive-product.php 文本編輯器中輸入的任何內容。 如果您願意，您可以選擇向頁面添加編碼。 如果您不知道或不確定如何對該頁面進行編碼，則可以繼續執行第 4 步。

第 4 步：創建商店頁面模板

您可以使用現有模板並對其進行自定義，而不是從頭開始創建 WooCommerce 商店頁面。 首先查看父主題。 您需要找到 index.php 文件或 single.php 文件。

如果您看到兩者之一，只需將其複制並粘貼到您在步驟 2 中創建的 WooCommerce 文件夾中。如果 single 和 index.php 文件都可用，只需複制並粘貼single.php 文件。

刪除現有的 archive-product.php 文件。 您會想要這樣做，因為您剛剛複制和粘貼的文件現在將被命名為 archive-product.php 文件。

將剛剛粘貼到此處的文件的名稱（index.php 或 single.php）更改為archive-product.php 。

該文件將用作您的商店頁面，即使它可能看起來像您網站的產品頁面之一。 您可以使用短代碼自定義頁面，使其看起來更像商店頁面。

第 5 步：使用短代碼自定義商店頁面

首先將您的產品分成行或列。 例如，如果您想將產品分成兩列，每列不超過 6 個產品，您需要輸入以下短代碼：

[產品限制=”6″列=”2″]

如果您不知道如何輸入此短代碼，則可以執行以下步驟：

• 單擊archive-product.php 文件將其打開。
• 刪除 <main id="main" class="site-main" role="main"> 和</main><!– #main –>之間的所有文本。 請注意，您不應刪除這兩行代碼，而應刪除它們之間的內容。
• 在上一步刪除代碼的地方添加這行代碼： <?php echo do_shortcode ('[ products limit="6" columns="2" ]') ?>
• 完成後保存更改。

現在您的 WooCommerce 商店頁面已準備就緒！ 如果您願意，您可以添加額外的代碼或短代碼。 隨意嘗試不同的短代碼，直到您對商店頁面的外觀感到滿意為止。

創建自定義 WooCommerce 商店頁面

您的 WooCommerce 商店的商店頁面是人們用來了解有關您的產品的更多信息的主要頁面之一。 這就是為什麼有一個吸引客戶並吸引他們購買的頁面很重要。

設計需要具有視覺吸引力和用戶友好性。 商店頁面傳統上是預先設計的。 如果您想更改頁面的外觀，WooCommerce 沒有可用的內置資源。

默認商店頁面為網站所有者提供了許多方便的功能。 問題是它不是每個在線商店的最佳解決方案。 增強商店商店頁面的佈局和設計有助於增加銷售額、提高轉化率、使網站更易於使用。 它也應該在視覺上足夠吸引人，以吸引更多流量到您的網站。