如何編輯和自定義WooCommerce 結(jié)賬頁面

為什么要構(gòu)建自定義 WooCommerce 結(jié)帳頁面?

確保結(jié)賬過程順暢無阻,對提升購物者的體驗至關(guān)重要。一個簡單直接的方法就是簡化結(jié)賬流程,讓購物者能迅速完成訂單。

不僅如此,定制WooCommerce結(jié)賬頁面還可以是一種聰明的營銷策略。比如,你可以通過收集客戶的詳細信息,來更好地了解他們,從而改進你的產(chǎn)品。

另外,還可以利用這個機會進行向上銷售和交叉銷售,也就是推薦顧客購買更多商品或與當(dāng)前商品相關(guān)的其他產(chǎn)品,這有助于增加每個訂單的平均金額。你還可以推薦相關(guān)的產(chǎn)品,或者提供如保險、禮品包裝等額外的服務(wù)。

圖片[1]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如何編輯 WooCommerce 結(jié)賬字段

定義結(jié)賬頁面的一個有效方法是編輯 WooCommerce 結(jié)賬字段。這樣,就可以為購物者提供一個簡化的流程,讓他們更容易完成訂單。

默認(rèn)情況下,WooCommerce 結(jié)賬頁面會提供一組有用的字段。其中包括名字、姓氏、電子郵件地址、電話、公司名稱、城鎮(zhèn)/城市等。

如果主要是零售,就不太需要“公司名稱”字段。同時,如果在客戶生日時向他們提供禮物或折扣,則添加出生日期字段。還有其他方法可以自定義 WooCommerce 字段??梢詰?yīng)用新顏色、調(diào)整字段大小或更改占位符文本。在客戶繼續(xù)訂單之前,刪除不必要的字段并配置需要填寫的必填字段可以加快客戶結(jié)賬,減少訂單流失。

編輯 WooCommerce 結(jié)賬字段的擴展功能

編輯 WooCommerce 結(jié)賬字段的最簡單方法就是使用擴展。有許多工具可供選擇。

結(jié)帳字段編輯器是一款高級 WooCommerce 擴展,可通過添加、刪除或編輯字段來優(yōu)化結(jié)帳頁面。

圖片[2]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

雖然不能刪除核心字段,但可以移動它們。這樣你就可以更好地控制結(jié)賬流程。

如果經(jīng)營的是一家大型商店,需要一個更復(fù)雜的插件,例如WooCommerce Checkout Add-Ons。

圖片[3]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

使用這個工具,可以在結(jié)賬階段插入免費(或付費)的附加組件。例如,客戶可以在訂單上添加信息。它還能提供禮品包裝服務(wù)和保險。甚至可以讓客戶選擇留下小費。

該插件可以完全靈活地管理 WooCommerce 字段??梢詣?chuàng)建有條件的附加組件,添加固定成本或基于百分比的成本,并動態(tài)更新訂單總額。此外,該工具還支持 WooCommerce 訂閱和續(xù)訂訂單。

如何自定義 WooCommerce Checkout 頁面

對 WooCommerce 結(jié)賬字段有了一些了解之后,我們來看看自定義結(jié)賬頁面的三種方法。

1. 使用 WooCommerce 購物車和結(jié)帳塊

自定義 WooCommerce Checkout 頁面的第一種方法是使用Woo Cart 和 Checkout Blocks擴展。工具是完全免費的。

找到WooCommerce Blocks頁面并單擊免費下載即可。

圖片[4]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后,系統(tǒng)會引導(dǎo)完成結(jié)賬流程(不過無需支付任何費用)。

使用這些區(qū)塊有不同的方法來定制結(jié)賬體驗。可以配置產(chǎn)品附加組件、接受多種付款方式、提供快速付款選項等。

注意,購物車和結(jié)賬區(qū)塊僅適用于 WordPress 6.9 或更高版本的網(wǎng)站。此外,還需要替換購物車和結(jié)賬頁面上的現(xiàn)有簡碼。

首先,導(dǎo)航到儀表板中的頁面并打開結(jié)賬頁面。在這里,可以刪除結(jié)帳短代碼

圖片[5]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后,搜索結(jié)賬區(qū)塊并將其添加到頁面中。現(xiàn)在,應(yīng)該可以看到基于區(qū)塊的購物車預(yù)覽,可以使用側(cè)邊欄中的設(shè)置對其進行自定義。

圖片[6]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

現(xiàn)在可以自定義結(jié)賬頁面了??梢燥@示/隱藏結(jié)賬步驟編號,顯示/隱藏某些字段,并使用塊設(shè)置將電話字段設(shè)為必填字段。

圖片[7]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

此外,還可以配置付費附加組件,允許購物者在訂單中應(yīng)用優(yōu)惠券或備注,啟用多種送貨選項等。

2. 使用 WooCommerce 擴展工具自定義結(jié)賬頁面

WooCommerce Blocks 提供了一種自定義結(jié)賬頁面的簡便方法,也可以使用各種 WooCommerce 擴展來開始使用。讓我們來看看幾個選項。

