如何自定義 WooCommerce 購物車頁面

已發表: 2021-12-28

您想編輯您的購物車頁面以使其更加用戶友好並充分利用它嗎？ 你來對地方了。 在本文中，我們將向您展示自定義 WooCommerce 購物車頁面的不同方法。

在我們了解如何做到這一點之前，讓我們先看一下默認購物車頁面，並了解為什麼首先應該自定義它。 讓我們更好地了解您可以定制什麼以及它將如何使您的商店受益。

為什麼要編輯購物車頁面？

作為店主，您應該嘗試優化業務的各個方面。 我們之前已經了解瞭如何自定義 Shop Page、Product Pages 和 Checkout Page。 在這篇文章中，我們將重點關注購物車頁面。

當涉及到客戶的購買決定時，購物車頁面是關鍵。 這是購物者在完成購買之前查看訂單的地方。 因此，您的購物車頁面應該為客戶提供附加值，以提高他們的轉化機會。

放棄購物車是在線商店的主要痛點之一，因為大約 80% 的用戶放棄了購物車。 這就是為什麼您應該特別注意您的購物車頁面。 即使放棄購物車的微小改進也會對您的銷售產生很大影響。

默認情況下，購物車頁面的外觀和行為方式取決於您的活動主題。 例如，以下是帶有 Astra 主題的購物車頁面的外觀。

帶有 astra 主題的默認購物車頁面

這是默認的二十一二十一主題的外觀。

帶有二十一個主題的默認購物車頁面

如您所見，購物車頁面的外觀和感覺因每個主題而異。 此外，默認購物車頁面非常基本。 即使它完成了工作，它也沒有提供任何額外的功能，錯過了交叉銷售、提供特別優惠等的機會。

通過自定義購物車頁面，您可以改善客戶的用戶體驗。 您可以為重要更新添加自定義消息、顯示相關產品、添加返回購物車按鈕、更改“添加到購物車”消息等等。 這些東西有助於改善用戶體驗，從而帶來滿意的客戶。

總而言之，改進購物車頁面可能對您的在線業務非常有益，並且值得付出努力。 現在讓我們向前邁出一步，看看在 WooCommerce 中自定義購物車頁面的不同方法。

如何自定義 WooCommerce 購物車頁面

有多種方法可以自定義 WooCommerce 商店的購物車頁面：

  1. 使用默認的 WooCommerce 塊
  2. 使用插件
  3. 使用頁面構建器
  4. 以編程方式

讓我們仔細看看每種方法，以便您選擇最適合您的方法。

1. 默認 WooCommerce 塊

WordPress 塊編輯器 Gutenberg 帶有一組專用於 WooCommerce 的默認塊。 其中包括所有產品、特色產品、過濾產品、所有評論等等。 您可以將總共 20 個 WooCommerce 塊添加到您網站上的任何頁面，就像普通的 Gutenberg 塊一樣。

默認 WooCommerce 塊

1.1）添加所有產品塊

導航到您的購物車頁面或在 WordPress 中創建一個新頁面。 單擊左上角的+圖標以展示可用於古騰堡編輯器的完整塊集。 然後，向下滾動到 WooCommerce 塊部分並找到所有產品塊。 單擊並將其拖動到頁面區域，它將將該塊添加到您的頁面。

將塊添加到頁面後，您庫存中的所有產品都將顯示在此處。 您可以進一步調整從最右側部分的設置菜單中顯示的產品設置，並更改列數、行數、排序等。

使用 WooCommerce 塊添加所有 WooCommerce 產品

1.2）添加最新產品塊

最新產品塊將顯示所有新添加到您的庫存。 只需單擊最新產品塊並將其拖動到您的頁面上，它就會顯示您的最新產品。 此外，您可以從設置菜單自定義塊的設置。

在 WooCommerce 中添加最新產品塊

1.3) 添加精選產品

