如何使用 Divi 設置 WooCommerce 結帳頁面

在線購物旅程中最重要的階段是完成購買。 無論用戶花多長時間瀏覽您的在線商店，如果它沒有轉化為銷售，那麼它就無關緊要。

讓客戶的結賬過程盡可能無縫是至關重要的。 那麼，如何在 WooCommerce 商店上創建易於使用的結帳頁面？ 在這篇文章中，我們將了解如何使用 Divi 設置自定義的 WooCommerce 結帳頁面。

為什麼需要定制的 WooCommerce 結帳頁面？

沒有客戶必須處理繁瑣的結帳過程。 事實是，如果您的結帳頁面和流程壓力很大，您的客戶就不會閒逛。 如果您目前在電子商務網站上遇到廢棄的購物車，那麼檢查您的結帳頁面可能是個好主意。

從購物體驗的開始到最後階段，您需要給您的客戶一個“哇”的效果。 如果您選擇傳統的 WooCommerce 結帳頁面，您將無法實現此效果。

您需要創建一個獨特、無縫且易於使用的結賬流程，為您的客戶提供流暢的購物體驗。 創建自定義結帳頁面的一些優點如下：

• 減少購物車放棄

錯過的銷售機會通常是由於放棄購物車造成的。 在這種情況下，客戶已經將商品放入購物車，但在排隊的某個地方，他們在沒有完成購買的情況下離開了網站。 複雜的結帳頁面通常會導致放棄購物車。

如果您的客戶必須經歷一個漫長的過程或覺得該過程不安全，他們很可能對完成交易失去興趣。 使用自定義結帳頁面，您的客戶很有可能會發現流程更輕鬆、更安全。

• 快速簡便的交易

您的銷售漏斗應該盡可能短且更快地完成。 當您設置和自定義您的 WooCommerce 結帳頁面時，您可以輕鬆消除不必要的負擔，只關注交易過程中的重要細節。

結帳流程需要填寫多個頁面，客戶可能會厭倦並離開您的網站。 但是，當整個流程得到簡化時，您可以幫助您的客戶更快、更輕鬆地完成購買過程。

如何設置自定義 WooCommerce 結帳頁面

您的 WooCommerce 頁面帶有默認結帳頁面。 您可以使用第三方插件或簡碼對其進行編輯。 如果您是新用戶，您可能會發現使用這些選項很難編輯結帳頁面。 這就是使用像 Divi Builder 這樣的插件的地方。

Divi Builder 有一個 Divi 商店模塊，可讓您使用自定義結帳頁面構建令人驚嘆的在線商店。 在本節中，我們將查看設置自定義 WooCommerce 結帳頁面的分步指南。

在此之前，了解 SSL 證書、數據保護和網站安全性的重要性至關重要。 您需要 SSL 證書以獲得額外的安全層來加密存儲在您平台上的數據。

SSL 證書向您的客戶表明您的網站可以安全地提供信用卡詳細信息。 現在我們已經清除了這部分，讓我們深入研究創建自定義 WooCommerce 結帳頁面的詳細信息。

第一步：在使用 Divi Builder 插件之前，在 WooCommerce 插件設置中設置您的結帳頁面。 為此，請轉到您的 WooCommerce 儀表板並單擊“設置”。

接下來，單擊“高級”選項卡並找到結帳頁面。 從下拉菜單中選擇“結帳”選項並滾動到頁面末尾以單擊“保存”按鈕以保存更改。

第二步：結帳頁面已經設置好，下一步是安裝 Divi Shop Builder 插件。 因此，導航到優雅主題官方網站以購買 Divi Shop Builder 插件。 單擊“我的帳戶頁面”中的下載鏈接進行下載。

下載後，安裝並激活插件。 安裝完成後，插件將顯示在 Divi 菜單中。 在繼續之前，請確保您為購買的插件進行了身份驗證。

為此，請轉到優雅主題網站上的“我的帳戶頁面”以復制許可證密鑰。 當您對插件進行身份驗證後，您就可以開始使用它了。 Divi Shop Builder 在 Divi Builder 插件中工作，這使得構建您的 WooCommerce 商店成為一項非常無縫的任務。

第三步：下一步是創建您的自定義 WooCommerce 結帳頁面。 為此，請單擊以打開結帳頁面並啟用購買的 Divi Builder。 接下來，打開 Divi Builder 插件並開始添加模塊。

您會發現 Divi Builder 中添加了五個新模塊（結帳賬單、結帳優惠券、結帳訂單、結帳運輸和購物車/結帳通知）。 這些模塊將幫助您在 WooCommerce 商店上設置自定義結帳頁面。 以下是這些模塊的工作原理。

結帳帳單：這可以自定義所有表單輸入字段，客戶可以在其中輸入他們的帳單詳細信息。 您可以根據需要編輯字段標籤。

結帳運輸：這允許您的客戶指定輔助地址。 與 Checkout 計費一樣，您也可以根據需要編輯表單字段。

結帳優惠券：這使您的客戶可以輸入他們被分配的唯一促銷代碼以申請特別折扣。 您應該將 Checkout Coupon 模塊與其他模塊分開放置，以使其正常工作。 如果您有空間限制，請減少行和部分之間的填充以創建更多空間。

結帳訂單：這是您的客戶在進行付款選項之前建立並確認訂單的地方。 您還可以使用拖放功能酌情編輯此部分。

結帳通知：如果您想在其他結帳頁面添加註釋，可以使用此模塊。 您可以根據需要在設計中進行複雜或簡單的設計。

使用結帳模塊時，您必須確保它們與其他表單模塊不在同一部分。 如果將它們放在一起，它們將不起作用。 在構建結帳頁面時，您應該將聯繫表單模塊、選擇加入表單模塊、評論模塊和登錄模塊放在單獨的部分中，以使其正常運行。

與 Divi 主題中的其他模塊一樣，您可以使用 Divi Builder 自定義樣式您的結帳模塊。 為此，請按照以下步驟操作：

• 點擊打開結帳模塊

• 單擊“設計”選項卡

• 使用不同的元素以匹配您的設計和品牌標識的方式來設計您的頁面

• 您還可以通過“高級”選項卡添加更多自定義。 在“高級”選項卡中，您可以設置設備的滾動效果、過渡、定位和可見性設置。 您還可以為高級 CSS 腳本添加自定義 ID 和類。

結論

Divi 減輕了設置 WooCommerce 結帳頁面的壓力。 它使您可以編輯當前的結帳頁面並創建自定義的購物車頁面。 divi 插件具有許多功能，可讓您的商店像您想像的那樣吸引客戶。 它還使購物和結帳過程非常無縫。