如何在 WooCommerce 中自定義添加到購物車按鈕

 add_action（'woocommerce_single_product_summary'，'QL_add_text_above_add_to_cart'，20）；
功能“QL_add_text_above_add_to_cart”（）{
  echo '14 天退款保證';
}

另一方面，您也可以在添加到購物車按鈕下方添加文本。 例如，這對於通知購物者批量購買可能有折扣很有用。 要在“添加到購物車”按鈕下方添加文本，您可以使用以下代碼段：

 add_action（'woocommerce_after_add_to_cart_button'，'QL_add_text_under_add_to_cart'）；
功能 QL_add_text_under_add_to_cart() {
  echo '聯繫我們批量購買';
} 

如您所見，這些都是非常簡單的更改，您可以立即提高轉化率。

3) 更改添加到購物車按鈕的顏色

現在，讓我們看看如何通過更改顏色來編輯“添加到購物車”按鈕。 儘管大多數 WordPress 和 WooCommerce 主題都帶有按鈕的默認顏色，但您應該確保它們與您商店的風格相匹配。

要自定義 WooCommerce 中“添加到購物車”按鈕的顏色，您需要將 CSS 代碼片段添加到style.css文件中。 您可以使用 FTP 客戶端或從 WordPress 儀表板通過轉到外觀 > 自定義 > 附加 CSS來訪問它。 這裡有兩個選項：

1. 更改單個產品上的“添加到購物車”按鈕的顏色
2. 更改存檔頁面上添加到購物車按鈕的顏色

3.1) 更改單個產品的顏色

將此代碼粘貼到style.css文件中並將顏色更改為您想要的顏色。 在這種情況下，我們將使用紅色背景和銀色文本。

 .single-product .product .single_add_to_cart_button.button {
背景顏色：#FF0000；
顏色：#C0C0C0；
}

3.2) 更改存檔頁面上的添加到購物車按鈕顏色

要在 WooCommerce 存檔頁面上自定義添加到購物車按鈕並更改其顏色，請使用此代碼並將十六進制代碼更改為對您的商店有意義的代碼。

 .woocommerce .product .add_to_cart_button.button {
背景顏色：#FF0000；
顏色：#C0C0C0；
} 

4) 去掉 Add to Cart 按鈕，在 Shop Page 添加 Direct Purchase 按鈕

現在，讓我們看一個更高級的選項。 具有多個步驟的購買過程會增加購物者在每個階段放棄的機會。 這就是為什麼縮短渠道是優化結賬和提高轉化率的好方法。

在本節中，我們將向您展示如何使用 Direct Checkout for WooCommerce 刪除“添加到購物車”按鈕並將其替換為直接購買按鈕。 這個插件有免費版和高級版，並帶有許多功能來幫助您簡化結帳。 此外，它允許您跳過購物車頁面並將用戶直接重定向到結帳頁面，從而縮短購買過程。 那麼，讓我們看看如何完全刪除“添加到購物車”按鈕並用直接購買按鈕替換它。

更改添加到購物車按鈕的功能

首先，您需要安裝並激活 Direct Checkout。 您可以從此鏈接下載免費版本，或查看起價為 19 美元（一次性付款）的高級計劃之一。

激活插件後，在您的WordPress 儀表板中，轉到WooCommerce > 直接結帳 > 常規並填寫以下選項：

有關如何自定義 WooCommerce 商店頁面的更多信息，請查看此完整指南。

更改添加到購物車按鈕文本

在“常規”選項卡中設置選項後，“添加到購物車”按鈕會將用戶重定向到結帳頁面。 但是，您還應該在更改其功能時編輯按鈕的文本。 該按鈕不再將產品添加到購物車中，因此最好將其更改為“立即購買”之類的內容。 為此，請轉到存檔選項卡並填寫以下選項： 您可以在此處更改特定產品類型的按鈕文本。 我們將通過在相應字段中選擇所有產品來將更改應用於所有類型的產品。 之後，是時候檢查前端了。

如您所見，我們在 WooCommerce 商店中自定義了“添加到購物車”按鈕，並將“添加到購物車”按鈕替換為“立即購買”按鈕，該按鈕將客戶從商店頁面直接帶到結帳頁面。 最重要的是，我們已經從我們的商店中完全刪除了購物車功能。

有關如何刪除“添加到購物車”按鈕的更多信息，請查看此分步指南。

5）自定義添加到購物車按鈕並在產品頁面上添加直接購買按鈕

最後，我們可以做類似的事情並自定義 Add to Cart 按鈕以將用戶從產品頁面重定向到結帳。

這樣，您可以輕鬆地在 WooCommerce 中的“商店”和“產品”頁面上創建自定義的“添加到購物車”按鈕。 最好的部分是每個頁面上可以有不同的按鈕。

如何自定義添加到購物車的消息

除了自定義按鈕外，您還可以編輯已添加到購物車的消息。 最簡單的方法是通過將以下腳本粘貼到functions.php文件來更改消息。

 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 ) ); 
    返回$消息； 
} 

這些只是幾個示例，但您還可以做更多的事情，並在消息中添加鏈接和按鈕。 有關這方面的更多信息，請查看我們關於如何更改 WooCommerce 添加到購物車消息的指南。

獎勵：更改不同類別的“添加到購物車”按鈕文本

現在假設您有不同的產品類別，並且您希望每個類別都有自定義的“添加到購物車”按鈕。 例如，您可能希望為產品類別 1 設置一個顯示“立即購買”的按鈕，但為類別 2 顯示文本“下載”。

為此，您應該使用我們在第 1 點中使用的相同函數。 add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

您需要獲取每個產品的類別，然後根據分類使用條件來更改文本，如下所示：

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

我的添加到購物車按鈕不起作用。 我能做什麼？

添加到購物車按鈕可能不起作用的原因可能有多種。 最常見的是：

• 插件/主題不兼容
• 信息不完整的產品
• 緩存問題
• 結帳端點
• 永久鏈接
• ModSecurity 問題
• 和更多

要了解如何解決這些問題，請查看我們的指南，了解如何修復“添加到購物車”按鈕。

筆記

• 您保存在插件選項面板的存檔部分中的設置將適用於基本商店和產品類別頁面，而產品部分中的設置將僅適用於產品頁面。
• 對於此演示，我們使用了 Storefront 主題，但您可以使用與 WooCommerce 兼容的任何主題。
• 儘管大多數主題可以毫無問題地集成，但某些主題可能會改變默認的 WooCommerce 功能，並且在使用直接結賬時可能會導致問題。
• 我們已經介紹了 Direct Checkout 的一些基本功能。 如需更多高級功能，請查看高級計劃，這將幫助您將商店提升到一個新的水平。

結論

總而言之，自定義添加到購物車按鈕會對您的業務產生重大影響。 這就是為什麼我們建議您根據商店的需求調整它。 在本指南中，您學習了以編程方式和使用插件自定義“添加到購物車”按鈕的不同方法：

• 更改“添加到購物車”按鈕的文本
• 在“添加到購物車”按鈕上方或下方添加文本
• 更改添加到購物車按鈕的顏色
• 刪除添加到購物車按鈕並在商店頁面上添加直接購買按鈕
• 自定義添加到購物車按鈕並在產品頁面上添加直接購買按鈕