Hand-Picked Products塊允許您手動選擇要在頁面上顯示的產品。 這可能是在頁面上展示某些特定產品或在另一個頁面上突出顯示某些產品的好工具。

要將塊添加到您的站點，只需將Hand-Picked Products塊拖到頁面上即可。 它將顯示一個搜索欄，您可以在其中查找要突出顯示的產品。 找到您想要的產品並單擊它以將其添加到列表中。 同樣，您可以重複該過程並將多個產品添加到列表中。

通過 WooCommerce Blocks 將精選產品添加到 WordPress

將所有想要的產品添加到列表後，點擊完成按鈕，瞧！ 您精心挑選的產品現在顯示在頁面上。 正如我們之前看到的，您可以從設置菜單中編輯設置。

手工挑選產品塊的設置

同樣，您可以添加您希望的任何其他 WooCommerce 塊。 您可以在整個頁面上使用單個塊，也可以在同一頁面上使用多個塊。 可能性是無止境。

我們已經看到了默認的 WooCommerce 塊如何幫助您自定義汽車頁面。 現在，讓我們繼續下一部分，看看我們如何使用第三方插件自定義購物車頁面。

2. 自定義購物車頁面的插件

您可以使用幾個插件來編輯購物車頁面。 在本節中，我們將看看一些最好的。

2.1) WooCommerce 塊

WooCommerce 塊

WooCommerce Blocks 是實驗性 WooCommerce 塊的早期訪問插件。 它允許您在將新的 WooCommerce 塊發佈到默認塊編輯器之前試用它們。

在撰寫本文時，該插件添加了兩個額外的塊：購物車和結帳。 激活 WooCommerce 塊時，購物車和結帳塊會自動添加到塊編輯器中，您可以像使用任何其他塊一樣使用它們。

WooCommerce 塊插件提供的塊

要在頁面上顯示購物車，只需拖動購物車塊，您的購物車就會出現。 然後，您可以單獨自定義每個購物車部分並將購物車塊作為一個整體。 此外，您甚至可以為裝滿和空的購物車編輯它。

使用購物車塊將購物車添加到 WordPress 頁面

同樣，您可以在頁面上顯示結帳表單並根據自己的喜好對其進行自定義。 您還可以個性化設置中每個塊的參數以及整個結帳塊。

使用結帳塊將結帳添加到 WordPress 頁面

此外，您可以在購物車或結帳頁面旁邊的單個頁面上放置許多塊，這在以前是不可能的。 這為您提供了很大的靈活性，並允許您完全按照自己的意願設計購物車頁面。

添加這些塊時，您可能會收到一條兼容性警告，表明該插件可能與其他插件或擴展存在兼容性問題。 這是因為某些塊是實驗性的並且正在開發中。 因此，它們應該只用於嘗試新功能，而不是用於生產。 一旦它們穩定，它們將作為默認的 WooCommerce 塊推出。

特徵
  • 出於測試目的試驗新塊
  • 嘗試購物車和結帳塊
  • 如果發現任何錯誤和錯誤，請報告
價錢

這是一個免費插件。

如果您想嘗試更多插件來編輯您的購物車頁面，請查看其他兩個：

2.2) StoreCustomizer

商店定制器

StoreCustomizer是一個多合一的軟件包，可讓您完全自定義您的 WooCommerce 商店。 您可以個性化從產品頁面到商店頁面、帳戶頁面、購物車頁面和結帳頁面的任何內容。

首先，您可以自定義整個商店使用的全局字體和顏色。 您還可以單獨個性化每個頁面、更改其外觀、添加新功能和特性等等。

該插件消除了編寫自定義片段來自定義 WooCommerce 商店部分的需要。 它自己添加所需的代碼，因此無需創建任何子主題或添加自定義代碼片段，因為它全部由插件處理。

最後，所有選項都方便地集成到主題定制器中。 因此，它可以無縫且輕鬆地自定義 WooCommerce 商店。

