edwinlin

如何製作一鍵清空購物車 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 美化一下唷

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

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

一、套用後的現象

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

二、解決方式

有兩個辦法可以解決，一是安裝外掛「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 );

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

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

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

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

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

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; }

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

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

就這樣，很簡單的

WooCommerce 修改訂單備註資料日期格式

今天來分享一個奇怪的小地方，小細節啦，客戶也沒有發現，看到了怎看都覺得很怪，所以就動手修改了

首先要準備 Loco translate 這支外掛程式，在 WP 的外掛安裝可以找到，他是免費的，下載安裝他。

找到繁體中文，雖然已經翻譯了 100%，但我們還是要進去編輯他，因為問題出在格式不是我們要的翻譯也只是照著翻譯沒有任何的變動。

有夠詭異的啦，別害怕，打開 Loco 去搜尋 WooCommerce 的字串「l jS \o\f F Y, h:ia」

接著去修改成「Y 年 m 月 d 日 a H:i」就會正確顯示了

記得清除快取與暫存檔，重新整理後應該就會看到你修改的格式

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

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

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

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

所幸修改很簡單，兩段語法可以解決這個部分，主要是利用「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」這套安全防火牆外掛影響到了 WooCommerce 的登入錯誤提示訊息，預設 WC 示有翻譯的，但不知道為什麼安裝了 Wordfence 後會影響到該字串的翻譯，都會變強制英文的。

今天我們只要用 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 = 後面的就是要翻譯的文字填上

是不是很簡單呢?

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

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

我們今天要透過 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' );

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

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' );

WooCommerce 修改忘記密碼為 WordPress 預設版頁面

繼上一篇「WooCommerce 修改預設登入網址頁面」之後，會衍生出一個問題就是當你的客製化頁面看似正常，其實 WooCommerce 的「忘記密碼」功能還是跟 WooCommerce 綁在一起，這套組合技巧就要修改一下 WooCommerce 的預設忘記密碼的網址為 WordPress 的忘記密碼，聽起來超級繞舌，我們先來弄清楚一些事情。

WooCommerce 安裝後會覆蓋並取代 WordPress 的忘記密碼查詢頁面
該頁面在 WooCommerce 的設定內可以看到叫做 lost-password，其實你可以客製一頁
但是上一套技巧覆蓋並且使用 LoginPress 客製化登入頁面後會發現預設忘記密碼頁面沒辦法改

OK，那麼上面你懂了，我們就來更動一下這個連結替換為 WordPress 用的忘記密碼頁面連結就可以了

add_filter( 'lostpassword_url', 'my_lostpassword_url', 10, 2 );
function my_lostpassword_url( $lostpassword_url, $redirect ) {        
    $redirect = '/my-account/lost-password';
    
    return site_url( '/wp-login.php?action=lostpassword' . $redirect );
}

這就安插進佈景主題 functions.php 或者用 Code Snippet 就可以達成囉!

那麼也是有網友分享過用 Jquery 去達成的啦

function changeReseturl(){

jQuery(".woocommerce-LostPassword.lost_password a").attr('href','your-login-url');

}

add_action('wp_footer','changeReseturl');

兩者擇一使用就可以了。

獨角獸工坊 - SEO 搜尋引擎最佳化 | 網站設計 | 網站架設

All posts by : edwinlin