做出產(chǎn)品推薦

增加平均訂單量的最佳方法之一是在結(jié)賬頁面上推薦產(chǎn)品。產(chǎn)品推薦擴展讓這一切變得非常簡單。

圖片[8]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

可以在 “經(jīng)常一起購買 “或 “可能也喜歡 “等醒目標(biāo)題下進行交叉銷售。

圖片[9]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

或者,可以追加銷售產(chǎn)品以增加訂單價值??梢栽谡麄€商店中展示產(chǎn)品推薦,包括單個產(chǎn)品頁面和訂單確認(rèn)頁面。 

啟用多個送貨地址

自定義 WooCommerce 結(jié)賬頁面的另一種方法是啟用多個送貨地址。有時,客戶會訂購多種產(chǎn)品,需要寄往不同的地址(如家庭和工作地址)。

此外,有些客戶喜歡購買禮物并直接寄給親朋好友。如果沒有這個選項,客戶就不得不為每個送貨地址分別下單,這可能會相當(dāng)耗時。

可以使用“運送多個地址”擴展來提供此功能。

圖片[10]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

客戶可以要求將任意數(shù)量的產(chǎn)品發(fā)送到任意數(shù)量的地址。此外,他們還可以在自己的賬戶中保存所有這些送貨地址。購買此擴展后,只需在 WordPress 網(wǎng)站上安裝它,并啟用多種發(fā)貨方式。

讓客戶選擇送貨日期

商店獲得競爭優(yōu)勢的一個好方法是允許顧客選擇接收訂單的送貨日期。這可以提高整體客戶滿意度,因為你愿意付出額外的努力。

使用WooCommerce 訂單交付擴展程序,可以限制每天的訂單數(shù)量,以確保可以在指定的時間范圍內(nèi)處理所有訂單。

圖片[11]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

可以根據(jù)銀行假期、送貨方式和其他因素為客戶提供送貨日期選項列表。

在 WooCommerce 中購買并安裝該擴展后,就可以在結(jié)賬表單中顯示送貨日期選擇器。在這里,可以確定時間段、定義送貨范圍,并在客戶選擇特定日期/時間時收取額外費用。

圖片[12]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

3. 手動自定義結(jié)賬頁面

也可以手動更改結(jié)帳頁面。如果熟悉代碼操作,這是最好的選擇。 

如果直接編輯網(wǎng)站文件,最好創(chuàng)建一個子主題。否則,當(dāng)切換主題甚至更新當(dāng)前父主題時,會丟失做的任何更改。 注意,要記得備份數(shù)據(jù)!

圖片[13]-如何編輯和自定義WooCommerce 結(jié)賬頁面-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

該插件可自動創(chuàng)建實時備份,并安全地存儲在 Jetpack Cloud 中。更妙的是,VaultPress備份專為WordPress和WooCommerce網(wǎng)站設(shè)計,這意味著它可以備份文件、數(shù)據(jù)庫和客戶數(shù)據(jù)。

使用 CSS 編輯 WooCommerce Checkout 頁面的視覺設(shè)計

要手動編輯 WooCommerce 字段,首先要使用瀏覽器中的檢查工具來確定要自定義的具體區(qū)域。然后,就可以將更改應(yīng)用到主題中了。

以下是可編輯結(jié)賬頁面設(shè)計的主要標(biāo)簽(包括類和 ID)列表:

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">

假如想更改輸入框的背景顏色。在這種情況下,可以使用以下代碼片段:

.woocommerce-checkout input[type="text"] {
     background-color: #222;
}

如果想從“結(jié)帳”頁面中刪除一個字段,例如“賬單”部分中的“公司名稱”字段。在這種情況下,需要將以下代碼片段添加到functions.php文件中。

function wc_remove_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_company'] );
    return $fields;
}

add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

準(zhǔn)備好后,記得保存更改。

總結(jié)

雖然 WooCommerce 提供了一個內(nèi)置的結(jié)賬頁面,但仍有大量方法可以增強該頁面以提高銷售額并配置有用的結(jié)賬選項。例如,可以啟用多個送貨地址、將某些字段設(shè)為必填字段或提供禮品包裝。編輯和自定義 WooCommerce Checkout的頁面有三種方法:使用WooCommerce 購物車和結(jié)帳塊,使用 WooCommerce 擴展,使用代碼手動自定義結(jié)賬頁面。


聯(lián)系我們
教程看不懂?聯(lián)系我們?yōu)槟赓M解答!免費助力個人,小企站點!
客服微信
客服微信
電話:020-2206-9892
QQ咨詢:1025174874
郵件:info@361sale.com
工作時間:周一至周五,9:30-18:30,節(jié)假日休息
? 轉(zhuǎn)載聲明
本文作者:Harry
THE END
喜歡就支持一下吧
點贊0 分享
評論 搶沙發(fā)

請登錄后發(fā)表評論

    暫無評論內(nèi)容