特徵
  • 多合一插件來自定義您的 WooCommerce 商店
  • 個性化產品頁面、商店頁面、帳戶頁面、購物車頁面和結帳
  • 根據您的喜好更改商店的設計
  • 無需任何編碼即可為您的商店添加額外的特性和功能
  • 通過主題定制器輕鬆訪問，使定制變得輕鬆
  • 極其輕量級，只添加必要的代碼本身
價錢

這是一個免費增值插件，這意味著它有免費和高級版本。 雖然免費版本提供了不錯的定制選項，但單個站點的高級計劃起價為每年 49 美元，並為您提供高級定制體驗。 它們包括一年的更新和支持。

2.3) WooCommerce 快速購物車插件

WooCommerce 快速購物車插件

WooCommerce 快速購物車旨在加快消費者的購買過程。 您可以使用該插件創建彈出式購物車和結帳頁面，而不是單獨的購物車和結帳頁面。 此外，您可以完全跳過購物車頁面並直接進行結帳。

購物車和結帳彈出頁面都可以完全自定義。 您可以修改版式和顏色以匹配您網站的主題。 您還可以調整按鈕的位置並自定義購物車佈局。

此外，您可以從購物車頁面應用優惠券，並使用彈出式購物車通過啟用交叉銷售來展示相關產品。 最後，該插件非常輕巧且經過良好優化，並支持所有廣泛使用的支付渠道，例如 PayPal、Stripe 和 Amazon。

特徵
  • 添加彈出式購物車和結帳頁面以實現即時轉換
  • 在彈出窗口中僅設置購物車或結帳或兩個頁面
  • 高度可定制
  • 輕量級和優化
  • 適用於所有流行的支付網關，如 PayPal、stripe、amazon
價錢

這是一個高級插件，單個站點每年花費 79 美元。 您還將獲得 30 天退款保證。

在本節中，我們看到了一些自定義 WooCommerce 購物車頁面的最佳插件。 讓我們看一下我們可以完成的一些自定義。 為了演示，我們將使用 StoreCustomizer 插件。 讓我們開始吧。

使用 StoreCustomizer 自定義購物車頁面

StoreCustomizer 是一個功能豐富的插件，可讓您自定義 WooCommerce 商店的幾乎所有方面。 在上一節中，我們了解了插件的特性和功能。 現在讓我們看看如何使用 StoreCustomizer 自定義購物車頁面。

安裝並激活插件

首先，轉到您的WordPress 管理儀表板並導航到插件 > 添加新的。 搜索StoreCustomizer插件，單擊立即安裝按鈕，然後激活它。

安裝並激活 StoreCustomizer 插件

自定義購物車頁面

激活插件後，轉到外觀 > 自定義以轉到主題定制器。

導航到主題定制器

StoreCustomizer 在主題定制器中嵌入了其定制工具和功能。 只需從主題定制器菜單導航到StoreCustomizer > 購物車頁面，您就會找到編輯購物車頁面的所有選項。

基本自定義

從基本自定義開始，您有幾種可能性。 您可以從購物車頁面禁用優惠券，阻止用戶更改購物車中的數量，或者在用戶更新商品數量時讓購物車自動更新。 您還可以刪除指向產品頁面的鏈接、顯示產品元數據、列出庫存產品等等。

購物車頁面的基本自定義

添加返回商店按鈕

如果用戶需要在購物車中添加商品，返回商店按鈕允許用戶返回商店頁面。 添加該按鈕是個好主意，因為它可以為客戶提供更好的購物體驗。

StoreCutomizer 允許您向購物車頁面添加返回商店按鈕，並徹底改變其設計和感覺。 此外，您可以更改按鈕文本並將其鏈接到任何頁面。 最後，您還可以更改按鈕的位置以滿足您的需要。

在購物車頁面上添加返回商店按鈕

顯示折扣/節省的金額

