如何在 WooCommerce 中更改繼續結帳文本

已發表: 2021-11-20

您是否正在尋找一種簡單的方法來更改您的 WooCommerce 商店上的結帳文本? 你來對地方了。 在本指南中,我們將向您展示不同的方法。

許多網站所有者自定義他們的商店頁面和產品頁面,編輯他們的結帳頁面並認為他們的整個網站都經過優化。 但是,您可以更改許多其他細節,以幫助您提高轉化率並改善您的商店。 我們已經了解瞭如何更改“添加到購物車”消息,今天我們將向您展示如何更改 WooCommerce 中的“繼續結帳”文本

在跳入不同的方法之前,讓我們更好地了解繼續結帳文本是什麼以及為什麼要自定義它。

什麼是繼續結帳文本?

默認情況下,結帳按鈕包含文本Proceed to Checkout

更改繼續結帳文本 - 默認文本

此文本在 WooCommerce 的模板文件中默認設置,大多數店主不會花時間更改它。 但是,考慮到這是完成銷售非常重要的一步,您應該盡可能優化它。 好消息是您可以輕鬆自定義此文本,使其更有意義並更適合您的商店設計。

例如,您可以將此文本更改為“立即加入我們的服務!” 或“在這裡結帳”以獲得更簡單的結帳流程。 您為改善結帳體驗而採取的所有小步驟都可以提高您網站的轉化率

大多數店主不會花時間自定義結帳文本,因為它涉及編輯WooCommerce 模板文件。 對於某些用戶,尤其是初學者來說,這似乎很困難或有風險。 但是,它不需要。 在下一節中,我們將向您展示使用和不使用代碼更改 Proceed to Checkout 文本的不同方法,以便您可以按照最適合您的技能的方法進行操作。

如何在 WooCommerce 中更改繼續結帳文本

編輯 Proceed to Checkout 文本有兩種主要方法:

  1. 以編程方式
  2. 帶插件

讓我們仔細看看它們。

1) 如何使用主題功能更改繼續簽出文本

讓我們從通過向functions.php文件添加自定義函數來自定義 WooCommerce 中的結帳文本的編程方法開始。

這個過程非常簡單,您只需將一個小代碼腳本粘貼到您的functions.php文件中。 在開始之前,我們建議您備份您的網站並使用子主題。 除了更安全之外,使用子主題,您還可以確保更新主題時,您的自定義不會被新的主題文件覆蓋。 這就是為什麼在您的網站上安裝子主題始終是一個好習慣的原因。

完成後,打開WP Admin Dashboard並前往Appearance > Theme editor 。 然後,單擊右側主題文件側邊欄上的Theme Functionsfunctions.php

更改繼續結帳文本 - 主題編輯器功能

現在,使用編輯器粘貼以下代碼片段。 該代碼將創建一個自定義函數,該函數將更改結帳的文本。 只需將代碼的Checkout-Text-Here部分更改為您想要的任何內容。

 函數 quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button button alt wc-forward">
<?php esc_html_e('Checkout-Text-Here', 'woocommerce'); ?>
</a>
<?php
}

例如,在以下腳本中,我們將使用文本“請移至此處結帳”,因此腳本將是:

 函數 quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button button alt wc-forward">
<?php esc_html_e( '請移至此處結帳', 'woocommerce' ); ?>
</a>
<?php
}

調整代碼以添加您想要的文本,將其粘貼到您的子主題的functions.php中,然後單擊更新文件以完成該過程。

該功能只是替換了 WooCommerce Proceed to Checkout 按鈕的文本,因此無論您使用什麼主題或您可能啟用了其他功能腳本,它都應該可以工作。

但是,如果您仍然不喜歡編輯核心文件,您可以使用專用插件來代替。

2) 如何使用插件更改繼續結帳文本

自定義繼續結帳文本的另一種替代方法是使用專用插件。 對於此演示,我們將使用一個名為Change Proceed to Checkout Text的簡單工具,只需單擊幾下即可非常輕鬆地編輯結帳文本。

這是一個免費插件,因此對於那些不想使用代碼來更改文本或想要經常更改 Proceed to Checkout 文本以進行測試和定制的人來說,它是一個很好的選擇。

安裝和激活插件

要安裝插件,只需打開您的WP Admin Dashboard並轉到Plugins > Add New 。 使用右上角的搜索欄搜索Change Proceed to Checkout Text ,單擊插件選項卡上的Install ,然後按Activate

更改繼續結帳文本 - 安裝插件

