如何製作一鍵清空購物車 Empty Cart 的按鈕

如何製作一鍵清空購物車 Empty Cart 的按鈕

常常在 DEBUG 時發現,購物車若本身沒有一顆一鍵清空的按鈕是有點惱人的事,如果主機很快那還沒太大感覺,主機若一般般時就會發現這個問題很煩,光除錯在測試反覆新增加入與移除。但也有人覺得有這種按鈕會導致訂單量下降,其實不盡然,會清空購物車的動機莫過於常發生在「感覺選錯了」尺寸或者樣式,多了這個按鈕長時間其實是好的。

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

add_action( 'wp_loaded', 'custom_woocommerce_empty_cart_action', 20 );
function custom_woocommerce_empty_cart_action() {
	if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
		WC()->cart->empty_cart();

		$referer  = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
		wp_safe_redirect( $referer );
	}
}

這串碼很簡單,就是加在折扣碼按鈕欄位旁邊,其 title= 後面開始的清空購物車就自己修改吧。

喔對了,記得要一些 CSS 美化一下唷

如何製作一鍵清空購物車 Empty Cart 的按鈕
WooCommerce 清空購物車返回訊息+網址修改

WooCommerce 清空購物車返回訊息+網址修改

隨手筆記,我覺得我不知道民國幾年還會有機會用到這串修改語法。

這次的案例是客戶想修改清空購物車後,會有一顆按鈕「返回商店」網址是 /shop/

我個人是覺得客戶客製很多小地方其實不太必要,但遇到了就是得修改 🙁

WooCommerce 清空購物車返回訊息+網址修改
上圖是已經修改完成的樣子,心好累。

所幸修改很簡單,兩段語法可以解決這個部分,主要是利用「woocommerce_return_to_shop_redirect」與「woocommerce_return_to_shop_text」就可以處理了。

語法如下:

//修改返回SHOP網址
add_filter( 'woocommerce_return_to_shop_redirect', 'uni_woo_return_to_shop_button_modify' );
function uni_woo_return_to_shop_button_modify() {
    $url = 'https://www.your-url.com'; 
    return $url;
}

//修改按鈕文字
add_filter('woocommerce_return_to_shop_text', 'uni_woo_shop_button_text_modify');
function uni_woo_shop_button_text_modify() {
    $shop_button_text = "回到首頁"; 
    return $shop_button_text;
}

woocommerce_return_to_shop_redirect 負責處理網址的修改,預設是「/shop」商品頁面,我們直接改網址就可以了。