當(dāng)您使用WooCommerce建立您的在線商店時(shí)，您將獲得一些專為電子商務(wù)設(shè)計(jì)的有用頁面模板，包括購物車頁面。但是，您可能希望改善默認(rèn)外觀和功能。通過本文將知道如何編輯您的WooCommerce購物車頁面。
這個(gè)過程非常簡單。您可以嘗試很多不同的方法。例如，您可以使用塊來自定義您的 WooCommerce 購物車頁面。或者，手動(dòng)修改購物車頁面。
WooCommerce中編輯購物車頁面的一些想法
1.添加追加銷售和交叉銷售元素，例如“購買用戶也喜歡”或“您可能感興趣”部分。或者添加“保存以備后用”按鈕。也可以通過電子郵件接觸這些客戶。
2.在購物車頁面展示您的品牌，例如您的徽標(biāo)和公司特色。默認(rèn)情況下，這些內(nèi)容不會(huì)包含在內(nèi)，但當(dāng)您自定義購物車頁面時(shí)，您可以確保它與網(wǎng)站匹配。這可以提高品牌知名度并給客戶留下深刻印象。
3.可以在結(jié)帳之前查看和修改購物車中的所有商品。
如何編輯和自定義您的 WooCommerce 購物車頁面
1. 使用塊編輯購物車頁面
如果您當(dāng)前沒有使用塊主題，您仍然可以使用 WooCommerce 塊。默認(rèn)情況下，這些包含在 WooCommerce 6.9 或更高版本中，或者您可以使用 WooCommerce 購物車和結(jié)帳塊擴(kuò)展（有些人可能將其稱為 WooCommerce 塊插件）。
安裝該工具后，導(dǎo)航到您的 WooCommerce 默認(rèn)購物車頁面并在塊編輯器中打開它。
將它添加到頁面中，您應(yīng)該立即看到它提供了一些有用的設(shè)計(jì)元素，例如您可能感興趣的...部分。
您會(huì)注意到您當(dāng)前正在查看一個(gè)完整的購物車，但您可以單擊標(biāo)有“已填充購物車”的眼睛按鈕，將視圖切換到“空購物車”頁面。
如您所見，您的 WooCommerce 購物車頁面在缺少項(xiàng)目時(shí)會(huì)發(fā)生顯著變化。它顯示一個(gè)簡單的瀏覽商店鏈接，并突出顯示商店中的一些新商品。
此時(shí)，您可以使用塊進(jìn)一步自定義新的購物車頁面布局。請(qǐng)記住，除了購物車塊之外，WooCommerce Blocks 擴(kuò)展還為您提供了 30+ 元素供您使用。其中包括“手工挑選產(chǎn)品”塊和“特價(jià)產(chǎn)品”塊。
如果您使用的是塊主題，則可以使用站點(diǎn)編輯器自定義購物車頁面。導(dǎo)航到 Appearance → Editor。 選擇模板→管理購物車→的所有模板。 現(xiàn)在，您可以使用塊以與我們剛剛討論的相同方式更改購物車頁面的外觀。
2.使用其他WooCommerce擴(kuò)展程序
除了 WooCommerce Blocks 之外，您還可以使用許多其他擴(kuò)展來進(jìn)一步自定義您的購物車頁面。雖然它們中的大多數(shù)都是優(yōu)質(zhì)的，但它們通常價(jià)格實(shí)惠且物有所值。
例如，當(dāng)您購買 WooCommerce 的購物車追加銷售或產(chǎn)品推薦擴(kuò)展時(shí)，您可以輕松地將追加銷售和交叉銷售添加到您的購物車頁面。
此外，您可以嘗試購物車通知擴(kuò)展，以根據(jù)客戶購物車的內(nèi)容顯示自定義消息。
這可能非常有用，因?yàn)槟梢宰尶蛻袅私庑柽_(dá)到多少支付金額以獲得免費(fèi)送貨（以及許多其他事情）。
此外，如果您想提供產(chǎn)品可變功能，WooCommerce 購物車中的產(chǎn)品切換器是必不可少的。它允許您將更改產(chǎn)品鏈接直接添加到購物車頁面。
此功能可以讓客戶不必回您的目錄即可找到想換的產(chǎn)品。
3. 手動(dòng)自定義購物車頁面（使用代碼和鉤子）
WooCommerce 的一大優(yōu)點(diǎn)是它允許您使用鉤子。有兩種類型的 WooCommerce 鉤子：操作和過濾器。操作掛鉤允許您在各個(gè)點(diǎn)插入自定義代碼。篩選器鉤子允許您操作和返回變量。
如果您想使用代碼和鉤子自定義購物車頁面，那么事先備份您的 WordPress 網(wǎng)站非常重要。由于實(shí)現(xiàn)自定義代碼可能是一個(gè)微妙的過程，因此您需要確保擁有網(wǎng)站的副本，以防萬一您犯了錯(cuò)誤。
您可以使用代碼和鉤子來創(chuàng)建自定義的WooCommerce購物車頁面。首先，如果不需要某些默認(rèn)函數(shù)，則可能需要?jiǎng)h除它們。
要?jiǎng)h除“應(yīng)用優(yōu)惠券”字段，您可以將以下代碼片段添加到functions.php文件中：
<?php
// hide coupon field on the cart page
function disable_coupon_field_on_cart( $enabled ) {
if ( is_cart() ) {
$enabled = false;
}
return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_on_cart' );
To add a custom message, like to advertise free shipping, you can add the following snippet above the cart table:
<?php
// Do NOT include the opening php tag
add_action( 'woocommerce_before_cart_table', 'wpdesk_cart_free_shipping_text' );
/**
* Add "free shipping" text to WooCommerce cart page
*
*/
function wpdesk_cart_free_shipping_text() {
echo '<div class="woocommerce-info">Free Shipping available on purchases above $99!</div>';
}
4.完全刪除購物車頁面
如果您經(jīng)營一家精品店或一家非常小的公司，提供最少的商品且沒有產(chǎn)品變體，那么購物車頁面可能不是必需的。將其排除可以直接便利的支付。
因此，如果您想完全刪除購物車頁面，只需導(dǎo)航到您的 WordPress 儀表板并轉(zhuǎn)到頁面。然后，您可以將鼠標(biāo)懸停在購物車頁面上，然后單擊“廢紙簍”將其刪除。
或者，您可能希望選擇“編輯”以打開塊編輯器，然后點(diǎn)擊“切換到草稿”。這樣，您以后可以在需要時(shí)隨時(shí)啟用/再次發(fā)布它。
或者，如果您尚未設(shè)置在線商店，則可以告訴 WooCommerce 使用啟動(dòng)向?qū)r(shí)要使用哪些頁面。
WooCommerce 購物車定制的提示和最佳實(shí)踐
- 優(yōu)化購物車和結(jié)帳頁面加載速度。緩慢的頁面會(huì)影響顧客體驗(yàn)，想讓網(wǎng)站有更快的速度可以了解優(yōu)化網(wǎng)站速度來提高網(wǎng)站性能。
- 不要使過程過于復(fù)雜。如果您在 WooCommerce 購物車頁面添加太多花里胡哨的東西，您最終可能會(huì)讓訪問者不知所措。謹(jǐn)慎選擇額外的特性和功能。
- 受眾的具體需求。應(yīng)考慮在網(wǎng)站添加那些內(nèi)容可以對(duì)產(chǎn)品的銷售更加有效。
- 首先備份您的網(wǎng)站。在編輯 WooCommerce 購物車頁面模板之前備份您的網(wǎng)站。
