如何創建 WooCommerce 一頁結帳

已發表: 2021-03-18

您想減少購物車放棄並提高轉化率嗎？在本指南中，您將學習如何創建帶有和不帶有插件的 WooCommerce 單頁結帳，以幫助您提高銷售額。

結帳是在線商店最重要的頁面之一，這已不是什麼秘密。然而，這也是許多用戶放棄購物車的步驟。根據最近的研究，近 70% 的購物者在某個時候放棄了購物車，其中 21% 的人在結賬時放棄了購物車。為什麼？通常是因為購買過程太長或太複雜。

儘管沒有適用於每個電子商務網站的單一解決方案，但單頁結帳頁面對大多數企業來說效果更好。這就是為什麼為您的 WooCommerce 商店創建單頁結賬可以幫助您減少購物車放棄並提高銷售額的原因。

什麼是 WooCommerce 單頁結賬？

一頁結帳在單個頁面上顯示結帳的所有字段。它可以包括購物車內容、付款詳細信息、帳單和送貨地址、送貨選項以及其他信息，例如圖像、文本或其他聯繫表格。

創建 WooCommerce 單頁結帳 - QuadLayers — *一頁結賬示例*

一頁結賬背後的主要目標是縮短購買過程並減少購物車放棄。當客戶填寫所有信息以在一個頁面上下訂單時，他們更有可能完成該過程。

一頁結賬的好處

一頁結賬的一些好處是：

它有助於減少購物車放棄
縮短結帳流程
提高轉化率
易於理解，因為購物者可以在一頁上看到他們需要填寫的所有信息

有關單頁和多頁結帳的更多信息，請查看此完整指南。

如何創建 WooCommerce 單頁結賬

有多種方法可以創建 WooCommerce 一頁結帳：

使用插件
以編程方式
使用頁面構建器
從 WordPress 儀表板

在本節中，我們將了解每個選項，以便您選擇最適合您的技能和需求的選項。

1）使用插件創建一頁結帳

在 WooCommerce 中創建單頁結帳的第一個選項是使用插件。那裡有許多一頁結帳插件，包括免費的和高級的。對於此演示，我們將使用 WooCommerce Direct Checkout。該插件將幫助您縮短結帳流程並提高轉化率。您不僅可以創建單頁結帳，還可以刪除不必要的結帳字段、添加快速購買按鈕等等。

直接結帳的一頁結帳

Direct Checkout 有一個具有基本功能的免費版本和 3 個具有更多功能的高級計劃，起價為 19 美元（一次性付款）。

首先，下載插件。您可以通過此鏈接或您的 WordPress 儀表板執行此操作。激活後，轉到WooCommerce > Direct Checkout 。在這裡，按如下方式進行設置，以便將用戶從商店和單個產品頁面直接重定向到結帳頁面。

添加到購物車警報：它將“查看購物車”警報替換為直接結帳
添加到購物車鏈接：它將“查看購物車”鏈接替換為直接結帳
購物車重定向：這允許您更改“添加到購物車”按鈕的行為
購物車重定向到：您可以選擇將用戶添加到購物車後的重定向位置。在這種情況下，我們會將他們重定向到結帳
替換購物車 URL ：在購物者將商品添加到他們的購物車後，我們會將他們重定向到結帳，我們將用結帳鏈接替換購物車 URL

創建 WooCommerce 一頁結帳 - 直接結帳

請注意，這些更改將適用於商店、單品和類別頁面。此外，請確保您沒有任何將用戶帶到購物車的鏈接，因為我們將禁用它。

而已！您剛剛通過將客戶從產品和商店頁面直接重定向到結帳來簡化結帳流程。最重要的是，購物者將能夠在結帳頁面上編輯和確認他們的訂單。

您可以使用免費版本的 WooCommerce Direct Checkout 創建單頁結帳，但如果您想要更多功能將結帳提升到一個新的水平，您可以查看一些高級計劃。

2) 以編程方式創建一頁結帳

在本節中，我們將使用一些 PHP 腳本和 CSS 樣式來為我們使用插件創建的單頁結帳添加功能。因此，我們建議您查看第一部分並安裝並設置插件以創建單頁結帳。從字面上看，這將需要幾分鐘。

完成後，讓我們看看如何以編程方式完全自定義一頁結帳頁面。

注意：由於我們將編輯一些核心主題文件，因此在開始之前，請確保您創建了站點的備份並在您的站點上安裝了子主題。您可以使用這些子主題插件中的任何一個，也可以按照本指南自行創建一個。

2.1) 將產品元數據添加到結帳頁面

讓我們首先添加一些關於用戶正在購買的產品的信息。我們將在結帳頁面上顯示產品的名稱、縮略圖和描述。

由於我們禁用了購物車頁面，在將產品添加到購物車後，購物者將被重定向到結賬處。即使購物車頁面是隱藏的，我們也可以使用它從中檢索所有產品信息。

為此，只需將以下代碼粘貼到您的子主題的functions.php文件中：

 // 顯示產品元數據的鉤子
