如何製作一鍵清空購物車 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 套用折價券 Coupon 免運費後隱藏原有運費顯示金額

WooCommerce 套用折價券 Coupon 免運費後隱藏原有運費顯示金額

在 WooCommerce 設定購物車裡頭,行銷 > 折價券可以新增像是外國常見的免運費折價券,前提是必須要在運送方式裡新增一個「免運費」的運送方式選項;但新增完成後在結帳之前就會發現購物車怪怪的,怎會有個本地宅配運費的金額顯示在那邊,要讓人套用折價券後又要選 “免運費” 的運送方式,似乎有點脫褲子放屁。

WooCommerce 套用折價券 Coupon 免運費後隱藏原有運費顯示金額
這邊是 WooCommerce 折價券套用的地方,你可以看到「允許免運費」的選項

一、套用後的現象

當你套用折價券後,你會看到免運費雖然可以用了,下圖這樣的狀況難免看起來怪怪的…

WooCommerce 套用折價券 Coupon 免運費後隱藏原有運費顯示金額
明明有免運費,卻有顯示宅配運送 $120 的奇怪狀況,沒選好還會覺得網站壞掉了

二、解決方式

有兩個辦法可以解決,一是安裝外掛「WC Hide Shipping Plugin」這套外掛就可以在設定裡面將其隱藏關掉。另一個辦法是透過 Code Snippet 去新增一段程式碼解決,我個人偏好盡量減少安裝外掛來造成網站的負擔,能用簡單幾 KB 的程式碼處理,既輕盈又好管理,以下為程式碼:

function hide_shipping_when_free_is_available( $rates ) {
	$free = array();

	foreach ( $rates as $rate_id => $rate ) {
		if ( 'free_shipping' === $rate->method_id ) {
			$free[ $rate_id ] = $rate;
			break;
		}
	}

	return ! empty( $free ) ? $free : $rates;
}

add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 100 );

這樣當折價券套用完成後,他會自動偵測到已經免運費了,故隱藏本地運費價格

WooCommerce 套用折價券 Coupon 免運費後隱藏原有運費顯示金額
上圖這樣就是套用後的樣子,是不是很清新呢?

那我們也是要檢查一下程式碼是否正確運作,如果今天我們套用免運費的折價券後是可以的,那換成移除折價券後是否會顯示? 如果有問題就會完全隱藏運費,這可不是好事。

WooCommerce 套用折價券 Coupon 免運費後隱藏原有運費顯示金額
所幸程式碼是 OK 的,基本上只要你的運送方式不要過於邏輯複雜,不套用折價券的話就會顯示原有的運費顯示。
無庫存允許下單 Backorder 修改提示

無庫存允許下單 Backorder 修改提示

在一個金流 Discord 討論留言板上看到有網友在詢問這個問題,看了看也忽然覺得這個修改應該不至於太難,改一改以後有可能某一天會用到。這種無庫存下單就像是預購的 FU 吧?只是顯示提示修改,或許可以像似應用在預購的模式,話不多說,立即開始:

無庫存允許下單 Backorder 修改提示

修改完之後會長這樣,原本會顯示「無庫存允許下單」一個很奇怪難以理解的意思,一般做法就是用翻譯的去改最快,但是就是要變換通知的話,當物品有庫存後又要顯示提示,這時程式就派上用場。

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2); function wcs_custom_get_availability( $availability, $_product ) { 
	// 有庫存與沒庫存的時候通知
	if ( $_product->is_in_stock() && ! $_product->backorders_allowed() ) { 
		$availability['availability'] .= __('目前有現貨', 'custom'); } 
	if ( $_product->is_in_stock() && $_product->backorders_allowed() ) { 
		$availability['availability'] = __('當有現貨時我們會立即通知您', 'custom'); }
	// 沒庫存的時候通知
	if ( ! $_product->is_in_stock() ) { $availability['availability'] .= __('當有現貨時我們會立即通知您', 'custom'); } 
	return $availability; }
無庫存允許下單 Backorder 修改提示

但是上面的只有顯示在「商品頁」沒改到購物車的地方,購物車會也會有一串一樣的字,接著要加上下面這串就能一起改到了。

// 翻譯購物車提示
function uni_transfer_wccart_backorder_text ( $text ) {
         if ($text == '允許無庫存下單'){$text = '當有現貨時我們會立即通知您';}
                return $text;
         }
add_filter( 'gettext', 'uni_transfer_wccart_backorder_text' );

就這樣,很簡單的

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」商品頁面,我們直接改網址就可以了。

Wordfence 干擾影響登入錯誤題示訊息翻譯

Wordfence 干擾影響登入錯誤題示訊息翻譯

對,你沒有看錯,我也沒有寫錯,我今天要說的是「Wordfence」這套安全防火牆外掛影響到了 WooCommerce 的登入錯誤提示訊息,預設 WC 示有翻譯的,但不知道為什麼安裝了 Wordfence 後會影響到該字串的翻譯,都會變強制英文的。

Wordfence 干擾影響登入錯誤題示訊息翻譯
就很莫名其妙,你即使找遍了 WC 的翻譯都是正確無誤的

今天我們只要用 Code Snippets 插入以下程式碼就好了