顯示折扣/節省的金額允許您在總價部分中包含一個塊，該塊顯示用戶在使用優惠券或在全店銷售期間獲得的購買折扣。 你可以給它起任何你喜歡的名字，也可以改變背景和字體顏色。

在購物車頁面顯示折扣

交叉銷售和購物車總計

您還可以在購物車頁面上顯示相關或特色產品。 通常，這些商品與購物車中的產品密切相關，因此用戶可能會將它們添加到購物車中，從而幫助您提高銷售額。

使用 StoreCustomizer 插件，您可以選擇要顯示的交叉銷售總數和每行要顯示的產品。 您可以選擇將交叉銷售部分移動到購物車總數下方或將其保留為默認值。 最後，您可以修改交叉銷售的標題，甚至可以根據需要刪除整個交叉銷售部分。

除了交叉銷售，您還可以更改購物車總計部分的標題。

在購物車頁面上編輯交叉銷售和購物車總計標題

編輯空購物車頁面

默認的 Empty Cart 頁面顯示一條消息，通知用戶購物車為空。 StoreCustomizer，允許您創建自定義消息以邀請用戶瀏覽商店。

您還可以包含一個返回商店按鈕以將客戶重定向到商店。 您可以完全自定義按鈕的設計和感覺，包括按鈕的顏色、字體和文本。

自定義空購物車頁面

自定義購物車錶並繼續結帳按鈕

在 StoreCustomizer 購物車頁面的設計組件區域下，您可以自定義購物車錶格以及繼續結帳按鈕。 您可以調整按鈕大小、顏色、字體等。

自定義購物車錶格按鈕並繼續結帳文本

如您所見，插件可以幫助您自定義很多 WooCommerce 購物車頁面。 但是，還有其他選擇。 在下一節中，我們將了解頁面構建器如何讓您編輯購物車頁面。

3. 使用頁面構建器

頁面構建器是一種萬能的解決方案，可以滿足您網站的所有修改需求。 大多數流行的頁面構建器都有一個專門的 WooCommerce 部分，可讓您完全自定義整個商店。

您可以使用頁面構建器來更改購物車頁面和任何其他 WooCommerce 頁面。 頁面構建器通常基於塊或小部件的概念。 有各種功能和多種特性的小部件，您可以將它們添加到您想要的任何頁面並進行編輯。

與頁面構建器合作時，您在個性化方面擁有很大的自主權。 此外，頁面構建器附帶各種預製模板，這些模板經過完全預配置和創造性設計，供您使用。

如果您想使用頁面構建器，兩個最受歡迎和首選的選項是 Elementor 和 Divi。 這兩個頁面構建器都有一組 WooCommerce 特定的塊。

例如，Elementor 包含 22 個不同的 WooCommerce 塊供您使用。 但是，值得一提的是 Elementor 中的 WooCommerce 塊僅在 Pro 版本中可用。

Elementor WooCommerce 塊

對於 Divi，您可以訪問 17 個 WooCommerce 塊。 Divi 是一個高級頁面構建器，因此您必須付費才能訪問這些功能。

Divi WooCommerce 模塊

插件和頁面構建器並不是自定義 WooCommerce 購物車頁面的唯一方法。 您還可以添加自定義代碼片段來個性化和增強購物車頁面的功能。 如果您有一些編碼技能，那麼下一部分適合您。 讓我們看看如何以編程方式更改購物車頁面。

4. 以編程方式

在繼續之前，我們建議您創建站點的完整備份並使用子主題來編輯functions.php文件。 如果您不知道如何操作，請查看我們的指南，了解如何創建子主題或使用任何這些子主題插件。

配置子主題後，轉到WP 管理儀表板 > 外觀 > 主題編輯器。 在這裡，您可以在子主題的functions.php文件的末尾添加自定義代碼片段。

編輯函數文件

