如何編輯 WooCommerce 商店頁面 W/O Elementor ？

想知道如何讓您的 WooCommerce 商店頁面脫穎而出？ 最好的方法之一是編輯頁面以使其對購物者更友好。 例如，您可以添加 Elementor 的產品小部件以增強自定義。

但是因為有很多方法可以編輯您的 WooCommerce 商店頁面，您使用哪一種？ 好吧，這完全取決於您喜歡使用哪種方法。 您可以使用插件、elementor、代碼，甚至是elementor 和 Shopready 的組合。

事不宜遲，讓我們看看如何在沒有元素的情況下編輯 WooCommerce 商店頁面以增強用戶體驗。

如果您想為您的在線業務帶來更多銷售，您應該從編輯您的 WooCommerce 商店頁面開始。 這樣，您可以使其更加用戶友好。 以下是一些最有效的方式來定制您的商店頁面。

方法一：手動編輯

如果您執行一些編碼沒有問題，您可以手動編輯您的 WooCommerce 商店頁面。 以下是有關如何執行此操作的分步指南。

第 1 步：獲取子主題並為其命名

當您購買網站的主題時，它應該帶有一個子主題。 但是，如果您找不到它，您可以隨時要求您的主題開發人員為您提供一個。

要命名您的子主題，請打開您的 WordPress 控制面板並單擊文件管理器。 接下來，選擇 WP-Content >Themes>Your-theme-name。 從這裡，您可以選擇將您的孩子主題命名為 20-20 個孩子或類似的名稱。

第二步：在子主題中添加文件夾結構

創建子主題後，下一步應該是在其中創建文件夾結構。 首先，單擊您的子主題文件夾（20-20-child），您可以在主題下找到該文件夾。 然後，在其下創建一個新文件夾並將其命名為 WooCommerce。

第 3 步：創建子文件夾

在您的 WooCommerce 文件夾下，您需要創建另一個文件夾並將其命名為“archive-product-.php”。 此產品存檔模板文件夾將用作商店頁面模板文件。

第 4 步：將內容添加到您的商店頁面模板文件

您在第三步中創建的商店頁面模板文件將為空。 因此，要使其發揮作用，您必須添加內容。 為此，您可以使用代碼。 但是，如果您不知道如何去做，只需跳到下一步。

第 5 步：設計您的商店頁面模板

在這裡，您無需從零開始設計 WooCommerce 商店頁面。 相反，您可以使用已經預先設計好的產品頁面模板。 接下來，查找父主題並選擇 single.php 或 index.php 文件。 然後，將任一文件複製並粘貼到您在步驟 2 中創建的 WooCommerce 文件夾中。

之後，刪除現有的“archive-product.php”文件。 然後，將新文件（single.php 或 index.php）命名為“archive-product.php”。 接下來，您將需要使用簡碼來編輯頁面。

第 6 步：使用簡碼

第一步是將您的產品頁面分成行或列。 例如，您可以決定將兩個產品放在一個兩列行中。 在這種情況下，您可以使用簡碼：

但是，要在兩列中顯示產品，每列最多顯示六個產品，請使用以下短代碼：

您只需在 archive-product.php 文件中輸入代碼。 但首先，您必須刪除現有代碼。 您還可以嘗試不同的簡碼，直到您獲得所需的商店頁面外觀。

方法二：使用 Elementor

沒有心情編碼？ 您還可以在 elementor 的幫助下自定義默認的 WooCommerce 產品頁面。 這種方法很容易使用。 這裡有一些簡單的步驟可以幫助您。

第 1 步：啟用 WordPress elementor

如果您沒有元素，請訪問您的 WordPress 儀表板並單擊插件，然後單擊添加新選項。 在搜索框中，查找 Elementor 網站構建器並選擇安裝它。 最後，按下激活按鈕。

第 2 步：設計新的產品檔案

安裝 elementor 後，您只需創建一個新的產品存檔模板。 您可以通過轉到 WordPress 管理儀表板並選擇我的模板來執行此操作。

在模板下，單擊儀表板左上角的添加新選項卡，然後選擇產品存檔。 最後，使用創建模板選項，為您的模板命名。

第 3 步：自定義您的模板

