如何自定義 WooCommerce 商店頁面 – 完整指南

已發表: 2020-05-07

尋找不同的方式來編輯您的商店頁面？ 你來對地方了。 在本指南中，您將學習逐步自定義 WooCommerce 商店頁面的不同方法：手動、使用頁面構建器和插件。

商店頁面是您展示產品的地方，因此它是您商店中最重要的頁面之一。 這就是為什麼它應該有一個有吸引力和用戶友好的設計。

商店頁面是您商店的預設計組件，沒有內置工具來更改其外觀。 但是，這並不意味著您根本無法更改它。 在本指南中，您將學習如何使用三種不同的方法自定義 WooCommerce 商店頁面。

什麼是 WooCommerce 商店頁面，為什麼要自定義它？

WooCommerce 定義的商店頁面是“產品帖子類型存檔的佔位符”。 簡而言之，它是您展示產品的頁面，因此它對您的業務成功至關重要。 在討論如何編輯它之前，讓我們看看為什麼應該自定義 WooCommerce 商店頁面。

現在，想像一下你走進一家商店買東西。 是什麼決定了您對購物過程的滿意度？ 最重要的事情之一是產品的排列方式以及您找到所需產品的難易程度。 由於互聯網，我們生活在一個相互關聯的世界。 而且，尤其是在全球大流行期間，購物已經從實體店轉向在線商店。 預計在未來 20 年，大約 95% 的購買將在網上進行。

人們在網上購物是因為它更容易、更快捷（或者至少應該如此）。 因此，您如何在 WooCommerce 商店頁面上安排您的產品以及如何向您的客戶展示它們會產生很大的不同。 不僅會影響您的轉化率和收入，還會影響您商店的聲譽。

自定義商店頁面的好處

總而言之，自定義 WooCommerce 商店頁面有幾個好處：

  • 從競爭對手中脫穎而出。 大多數商店都有相同的商店頁面，所以如果你定制你的，你會脫穎而出
  • 改善客戶體驗
  • 提高轉化率和銷售額
  • 搜索引擎優化改進。 除了編輯其設計外，您還可以編輯商店頁面並添加客戶可以在 Google 上找到的內容

現在我們更好地理解了為什麼要自定義商店頁面，讓我們關注以下問題。 當客戶到達您的商店頁面時，您如何給他們留下良好的印象？ 關鍵是要有一個有吸引力和用戶友好的設計，使購買過程變得容易。 說起來容易做起來難。

但是，在本指南中，我們將向您展示如何完全控制 WooCommerce 商店頁面的設計。

如何自定義 WooCommerce 商店頁面：分步指南

在本節中，我們將向您展示如何使用三種不同的方法自定義商店頁面：

  1. 以編程方式
  2. 使用頁面構建器
  3. 帶插件

1) 以編程方式自定義 WooCommerce 商店頁面

首先，讓我們看看如何在不依賴頁面構建器或插件的情況下自定義您的 WooCommerce 商店頁面。 這種方法的最大優點是您不會將任何第三方應用程序添加到您的站點。 儘管這不會超過幾分鐘，因為我們不會做任何困難的編碼，但如果你有一些基本的編碼技能會更好。

第 1 步：創建子主題

如果到目前為止您還沒有為您的主題創建一個子主題，那麼您應該擁有一個。 我們建議使用子主題，因為如果您對主題進行更改然後更新它，新文件將替換舊文件並且您將丟失更改。

但是，您可以通過從子主題自定義主題來避免這種情況。 您可以使用不同的方法創建子主題。 您可以使用子主題插件或自己編寫代碼。 有關這兩種方法的更多信息，請查看我們關於如何在 WordPress 中創建子主題的指南。

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

現在，我們將使用 FTP 客戶端來更改網站文件。 如果您沒有 FTP 帳戶，我們推薦 FileZilla 軟件，但您可以使用任何您喜歡的客戶端。 創建您的子主題後，轉到您的站點文件並遵循以下路線： /wp-content/themes/your-theme 。

假設您為 Twenty Twenty 主題創建了一個子主題。 文件夾名稱應該類似於二十個孩子主題。 然後，單擊它並創建一個名為WooCommerce的文件夾。 之後，創建一個名為archive-product.php的文件，這是商店頁面模板文件。 您已經在商店中創建了 WooCommerce 商店頁面，但它是空白的，所以現在您必須添加一些內容。

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

