如何編輯 WooCommerce 結帳頁面 W/O Elementor？

不喜歡默認的 WooCommerce 結帳頁面，因為它看起來很乏味，而且結帳過程也很長？ 好吧，這可能正是編輯頁面的正確時機。 這樣，您的客戶可以快速下訂單，這也有助於推動更多轉化。

但是您究竟如何自定義您的 WooCommerce 結帳頁面？ 事實證明，有 3 種有效的方法，包括手動編輯、使用插件和 Elementor 頁面構建器。 但是，最好的方法取決於您覺得哪一種容易使用。

現在，事不宜遲，讓我們首先找出您可能想要自定義結帳頁面的原因。 之後，我們可以看看如何結合使用 Elementor 和 Shopready來編輯您的 WooCommerce 結帳頁面。

為什麼您可能想要編輯您的 WooCommerce 結帳頁面

您的 WooCommerce 結帳頁面可以在訂單購買過程中產生重大影響。 正因為如此，您可能想要編輯它的原因有很多。 這些包括：

提升用戶體驗

任何默認 WooCommerce 的結帳過程都相當冗長。 因此，您可以選擇編輯頁面並縮短結帳流程。 這樣，您的客戶將獲得更好的購物體驗。

確保結帳安全

如果您的客戶認為他們的賬單和個人信息不安全，他們可能會離開而不進行購買。 因此，您應該考慮編輯結帳頁面模板以包含安全支付網關。

允許快速輕鬆地購買

您可能想要自定義 WooCommerce 結帳頁面的另一個原因是幫助您的客戶快速下訂單。 例如，您可以包括自動填寫詳細信息的選項。

提升品牌形象

感覺您的品牌在人群中並不突出？ 您可能想要編輯您的 WooCommerce 結帳頁面，使其具有專業的外觀和感覺。 一種方法是更改​​其設計甚至頁面模板。

如何編輯 WooCommerce 結帳頁面 WO Elementor？

有很多方法可以編輯您的 WooCommerce 結帳頁面。 您可以選擇手動完成，使用elementor 和 Shopready 的組合，或使用插件。 這是你的選擇。 因此，讓我們討論每種方法的工作原理。

方法一：手動編輯

此方法涉及使用代碼來編輯您的結帳頁面模板。 因此，與使用其他編輯方法相比，它可以讓您更好地控制自定義。 以下是有關如何執行此操作的簡單步驟。

第 1 步：選擇過濾器以自定義結帳字段

要編輯結帳字段，您將使用電子商務網站上的 functions.php 文件。 這應該很容易，因為 WooCommerce 為您提供了一個過濾器列表，可讓您自定義結帳字段。 例如，有：

• WooCommerce_shipping_fields
• WooCommerce_after_checkout_form
• WooCommerce_billing_fields
• WooCommerce_checkout_after_terms_and_conditions

第 2 步：編輯佔位符文本

接下來，首先自定義 order_comments_fields 上的佔位符文本。 您只需將以下代碼片段添加到您的 functions.php 文件即可完成此操作。

第 3 步：刪除字段

如果你想刪除一個字段，你只需將下面的代碼添加到你的 functions.php 文件中。

第 4 步：添加必要的字段

要將字段添加到您的 WooCommerce 結帳頁面，您只需將以下代碼插入您的 function.php 文件。

插入代碼後，您會注意到會出現一個額外的字段。 不過，沒什麼好擔心的。 您只需複制以下代碼即可驗證數據。

最後一步：保存數據

最後，輸入以下代碼以確保保存客戶在結帳頁面上輸入的每個詳細信息。

方法 2：使用 Elementor Page Builder

手動編輯結帳頁面需要您有編碼經驗。 幸運的是，如果您不是精通技術的人，您可以使用 elementor，它是最好的 WordPress 頁面構建器之一。 以下是有關如何使用 elementor 進行編輯的步驟。

第 1 步：找到結帳頁面

首先，轉到您的 WordPress 儀表板並找到頁面列表。 在頁面列表下，您可以找到默認的結帳頁面。 只需單擊“編輯”按鈕即可啟動 WordPress 編輯器。 接下來，選擇使用 Elementor 編輯選項以啟用 Elementor，然後啟動 Elementor 的編輯器。

第 2 步：添加 Elementor 結帳小部件

接下來，在 elementor 中打開默認結帳頁面並刪除現有的 WooCommerce 結帳小部件或短代碼。 然後，在 Elementor 編輯器中添加結帳小部件。 您應該能夠看到結帳頁面的實時預覽。