要自定義您的產品頁面模板，您可以選擇從頭開始。 在這種情況下，您會在編輯面板上找到一些可以使用的獨特小部件。

或者，您可以使用任何預先設計的模板。 Elementor 允許您選擇不同的產品頁面佈局和样式。 因此，您只需要選擇一種樣式，然後對其進行定制以適合您的品牌。

第 4 步：使用產品小部件

要進一步自定義您的 WooCommerce 商店頁面，您需要添加小部件。 在 Elementor WordPress 儀表板上，單擊元素選項卡。 您將看到許多可供選擇的小部件，包括菜單購物車、產品、自定義添加到購物車等等。

第 5 步：預覽您的自定義商店頁面

在點擊發布按鈕之前，您需要預覽您的產品頁面。 在左下角的面板中，您將看到一個眼形圖標。 單擊圖標並選擇預覽設置。 接下來，選擇要預覽的特定產品。

第 6 步：保存並發布

完成商店頁面的編輯並對自定義設置感到滿意後，單擊“發布”按鈕。 將出現一個添加條件字段，詢問您希望產品模板顯示在哪裡。

選擇 Shop Page 選項，然後單擊 Save & Close 按鈕。 您的自定義 WooCommerce 商店頁面現在應該可用。

方法三：使用插件

您可以使用任何您想要的插件，因為其中有很多可用。 但是，在這篇文章中，我們將專注於使用elementor 和 Shopready 插件的組合。 只需按照以下步驟編輯您的商店頁面。

第 1 步：安裝 Shopready

在您的 WordPress 儀表板上，單擊插件選項卡並選擇添加新選項。 接下來，在面板右上角的搜索框中，搜索 Shopready 並單擊激活按鈕。

第 2 步：添加商店頁面模板

接下來，您應該開發一個商店頁面模板來自定義默認的 WooCommerce 產品頁面。 為此，請找到您的 Shopready 插件，然後在儀表板下選擇模板。 在這裡，您會找到一系列預先構建的模板，您可以根據自己的品牌風格進行選擇。

選擇您的模板並將切換開關向右移動以激活模板。 最後，單擊“保存更改”按鈕。

第 3 步：自定義您的模板

選擇 Shopready 頁面模板後，現在是時候使用 elementor 對其進行自定義了。 您可以使用產品詳細信息頁面構建器、購物車頁面構建器、存檔頁面構建器甚至帳戶頁面構建器進行自定義。 Shopready 為您提供了許多自定義功能。 編輯完 WooCommerce 商店頁面後，只需單擊更新按鈕。

為什麼使用 Shopready 來編輯 WooCommerce 商店頁面？

不確定為什麼要使用 Shopready 而不是任何其他插件來編輯您的商店頁面？ 以下是一些原因。

使用方便

Shopready 不僅易於使用來編輯 WooCommerce 商店頁面，而且還擁有易於導航的自定義功能。 更好的是，它帶有預先設計的產品頁面模板選項。 因此，您無需成為技術專家即可使用此插件。

完整的插件套件

您應該考慮結合使用 elementor 和 Shopready的另一個原因是因為這個插件是作為一個完整的工具包提供的。 簡而言之，它包含自定義 WooCommerce 商店頁面所需的一切，包括商店構建器。

出色的客戶支持

當您使用 Shopready 編輯您的 WooCommerce 商店頁面時，您將獲得 24 小時支持和免費培訓。 因此，如果您在某個地方遇到困難，您可以隨時聯繫客戶支持尋求幫助。

提供免費和付費版本

如果您的預算緊張，您可以利用 Shopready 的免費版本，它提供了許多自定義選項。 但是，如果您想要更多站點許可證，您可以選擇 Startup、Business 或 Agency Shopready 版本。

結論

您在電子商務網站上展示產品的方式會對您的銷售產生重大影響。 出於這個原因，自定義您的默認 WooCommerce 商店頁面非常有意義。 但是，您必須決定是否要手動編輯頁面，使用 Elementor 或插件。

總的來說，如果您有基本的編碼知識，我們建議您手動編輯您的商店頁面。 但是，如果您想要一種快速簡便的方法來進行自定義，您可以考慮使用 elementor。 同時，如果您想要一種提供獨特定制功能的方法，您應該使用elementor 和 Shopready 的組合。