請記住，您在archive-product.php的文本編輯器中編寫的任何內容都會出現在商店頁面上，並且您的客戶會看到它。 在這裡，您可以使用一些編碼來使用您的商店頁面來發揮您的魔力。 但是，如果您不確定如何操作，請轉到下一步。

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

您可以使用現有模板並對其進行調整，而不是從頭開始創建 WooCommerce 商店頁面。 為此，請返回父主題並查找single.php或index.php文件。 如果您看到兩者中的任何一個，請將其複制並粘貼到您在步驟 2 中創建的WooCommerce文件夾中。如果您看到這兩個文件，請複制single.php 。 然後，刪除archive-product.php文件並將剛剛粘貼到此處的文件的名稱更改為archive-product.php 。

有了這個，我們將使用帖子模板文件作為您的商店頁面，但它看起來像一個產品頁面。 然而，這並不理想。 您希望您的 WooCommerce 商店頁面看起來像商店頁面，而不是產品頁面。 為了定制它，我們將使用一些簡碼。

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

首先，將產品分為列或行。 例如，如果您想在最多 6 個產品的 2 列中顯示您的產品，您需要將以下代碼粘貼到archive-product.php文件中：

 [ products limit="6" columns="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 中以編程方式自定義您的商店頁面。 假設您想展示您最受歡迎的產品。 為此，我們將使用以下短代碼：

 [ products orderby="popularity" ]

找到文件主題的 archive-product.php 文件並粘貼以下代碼：

 do_action('woocommerce_before_shop_loop');
echo '<h1>最受歡迎！！</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

如您所見，我們將在一個兩列行中顯示兩個產品(columns=”2″ limit=”2″) ，但是您可以將這些數字調整為最適合您的數字。

同樣，您可以展示最受好評的產品、最暢銷的產品等等。 我們建議您使用短代碼或通過編碼來玩並自定義商店頁面，以使其具有適合您業務的完美外觀。

有關如何通過一些編碼自定義商店的更多想法，請查看我們的指南，了解如何以編程方式編輯 WooCommerce 商店頁面。

2) 使用頁面構建器自定義 WooCommerce 商店頁面

雖然前面的方法可以為您節省一些時間，但對於沒有編碼技能的人來說可能很難。 這就是為什麼在這裡我們將展示一種更簡單的方法來完成這個技巧，而無需修改您的主題文件。 在本節中，您將學習如何使用頁面構建器自定義 WooCommerce 商店頁面。 使用頁面構建器，您可以更改商店頁面設計、佈局、產品類型和要顯示的產品。

最重要的是，您無需編寫任何代碼或修改主題文件。 無論您使用的是 Elementor、Visual Composer、Divi 還是任何其他頁面構建器，此方法都與它們兼容。

注意：您不需要編寫任何代碼行，但如果您熟悉 WooCommerce 短代碼，它會有所幫助。 我們的簡碼指南是一個很好的起點。 現在，讓我們看看如何使用頁面構建器自定義您的商店頁面。 為此，有兩個主要步驟：

  1. 使用頁面構建器創建頁面以顯示您的產品
  2. 將該頁面設為您的商店頁面

第 1 步：使用頁面構建器創建列表頁面並填充內容

假設大家都熟悉頁面生成器，這裡就不給大家講解如何使用了。 在本指南中，我們將使用 Elementor 作為我們的頁面構建器。 您需要做的第一件事是創建一個新頁面：

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

通常，在您的 WooCommerce 商店中，您會展示特色產品、暢銷產品和新到貨產品。 在這裡，我們將創建一個包含特色和暢銷產品的商店頁面。

自定義 WooCommerce 商店頁面特色和暢銷產品

現在，讓我們向頁面添加一些內容。 為此，我們將使用一些 WooCommerce 短代碼。 根據您要顯示的產品類別，您可以使用許多簡碼。 這些是一些會派上用場的：

  •  [ featured_products ]
  •  [ best_selling_products ]
  •  [ top_rated_products ]
  •  [ sale_products ]
  •  [ product_table ]
  •  [ recent_products ]
  •  [ products ]

按照我們的示例，我們將使用

短代碼。 去做這個：

  • 轉到您的WordPress 管理儀表板 > 產品頁面。 單擊右側的星形圖標選擇您的特色產品。

  • 在編輯頁面中，將文本編輯器向下拖動到特色產品下方。

  • 複製
    [ featured_products ]

    短代碼並將其粘貼在那裡。

  • 點擊更新，您的產品將顯示出來，如下圖所示：