第 3 步：編輯結帳頁面上的內容

在位於 Elementor 側邊欄的內容選項卡下，單擊常規設置。 從設置中，您可以決定選擇一列或兩列佈局來編輯和自定義內容。

此外，您可以編輯帳單和運輸詳細信息、附加信息、您的訂單、優惠券和付款詳細信息。 如果你想添加一個優惠券框，也是可以的。

第 4 步：編輯結帳頁面樣式

在“內容”選項卡旁邊，單擊“樣式”選項卡以進一步自定義結帳頁面的樣式。 您希望確保自定義結帳頁面的設計與您商店的設計相匹配。

在樣式選項卡下，您可以選擇不同的設計選項，包括部分、排版、表格、訂單摘要和購買按鈕。 只需調整併嘗試不同的選項，即可找到使您的結帳頁面脫穎而出的樣式。

第 5 步：保存更改

完成自定義結帳頁面模板的樣式後，保存所有更改。 接下來，在最終發布頁面之前預覽更改。

方法3：使用插件

編輯 WooCommerce 結帳頁面的另一種簡單快捷的方法是使用插件。 現在，有一些插件選項可供選擇。 但是，在本文中，我們將重點介紹使用Elementor 和 Shopready 的組合。

第 1 步：為 elementor 安裝 Shopready 插件

在安裝此插件之前，請確保您的 WordPress 具有 Elementor 頁面構建器。 這是因為 Shopready 不能單獨工作。 然後，在您的 WordPress 儀表板上，單擊插件並選擇添加新的。 接下來，在搜索框中找到 Shopready，然後單擊激活按鈕。

第 2 步：自定義 Shopready 結帳頁面的內容

在您的 WordPress 儀表板上，選擇打開 Shopready。 您將被定向到 Shopready 的儀表板。 在儀表板下，有小部件、模塊和模板選項可幫助您自定義頁面。 您可以選擇任何選項來編輯和自定義內容。

第 3 步：啟用小部件

單擊小部件選項並選擇啟用全部選項卡。 然後，選擇保存更改。 但是，如果您不想啟用所有字段，只需選擇您喜歡的選項並保存更改。

第 4 步：啟用模塊

接下來，選擇 Modules 選項並單擊 Enable All。 您還可以選擇全部禁用選項或選擇性地啟用一些選項。 完成後，單擊“保存更改”按鈕。

第 5 步：啟用模板

在此部分下，您將找到諸如商店、結帳頁面、購物車、產品詳細信息頁面等選項。 單擊首選模板選項上的啟用選項卡，然後單擊保存。

第 6 步：啟用貨幣 API

單擊 API 選項卡並在提供的空白字段中輸入您的貨幣 API 密鑰。 然後，選擇保存更改選項以完成該過程。

為什麼使用 Shopready 來編輯 WooCommerce 結帳頁面

ShopReady 只是 Elementor 的一個附加組件。 由 QuomodoSoft 開發，這個插件在使用它來編輯你的 WooCommerce自定義結帳頁面時提供了很多好處。 這些包括：

廣泛的小部件

該插件為您提供了 100 多個商店頁面小部件，您可以輕鬆地將它們添加到 Elementor 頁面。 因此，您可以根據需要快速自定義 WooCommerce 結帳頁面。

預建模板

如果您是 WooCommerce 的新用戶，您應該考慮使用 Shopready 來編輯您的結帳頁面。 這是因為該插件具有預先設計的模板，以便於定制。

以客戶為中心的功能

你應該使用這個插件來編輯你的 WooCommerce 頁面的另一個原因是它以客戶為導向的功能。 其中一些包括感謝頁面、添加優惠券框選項和產品比較。

移動友好

此插件允許您編輯結帳頁面並使其適合移動設備。 因此，無論他們使用何種設備，您的客戶都可以獲得出色的購物體驗。

結論

總體而言，您可能想要編輯 WooCommerce 結帳頁面的原因有很多。 您可能希望改善客戶的用戶體驗、確保頁面安全或改善您的品牌。 無論哪種情況，您都可以選擇使用插件、elementor 或手動進行編輯。

當然，使用插件或elementor & Shopready 的組合是最簡單的方法。 這是因為 Shopready 提供了廣泛的小部件可供選擇。 因此，您可以編輯結帳頁面並根據需要使其個性化。 但是，如果您有編碼經驗，則始終可以手動編輯頁面。

如何在 WooCommerce W/O 插件中添加願望清單