add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 函數 QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>你即將購買一個';
 $cart = WC()->cart->get_cart();
 foreach( $cart as $cart_item_key => $cart_item ){
 $product = $cart_item['data'];
 echo $product->get_name()."</h2>";
 迴聲 $product->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo "<h3>填寫下表完成您的訂單</h3>";
 }

要對此進行測試，請單擊任何產品上的購買按鈕，並在被重定向到結帳頁面後，您將看到如下內容：

將產品元數據添加到結帳頁面

2.2) 覆蓋 WooCommerce 結帳模板文件

負責打印結帳頁面的文件是form-checkout-php ，它位於模板文件夾中的 WooCommerce 插件中： /woocommerce/templates/checkout。

要覆蓋此文件，請從 WooCommerce 插件複製原始文件並將其粘貼到結帳文件夾中，在您的子主題的 WooCommerce 目錄中。

覆蓋 WC 結帳模板文件

在默認的 WooCommerce 結帳中，佈局設置為兩列。計費、運輸和其他表格顯示在第一列中，訂單詳細信息顯示在另一列中。

您可以通過編輯包含表單的 <div> 元素的 HTML 類來更改此設置，從col2-set到col1-set ，如下所示：

 <div class="col1-set">

在這個簡單的版本之後，所有的表單都將顯示在一個全角列中，如下所示：

全寬結帳表格

接下來，我們將編輯訂單詳細信息的標題，並使用以下腳本將其從“您的訂單”更改為“訂單審核”：

 <h3><?php esc_html_e('訂單審核', 'woocommerce' ); ?></h3>

這些只是您可以在此處執行的操作的幾個簡單示例。隨意更進一步並進行自己的自定義。您可以在此處使用任何原生 WordPress 功能。有關結帳掛鉤的更多信息，您可以查看這篇文章。

要了解有關如何以編程方式自定義 WooCommerce 模板的更多信息，請查看此完整指南。

2.3) 將購物車添加到結帳頁面

您可以在結帳頁面上使用一些簡碼，因此如果您想在那裡添加購物車，您可以使用 WooCommerce 購物車簡碼，如下所示：

 echo do_shortcode(' [ woocommerce_cart ] ');

要在訂單詳細信息之前顯示購物車，請將此 PHP 腳本粘貼到您的子主題的functions.php文件中：

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 函數 QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

您現在應該會看到購物車，其中包含用戶在結帳表單末尾添加的產品：

將購物車添加到結帳頁面

2.4) 向結帳頁面添加自定義內容

當客戶查看訂單詳情時，他們可以選擇一種付款方式，然後點擊“下單”完成購買。由於該塊顯示在右側列中，因此我們將在左側插入一些內容以實現平衡設計。

這是將粘貼在functions.php文件中的自定義內容函數，我們在其中解釋了一些退貨政策、付款方式、交付等。隨意定制它並使其適應您的商店：

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
函數 QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>關於您的訂單的更多信息：</h3>
 <p>非常感謝您在我們的商店購買。 以下是您可能需要了解的一些有用信息</p>
 <ul>
 <li>我們會盡最大努力盡快交付，但為了保持最佳服務，您的產品最多可能需要兩個工作日才能送達</li>
 <li>我們的退貨政策允許您在購買後 15 天內要求更換。 <a href="#">在此處閱讀商店政策</a></li>
 <li>如果選擇信用卡付款方式，在某些情況下，這可能會導致交貨延遲兩天</li>
 <li>如果您對收到的商品不滿意，您也可以根據我們的退款政策選擇退款</li>
 <li>你有優惠券嗎？ 如果注意，請在此處獲取並返回，以便您可以應用它</li>
 </ul>
 </div>','woocommerce');
}

這是最終的結果：

將自定義內容添加到結帳頁面

2.5) 向結帳頁面添加一些 CSS 樣式

在function.php文件中，您會看到我們添加了自己的類，我們稱之為custom-product 。我們將使用這個類通過一些 CSS 腳本來設置內容的樣式。此外，我們可以在不使用自定義類的情況下對新一頁結賬的設計進行最後的潤色。

這是我們在本教程中使用的完整 CSS 腳本。只需將其複制並粘貼到您的子主題的style.css文件中：

 /* 隱藏帳單標題 */
.woocommerce-billing-fields > h3:nth-child(1){
    顯示：無；
}
/* 你即將購買... */
.custom-product > h2:nth-child(1){
    文本對齊：居中；
}
/* 圖片 */
img.attachment-woocommerce_thumbnail:nth-child(2){
    邊距：自動；
}
/* 描述 */
.custom-product > span:nth-child(3){
    邊距：自動；
    寬度：50%；
    顯示：塊；
}
/* 完成您的訂單 ...*/
.custom-product > h3:nth-child(4){
    文本對齊：居中；
    邊距：25px 0 25px 0；
}
/* 更多信息.. */
.custom-product > div:nth-child(8){
    向左飄浮;
    寬度：47%；
}
＃顧客信息{
    邊距底部：40px；
}