就像這樣，對於暢銷書，您可以使用

[ best_selling_products ]

簡碼，對於最近發布的產品，您將使用

[ recent_products ]

等等。 由您決定要在商店頁面上顯示的產品類型。 另請注意，您可能需要一些短代碼屬性：

  • 設置列數
  • 限制顯示的產品數量

例如，如果您想顯示最多 6 個產品的 2 列，您將使用如下內容：

 [ products limit="6" columns="2" ]

簡碼非常強大且非常易於使用。 因此，我們建議您查看我們關於 WooCommerce 短代碼的指南，以充分利用它們。

第 2 步：將新創建的頁面設為 Shop Page

創建新頁面後，您需要將其設為您的 WooCommerce 商店頁面。 為此，我們建議您安裝子主題。 如果您還沒有創建一個，我們建議使用您喜歡的任何這些子主題插件。 在這裡，我們將繼續假設您已經安裝並創建了一個子主題。

  • 獲取新創建頁面的 URL
  • 轉到 WordPress 儀表板
  • 單擊外觀 > 主題編輯器，然後如果您看到彈出窗口，請單擊我了解
  • 之後，您將被帶到一個頁面，您可以在該頁面訪問右側的主題功能文件

  • 單擊functions.php文件，並將此代碼粘貼到它的末尾：
 add_action('template_redirect', 'quadlayers_redirect_woo_pages');函數 quadlayers_redirect_woo_pages()
{
    if (function_exists('is_shop') && is_shop()) {
        wp_redirect('https://www.quadlayers.com/shop/');
        出口;
    }
}

重要提示：請按原樣複製並粘貼代碼，不要刪除任何內容，並記住在wp_redirect ('[yourURL]')中替換您的 URL 然後，更新文件，就是這樣！ 您剛剛創建了一個自定義的 WooCommerce 商店頁面。

3) 使用插件自定義 WooCommerce 商店頁面

在本節中，您將學習如何使用插件自定義 WooCommerce 中的商店頁面。 一些最好的有：

  1. WooCustomizer
  2. WC 產品表的 WooCommerce 產品表（免費和高級）
  3. Barn2 的 WooCommerce 產品表（高級版）

在本節中，我們將向您展示如何使用免費和高級工具編輯商店頁面。

3.1) WooCustomizer

WooCustomizer是自定義 WooCommerce 商店頁面的出色插件。 它允許您通過幾次點擊來編輯您的產品、購物車、用戶帳戶和結帳頁面。 這個插件有很多功能，可以讓你個性化你的整個 WooCommerce 商店。 專注於商店頁面自定義選項，使用 WooCustomizer 您可以：

  • 編輯商店頁面，有 20 多種設置可供選擇
  • 從 WooCommerce 商店、存檔和產品頁面中刪除或編輯元素
  • 從商店和產品頁面中刪除 WooCommerce 麵包屑
  • 刪除或編輯商店頁面元素，例如購物車頁面上的優惠券部分，或購物車優惠券下拉菜單的文本
  • 在您的商店頁面上添加 AJAX 產品搜索欄和產品快速視圖彈出窗口
  • 自定義商店頁面上每行和每頁的產品數量
  • 更改商店和存檔頁面上顯示的列數
  • 添加產品快速查看，讓客戶從商店頁面查看產品
  • 編輯商店頁面和存檔銷售橫幅
  • 以及更多

自定義 WooCommerce 商店頁面 - WooCustomizer 值得注意的是，WooCustomizer 不會覆蓋您的 WooCommerce 頁面或模板。 它只是在您選擇編輯的元素上為您的主題添加額外的樣式選項。 儘管 WooCustomizer 有很多功能可以編輯您的 WooCommerce 商店頁面，但它也很容易使用。 該工具用途廣泛，無需編寫任何代碼，即可讓您更好地控製商店。

最後，WoooCustomizer 是一個免費增值工具。 它有一個具有基本功能的免費版本和 3 個具有更高級功能的高級計劃，起價為每年 29 美元。

3.2) WC 產品表的 WooCommerce 產品表精簡版

WooCommerce 產品表 (WCPT) 是一個出色的插件，可讓您輕鬆創建產品表佈局。 它的評分為 4.9（滿分 5 分）和超過 5,000 次活動安裝，是在 WooCommerce 中編輯商店頁面的頂級工具之一。