function uni_wc_login_error_translation( $translated, $original, $domain ) {
    
    switch ($original) {
        case '<strong>ERROR</strong>: The username or password you entered is incorrect. <a href="%2$s" title="Password Lost and Found">Lost your password</a>?':
            $translated = '<strong>錯誤</strong>: 使用者的帳號或者密碼錯誤 <a href="%2$s" title="忘記密碼?">忘記密碼</a>?';
            break;
    }
    
    return $translated;
}

add_filter( 'gettext', 'uni_wc_login_error_translation', 10, 3 );

以上很好理解,就直接抓取那串字串並且翻譯替代:

case ‘<strong>ERROR</strong>: The username or password you entered is incorrect. <a href=”%2$s” title=”Password Lost and Found”>Lost your password</a>?‘:

紅字就是要抓取的字串,今天我們的兇手就是這一串的語法,調整一下

$translated = 後面的就是要翻譯的文字填上

Wordfence 干擾影響登入錯誤題示訊息翻譯

是不是很簡單呢?

翻譯 WooCommerce 移除購物車商品跳出英文提示

翻譯 WooCommerce 移除購物車商品跳出英文提示

這個有點奇怪,原本以為 WooCommerce 中文語系應該都有翻譯的,卻沒有在其翻譯檔案裡找到這個字串,只好透過一些語法來達到此方式。

翻譯 WooCommerce 移除購物車商品跳出英文提示
這個是原本跳出來的 POPUP 視窗提示,上頭寫著「Are you sure you want to remove this item from cart?」

我們今天要透過 Code Snippets 去翻譯,避免動到 WC 的程式,不然每次更新又要被蓋掉了,很簡單,在這裡面我們加上以下語法:

// 翻譯購物車提示
function uni_transfer_wccart_text ( $text ) {
         if ($text == 'Are you sure you want to remove this item from cart?'){$text = '你要將此商品從購物車移除嗎?';}
                return $text;
         }
add_filter( 'gettext', 'uni_transfer_wccart_text' );

接著啟動它,就可以完成翻譯囉

翻譯 WooCommerce 移除購物車商品跳出英文提示
是不是很簡單呢?
WordPress 網站瘋狂被機器人駭客 TRY 密碼不堪其擾? 關了它啦!

WordPress 網站瘋狂被機器人駭客 TRY 密碼不堪其擾? 關了它啦!

最近齁,我發現有幾個管理的網站有外掛只要沒有更新在最新狀態,有一些是不能隨便更新的,結果它有一些漏洞產生,就會有機會被網路上的駭客機器人掃描並且攻擊,通常都是瘋狂被 TRY 後台試圖要打進來,我就遇過客戶密碼太簡單被 TRY 出來,被進來放了一堆木馬。

然後客戶對於預防勝於治療這件事永遠都學不乖,總是要幫其善後處理,其實直接關閉了這個功能就好了,正常狀況下不會常需要重置密碼的,直接給它關掉啦,一了百了。不過這方式不適合有大量使用者會員需要登入使用的喔!很適合一些中小企業管理環境單純不複雜的,甚至有專屬人員在管理的。

很簡單,適用於所有 WordPress 網站

// 移除密碼重置的連結文字
function uni_remove_lostpassword_text ( $text ) {
         //if ($text == 'Lost your password?'){$text = '';}
		if ($text == '忘記密碼?'){$text = '';}
                return $text;
         }
add_filter( 'gettext', 'uni_remove_lostpassword_text' );

// 重置密碼關閉並且轉址
function uni_disable_lost_password() {
    if (isset( $_GET['action'] )){
        if ( in_array( $_GET['action'], array('lostpassword', 'retrievepassword') ) ) {
            //wp_redirect( wp_login_url(), 301 );
			wp_redirect( '/?p=xxx' );
            exit;
        }
    }
}
add_action( "login_init", "uni_disable_lost_password" );

我都有註解了,這兩段透過 Code Snippet 新增一組直接啟用就可以生效了。

if ($text == ‘忘記密碼?’){$text = ”;} 這段解釋意思是偵測頁面上的 忘記密碼? 字眼,並且替換成空白或者任何你想換的字,今天我們是要移除,所以就用 ‘ ‘ 包起來就好了。我有留一串註解是給英文介面的 WordPress,自己看狀況切換使用或者自由發揮即可。

wp_redirect( ‘/?p=xxx’ ); 其中的 xxx 就是請到頁面中,滑鼠指到 “編輯” 就會看到網址有一串類似
wp-admin/post.php?post=xxx 這種編號,這邊是設定點了重置密碼連結或者手動輸入重置密碼網址強制過來後要強制轉址到哪的設定。

/wp-login.php?action=lostpassword or /wp-login.php?action=retrievepassword 這都可以強制進入重置密碼,也就是說這種通常都是機器人或者熟悉 WordPress 的人會用的進入方式,它是 action 行為,所以我們要將其關閉掉。

上面有註解的 //wp_redirect( wp_login_url(), 301 ); 意思是直接透過網址進來的就轉到登入頁面,我覺得這有點脫褲子放屁,等於直接影響到那種有用 WPS Hide Login 登入位置的,但我還是留著給有需要的人。

#2022/06/26 更新

追加一段全站關閉的語法

function disable_password_recovery( $action ) {
	if ( in_array( $action, array( 'lostpassword', 'resetpass' ) ) ) {
		unregister_action( $action );
	}
}
add_action( 'registered_action', 'disable_password_recovery' );