注意：對於此演示，我們使用了 Storefront 主題，因此如果您使用不同的主題或添加了自己的自定義項，您可能需要調整 CSS 選擇器。

之後，如果一切順利，您應該在結帳頁面上看到以下內容：

一頁結帳示例頁面

而已！您剛剛以編程方式創建了一個完全自定義的 WooCommerce 單頁結帳。

3) 使用頁面構建器創建單頁結帳

在 WooCommerce 中創建和自定義單頁結帳的另一個有趣選項是使用頁面構建器。那裡有幾個頁面構建器。對於此演示，我們將使用 Site Origin。擁有超過 100 萬個活動安裝，由於其簡單性和效率，它是最受歡迎的頁面構建器之一。

對於大多數頁面構建器來說，這個過程是相似的，所以無論你使用什麼，你都應該能夠毫無問題地遵循指南。

首先，從 WordPress 存儲庫下載 Site Origin，在您的網站上安裝並激活它。然後，使用編輯器打開結帳頁面並為其添加名稱。我們將其稱為一頁結帳。

如您所見，結帳頁面只是放置在 Gutenberg 塊中的 WooCommerce 短代碼。如果您在後端禁用了 Gutenberg 塊，您還將在舊文本編輯器中看到相同的短代碼。只需刪除短代碼塊並添加一個頁面構建器。

現在我們可以開始使用頁面構建器創建一個完全自定義的單頁結賬。您可以在列中添加任何小部件，並將其設置為所需的佈局。請記住，您需要插入

[ woocommerce_checkout ]

再次使用簡碼，否則將無法正常工作。

最好的部分來了。您還可以使用頁面構建器佈局中的任何可用小部件或模塊。此外，您可以包含其他短代碼。購物車和“我的帳戶”很常見。

這是一個基本示例，因此您需要調整每個小部件並根據需要自定義結帳頁面。另外，請記住，每個頁面構建器的工作方式都不同，因此即使過程相似，您也可能需要調整一些東西。作為一般建議，全寬且沒有側邊欄的模板通常效果最好。

4) 使用 Gutenberg 塊編輯器創建一頁結帳

同樣，您可以使用 Gutenberg 塊編輯器自定義您的 WooCommerce 一頁結帳。為此，在您的 WordPress 儀表板中，打開結帳頁面，您將看到帶有結帳簡碼的塊。讓我們通過單擊添加塊按鈕 ( + ) 並選擇Columns來向此頁面添加更多塊。

創建 WooCommerce 一頁結帳 - 古騰堡

在這裡，您可以使用任何可用的塊和短代碼來完全自定義您的結帳頁面。或者，如果您有編碼技能，您還可以通過在代碼塊中插入您自己的 HTML 代碼來編輯結帳。對於這個演示，我們在 2 列中添加了購物車和我的帳戶簡碼，因此它看起來像這樣：

這就是您可以使用 Gutenberg 塊編輯器在 WooCommerce 中輕鬆創建單頁結帳的方式。

最後提示

創建單頁結賬時，請始終牢記結賬的主要目標：讓客戶盡可能輕鬆地下訂單。您應該避免任何會分散用戶注意力的內容。
用戶在點擊“下訂單”按鈕之前需要查看的所有信息都應該在同一頁面上可用，這樣他們就可以從結帳頁面完成所有操作。包括所有必要的信息，並避免插入將用戶帶到不同 URL 的鏈接。
用戶在購買時不喜歡長內容頁面。保持簡單和乾淨，專注於實現高效和專業的結帳頁面

結論

總而言之，一頁結賬將幫助您縮短購買流程、減少購物車放棄並提高轉化率。儘管在某些情況下，多頁結賬可能更有效，但對於大多數商店來說，較短的結賬往往效果更好。

在本指南中，我們看到了在 WooCommerce 中創建單頁結帳的不同方法：

帶插件
以編程方式
使用頁面構建器
使用 Gutenberg 塊編輯器

如果您想要快速高效的解決方案，使用Direct Checkout是您的最佳選擇。這個免費增值插件允許您在幾分鐘內構建一頁結帳，它還包括一些功能，可幫助您改善結帳並增加銷售額。例如，您可以刪除結帳字段、添加快速購買和快速查看按鈕等等。如果您不想安裝其他插件並且使用頁面構建器，則可以使用 Gutenberg 塊編輯器或頁面構建器創建結帳頁面。

另一方面，如果您具有編碼技能，則可以有更多選項來編輯結帳頁面。使用 Direct Checkout 插件創建結帳後，您可以添加 PHP 和 CSS 腳本來完全自定義結帳。在本文中，我們已經看到了一些示例，但您還可以做更多的事情。隨意將它們用作基礎並四處尋找最適合您的方法。

您最喜歡在 WooCommerce 中創建單頁結帳的方法是什麼？你知道我們應該包括的任何其他內容嗎？在下面的評論部分讓我們知道！