WC Product Table 是一個免費增值工具。 它有一個具有基本功能的免費版本和一個包含更強大功能的專業計劃，每年收費 49 美元。 在這裡，我們將向您展示如何使用精簡版，然後為您提供一些專業計劃的提示。

第 1 步：在任何頁面上創建 WCPT

首先，您需要下載並激活插件。 之後，您將在儀表板側邊欄上看到產品表。 單擊它，按添加新表，您將被帶到可以創建表的頁面。

使用插件自定義 WooCommerce 商店頁面

如您所見，您需要指定：

  • 表名：在我們的示例中，我們將其命名為Product Table 01
  • 產品類別：在查詢選項卡下，您將看到您擁有的類別。 為您的餐桌選擇一個

  • 列信息：接下來，轉到“列”選項卡。 在這裡，您必須繪製您想要的表格。 你必須決定你想要多少列，然後設計每一列。 WC Product Table 不僅為您提供筆記本電腦的選項，還為您提供手機和平板電腦列的選項。 因此，您可以為每種類型的設備指定所需的所有選項，包括標題、單元格模板和設計（字體、對齊方式、字體顏色、背景顏色等）。

創建所需的列後，單擊Save Settings ，一切就緒。

第 2 步：將表格粘貼到新頁面上

使用簡碼，您可以在任何地方顯示您在步驟 1 中創建的表格。 只需複制簡碼：

使用插件和短代碼自定義 WooCommerce 商店頁面

現在，讓我們使用簡碼在新頁面上顯示表格。 此時，我們可以假設您熟悉創建新頁面。 因此，使用頁面構建器，單擊Pages > Add New並為其命名。 例如，我的商店頁面 2 。 如果您使用的是 Elementor，您將看到如下內容：

向下拖動文本編輯器並將您剛剛複制的短代碼粘貼到那裡。

現在您將擁有一個帶有產品表格樣式的頁面。

第 3 步：將客戶重定向到您的新商店頁面

要將您的客戶重定向到新的商店頁面，您需要一個重定向插件。 此工具會將客戶從默認的 WooCommerce 商店頁面重定向到您在步驟 2 中創建的新頁面。這些插件中的大多數都是單一用途的並且非常易於使用。 在這裡，我們將使用 Redirection，這是最流行的重定向插件之一，但任何類似的工具都可以完成這項工作。

如何使用插件和重定向自定義 WooCommerce 商店頁面

激活插件後，轉到Tools > Redirection ，您將看到以下消息：

  • 在 Source URL 中，粘貼默認商店頁面的鏈接
  • 在目標 URL 中，粘貼您新建的商店頁面的鏈接
  • 然後點擊開始設置
  • 而已！ 這就是您使用免費插件自定義 WooCommerce 商店頁面的方式！

注意：請注意，使用此方法可能會影響您的 SEO 結果，因為搜索引擎通常不支持重定向原則。

專家提示

如果您不想影響您的 SEO，您可以使用專業版的 WooCommerce 產品表插件。 除了具有更高級的功能外，它還具有存檔覆蓋功能。

使用此功能，您不僅可以在商店頁面上，還可以在任何存檔頁面（如屬性、類別、標籤和搜索）上用您的產品表替換默認的 WooCommerce 網格。 要激活此功能，請轉到WP Dashboard > Product Tables > Settings > Archive Override。

3.3) Barn2 的 WooCommerce 產品表

編輯商店頁面的另一個絕佳選擇是 Barn2 的 WooCommerce 產品表插件。 這是一款高級工具，起價為每年 89 美元，非常易於使用。 此插件可幫助您在表格佈局中列出您的產品，然後將其插入到 Shop 頁面。 使用此方法，您將能夠將商店頁面的默認設計轉換為表格。

步驟1

首先，安裝並激活 WooCommerce 產品表插件。 然後，轉到WooCommerce選項卡並單擊設置 > 產品。 在產品選項卡下，您將看到產品表部分。 在這裡，輸入您在購買插件時獲得的插件許可證密鑰。

第2步
  • 首先，將產品表添加到給定的商店頁面和類別頁面
  • 回到插件的設置頁面 >表格顯示，選擇你的產品表格佈局的位置

  • 勾選商店頁面
  • 然後，如果要在所有產品類別頁面、產品稅收檔案和搜索結果上顯示產品表格，請勾選產品類別檔案
  • 保存更改
第 3 步

根據需要對錶格進行更改。 WooCommerce 產品表的設置頁面非常直觀。 與 WC Product Table 的 WC Product Table 不同，Barn2 工具不會要求您創建和配置每一列，這使其更易於使用。