代碼片段 插件是向您的網站添加代碼片段的另一種選擇。 您可以從 WordPress 存儲庫安裝插件以將片段添加到您的站點。 即使使用代碼片段，您也不需要子主題，但我們始終建議您擁有一個。

代碼片段插件

現在讓我們看看一些可用於自定義 WooCommerce 購物車頁面的代碼片段。

4.1) 購物車頁面上的自定義消息

首先，讓我們學習如何自定義購物車頁面上的消息。 這對於向您的用戶提供基本信息很有用。 例如，您可以向他們發出通知，例如“由於 COVID 導致發貨可能需要更多時間”，讓他們知道促銷活動等等。 只需將片段中的“這是我的自定義文本”替換為您自己的，然後將其發佈到您的網站。

 // 將自定義消息添加到 WooCommerce 購物車頁面
add_action('woocommerce_before_cart_table', 'shop_message', 20);
功能 shop_message() {
echo '<p class="woocommerce-message">這是我的自定義文本</p>'; // 更改此文本
}

完畢！ 這將在您的購物車頁面上顯示一條自定義消息。

將自定義文本添加到購物車頁面

4.2) 自定義內容清空購物車頁面

自定義您的 Empty Cart 頁面非常重要。 默認的 Empty Cart 頁面僅顯示一條消息，指出購物車為空。 但是，使用以下代碼段，您可以將其自定義為更友好和互動的消息，引導用戶瀏覽您的庫存，向他們提供有關您的產品的信息等。

只需替換“您尚未將任何商品添加到您的購物車。 查看我們的庫存，您會喜歡我們的產品”以及您想要顯示的信息。

 // 將自定義內容添加到 Woocommerce 空購物車頁面

add_action('woocommerce_cart_is_empty', 'empty_cart_custom_content');
功能 empty_cart_custom_content() {
echo '<h4>您還沒有添加任何商品到您的購物車。 查看我們的庫存，您會喜歡我們的產品</h4>'; //用自己的消息替換消息
迴聲do_shortcode（'
 ');
}

添加自定義文本以顯示在空購物車頁面上

4.3) 購物車頁面上的清空購物車按鈕

儘管讓購物者選擇清空購物車可能會適得其反，但事實是它提供了更好的體驗。 對於這種情況，您可以包含一個 Empty Cart 按鈕，讓用戶可以從他們的購物車中刪除所有商品。

要添加 Empty Cart 按鈕，只需使用以下代碼片段。

 // Woocommerce購物車頁面上的“清空購物車”按鈕

add_action('woocommerce_cart_coupon', 'woocommerce_empty_cart_button');
功能 woocommerce_empty_cart_button() {
echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'yes' ) ) . '" class="button cart"
title="' . esc_attr( '空購物車', 'woocommerce' ) . '">' . esc_html('空購物車', 'woocommerce') 。 '</a>';
}

add_action('wp_loaded', 'woocommerce_empty_cart_action', 20);
功能 woocommerce_empty_cart_action() {
if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
WC()->購物車->empty_cart();
$referer = wp_get_referer() ？ esc_url(remove_query_arg('empty_cart')): wc_get_cart_url();
wp_safe_redirect( $referer );
}
}

如果該按鈕未與其他購物車錶格按鈕分開，您可能需要將其添加到定制器 > 附加 CSS。

 a.button.cart {
左邊距：10px；
}

添加和清空購物車按鈕到購物車頁面

我們已經看到了一些代碼片段來編輯您的購物車頁面。 以這些片段為基礎並對其進行調整，您可以完全個性化您的購物車頁面並提高銷售額。

到目前為止，我們已經看到了自定義 WooCommere 購物車頁面的不同方法：使用默認選項、使用插件、頁面構建器和以編程方式。

現在讓我們更進一步，看看如何繞過購物車頁面，讓客戶的購買體驗更快。 讓我們看看如何跳過購物車頁面。

如何跳過購物車頁面