使用插件更改繼續簽出文本

要使用該插件,請轉到設置 > 更改繼續結帳文本。

更改繼續結帳文本 - 更改插件文本

要更改結帳文本,您只需在相應字段中輸入新的結帳按鈕文本即可。 假設我們要將文本更改為Move to Checkout 。 然後,按更新,您對繼續結帳文本字段的更改將被保存。

更改繼續結帳文本 - 更新文本插件

現在檢查前端,您將看到如下所示的結果:

這樣,您可以輕鬆地嘗試不同的文本,看看哪個文本的轉化率更高。

獎勵:如何更改已添加到購物車的消息

除了自定義 Proceed to Checkout 文本之外,您還可以做很多事情來改善商店的結帳體驗。 例如,另一個推薦的做法是編輯Add to Cart 消息。 您為改善結帳體驗而採取的步驟越多,您將獲得更好的結果,因此最好不要有任何機會。

讓我們看看如何自定義“已添加到購物車”消息

添加簡單的已添加到購物車消息和自定義已添加到購物車消息

要將“已添加到購物車”消息替換為簡單的自定義文本,您可以將代碼片段添加到functions.php文件。 為此,請前往 WordPress儀表板上外觀 > 主題編輯器。 然後,通過單擊右側邊欄上的functions.phpTheme 函數打開functions.php文件。

更改繼續結帳文本 - 主題編輯器功能

現在,您可以將以下腳本添加到編輯器,以自定義代碼的$message= ' '部分中的已添加到購物車消息。 在以下腳本中,消息將顯示“您的產品已添加到購物車。 感謝您與我們購物!” .

 add_filter('wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message');
功能 quadlayers_custom_add_to_cart_message() {
$message = '您的產品已加入購物車。 感謝您與我們購物!' ;
返回$消息;
}

假設您想將其更改為“感謝您購買我們的產品”之類的內容。 在這種情況下,您將使用此腳本:

 add_filter('wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message');
功能 quadlayers_custom_add_to_cart_message() {
$message = '感謝您購買我們的產品!' ;
返回$消息;
} 

如果您檢查前端,消息將如下所示:

更改繼續結帳文本 - 添加到購物車簡單消息預覽

自定義添加到購物車消息

或者,您可以個性化消息並將您的客戶已添加到購物車的產品名稱添加到購物車中。 為此,請使用以下腳本:

 add_filter('wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2); 
功能 quadlayers_custom_wc_add_to_cart_message($message, $product_id) { 
$message = sprintf(esc_html__('%s 已添加到您的購物車。感謝您購買產品!','tm-organik'), get_the_title( $product_id ) ); 
返回$消息; 
} 

更改繼續結帳文本 - 添加到購物車自定義消息

Update file ,查看前端,您應該會看到如下內容:

這需要在$message語句中自定義消息。 這些只是幾個示例,但您可以做的還有很多。 要了解更多信息,請查看我們的指南,了解如何自定義添加到購物車消息

或者,如果您想隱藏或刪除“添加到購物車”消息,您也可以通過將此代碼添加到您的functions.php 來實現。

只需粘貼此腳本並更新文件,您就應該完成了!

 add_filter('wc_add_to_cart_message_html', '__return_null');

結論

總之,繼續結帳文本出現在購買過程的一個非常重要的階段,因此自定義它總是一個好主意。 大多數店主都忽略了這一點,因此您可以利用這一點並從競爭對手中脫穎而出。

在本指南中,我們向您展示了兩種不同的方法來更改 WooCommerce 中的結帳文本:

  • 通過在主題文件中使用自定義 WooCommerce 鉤子和函數
  • 通過使用專用插件

兩種方法都能完成工作,因此請選擇最適合您的方法。 如果你有一些編碼技能,你可以使用編程方法。 使用簡單的腳本,您可以立即自定義文本。 另一方面,如果您是初學者並且不喜歡編輯主題文件,我們建議您使用專用插件。 在此演示中,我們使用了 Change Proceed to Checkout Text ,這是一個免費工具,您只需單擊幾下即可編輯和嘗試不同的文本。

你試過哪種方法? 你知道我們應該包括的任何其他內容嗎? 在下面的評論中讓我們知道!

最後,如果您想了解有關如何自定義在線商店的其他組件的更多信息,請查看其他指南:

  • 如何刪除 WooCommerce 中的附加信息選項卡
  • 如何自定義 WooCommerce 模板
  • 自定義“我的帳戶”頁面的方法