獎勵：如何解決 WooCommerce 商店頁面空白問題

空白商店頁面是 WooCommerce 中最常見的問題之一。 商店頁面未顯示任何產品的原因有很多，但在這裡我們將向您展示如何解決最常見的問題。

  • 商店頁面配置：轉到WooCommerce > 設置 > 產品並確保您在商店頁面下使用正確的頁面
  • 插件兼容性：您的插件可能會導致衝突，使商店頁面顯示為空白。 要修復它，請停用所有插件並檢查導致問題的插件
  • 永久鏈接：轉到“設置”>“永久鏈接”並保存以更新永久鏈接
  • 目錄可見性：確保正確設置目錄可見性。 轉到WooCommerce > 產品並確保產品未設置為隱藏

有關這些問題的更多信息，請查看我們關於如何修復 WooCommerce 商店頁面空白問題的指南。

獎勵 2：在商店頁面上顯示類別

在商店頁面上顯示類別可以讓您更好地組織您的產品並幫助用戶找到他們正在尋找的東西。 在商店頁面上顯示類別的方式有三種。 在本節中，我們將向您展示如何使用 WooCommerce 中的默認選項進行操作。

首先，在您的儀表板中，前往外觀 > 自定義，然後轉到定制器側邊欄上的WooCommerce > 產品目錄。 然後，使用Shop Page Display並選擇是要顯示類別還是顯示類別和產品。

此外，您可以使用類別顯示選項在您的產品類別頁面上顯示/隱藏產品子類別和產品。 您可以實時預覽更改，完成後單擊發布以保存更改。

此方法適用，但不會為您提供太多控制。 有關為您提供更多靈活性的替代方法，請查看我們的指南，了解如何在您的 WooCommerce 商店頁面上顯示類別。

第一步

在執行這三種自定義方法中的任何一種之前，我們強烈建議您使用子主題。 您可以使用插件或以編程方式創建它。 子主題繼承了父主題的所有設計元素，因此您擁有該主題的副本，使其更安全。 為什麼？ 因為如果您直接編輯父主題的文件，那麼當您更新主題時，您所做的所有更改都會被覆蓋。

使用子主題，您可以更改其文件而不會在更新後丟失任何數據。 更重要的是，明智的網站所有者永遠不會弄亂原始主題文件。 除此之外，請記住，商店頁面是 WooCommerce 的預設頁面，因此它與所有 WordPress 主題兼容。 但是，由於我們建議在這三種方法中的兩種中使用子主題，因此可能存在兼容性問題。 如果是這種情況，您可以查看 WooCommerce 文檔以了解第三方問題。

結論

總而言之，商店頁面的設計以及您展示產品的方式會對您的轉化產生重大影響。 在 WooCommerce 中，商店頁面是預先構建的，雖然有一些選項可以編輯其佈局，但它們非常有限。

因此，使用本指南中描述的三種方法中的任何一種對其進行自定義將使您在人群中脫穎而出。 此外，它將更好地代表您的業務，並向您的客戶展示專業精神。 我們向您展示瞭如何使用三種不同的方法自定義商店頁面：

  • 手動
  • 使用頁面構建器
  • 帶插件

它們都有其優點和缺點，但它們都會完成工作，因此請使用最適合您的需求和技能的那個。 如果您沒有編碼技能，您可以使用頁面構建器或插件來編輯商店頁面。 我們推薦 WooCustomizer，因為它易於使用，為您提供了許多優化商店的功能，並且有免費版本。

最後，如果您在社交媒體中擁有強大的影響力，您應該考慮將 Facebook Shop 連接到 WooCommerce。 這樣，您就可以將產品目錄上傳到 Facebook，以便用戶查看產品並直接進入您網站的結帳頁面以完成購買。 如果您想自定義商店的其他部分，請查看以下指南：

  • 如何在 WooCommerce 中自定義我的帳戶頁面
  • 在 WooCommerce 中自定義添加到購物車按鈕
  • 如何編輯 WooCommerce 結帳（編碼和插件）
  • 在 WooCommerce 中編輯我的帳戶頁面
  • 如何在 Divi 中自定義 WooCommerce 產品頁面

現在是時候充分利用它並優化您的 WooCoommerce 商店頁面了。 您是否嘗試過這些方法中的任何一種？ 哪一個是你的最愛？ 請讓我們知道您對他們的看法，如果您有任何問題，請告訴我們！