一些商店更喜歡跳過購物車頁面，讓客戶在結帳頁面上查看並支付訂單。 這縮短了客戶結賬所需的步驟，使購物體驗更快。

要跳過購物車頁面，請轉到WP 管理儀表板並導航到WooCommerce > 設置。 在產品選項卡下，選擇子菜單中的常規設置並選中“添加成功後重定向到購物車頁面”選項。 之後，請記住保存更改。

在 woocommerce 中啟用重定向到購物車頁面

然後，轉到高級選項卡並選擇頁面設置。 將默認購物車頁面更改為結帳並保存更改。

選擇結帳作為默認購物車頁面

完畢！ 您現在可以轉到網站的前端並自行檢查。

店舖前端

有趣的是，通過 WooCommerce 默認設置跳過購物車頁面並不是唯一的方法。 您可以使用專用插件或自定義代碼片段來實現相同的目的。 有關這方面的更多信息，請查看我們的指南，了解如何在 WooCommerce 中跳過購物車頁面。

獎勵：如何更改繼續結帳文本

編輯購物車頁面的另一個好方法是更改​​“ Proceed to checkout”文本。 這是一個有趣的選項，因此文本對您的商店更有意義。 例如，如果您銷售訂閱計劃中可用的數字產品，“立即訂閱”是比“繼續結帳”更好的選擇。

在本文中，我們已經解釋瞭如何使用 StoreCustomizer 插件編輯“ Proceed to Checkout ”按鈕和文本。 在本節中，我們將看到另一種使用自定義代碼段更改“Proceed to Checkout”文本的方法。

例如，讓我們看一下以下代碼段，將Proceed to Checkout按鈕替換為“Take me to checkout”。 只需使用您想要的任何內容更改“帶我去結帳”文本。

 //更改繼續結帳文本

remove_action('woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout',20);
add_action('woocommerce_proceed_to_checkout','custom_button_proceed_to_checkout',20);

功能 custom_button_proceed_to_checkout() {
echo '<a href="'.esc_url(wc_get_checkout_url()).'" class="checkout-button button alt wc-forward">' 。
__("帶我去結帳", "woocommerce") . '</a>'; //用你的文本替換“帶我去結賬”

在 WooCommerce 購物車頁面上更改繼續結帳文本

就這樣！ 您現在可以使用上面的代碼片段更改購物車頁面上的“ Proceed to Checkout ”文本。 然而，還有更多。 如果您想了解更多信息，請查看我們關於如何更改“繼續結帳”文本的帖子。

結論

總而言之，您的購物車頁面是您在線商店中最重要的頁面之一，因此您應該充分關注它。 這是您的客戶在完成交易之前查看訂單的頁面，因此需要特別考慮。

默認情況下，購物車頁面由活動主題定義並提供有限的功能。 但是，您可以使用購物車頁面做更多事情，例如添加自定義消息或交叉銷售以提高銷售額。 您還可以自定義 WooCommerce 購物車頁面，為您的客戶提供更好的購買體驗。

在本文中，我們詳細了解瞭如何自定義 WooCommerce 購物車頁面。 我們從塊編輯器附帶的默認 WooCommerce 塊開始。 然後我們跟隨 WooCommerce Blocks 插件，引入了兩個額外的實驗塊。 然後，我們看到了一些自定義購物車頁面的最佳插件，並看到了使用 StoreCustomizer 插件的演示。 我們還查看了一些您可以用來個性化購物車頁面的頁面構建器。 最後，我們查看了一些代碼片段，它們為您提供了對自定義偏好的更多控制和靈活性，並讓您充分利用購物車頁面。

除了自定義購物車頁面外，我們還看到瞭如何跳過購物車頁面以及如何使用插件和以編程方式更改“繼續結帳”消息。

你有沒有想過自定義你的 WooCommerce 購物車頁面？ 您想進行哪些定制？ 請在下面的評論中告訴我們。