LOGO - 獨角獸工坊 - SEO 優化 | 網站設計 | 網站架設

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

網站設計/網站架設SEO 搜尋引擎最佳化/Wordpress 設定結合 SEO 最佳推薦,兼具美感與質感的代客架站服務,讓你的網站就是比別人更好!

  • 首頁
  • 案例作品
  • 實用技巧
  • 服務詢問

Home會員中心

Posts tagged: 會員中心

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

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

2022-03-10
by edwinlin WooCommerce

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

  1. WooCommerce 安裝後會覆蓋並取代 WordPress 的忘記密碼查詢頁面
  2. 該頁面在 WooCommerce 的設定內可以看到叫做 lost-password,其實你可以客製一頁
  3. 但是上一套技巧覆蓋並且使用 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');

兩者擇一使用就可以了。

Read More
Woocommerce 修改預設登入網址頁面

WooCommerce 修改預設登入網址頁面

2022-03-09
by edwinlin WooCommerce

最近做到一個難度略高的案子,關於要整個幾乎客製八成以上的功能,差不多快把 WordPress 拆了那種程度,在幾近完成階段時,業主給了一個很奇怪的要求,就是它們希望 WooCommerce 的登入頁面要跟 WordPress 登入的頁面要一樣。乍聽之下沒有什麼問題,但仔細一看你會發現問題不小,而且有點靠北,因為你可以透過 LoginPress 來完成客製,但內行的都知道 WooCommerce 的登入其實是獨立的,可是兩邊又是相通的這樣。

問題出現在你點「會員中心/我的帳號」也就是 my-account 這一頁,會先偵測你的登入狀況,如果你是從設計者提供的登入位置登入再點這一頁,看起來完全沒有問題,但是你若沒有登入直接點「會員中心/我的帳號」,你會發現他會強制帶你到一個 WooCommerce 預設的登入頁面,很陽春很醜,沒客製根本看起來超不專業的;網路上很多關於客製化登入頁面的外掛 Plugins 在販售著,如果不會改就只能乖乖花錢買外掛套用修改,後來我找到了一個方式可以完全不用外掛,只要把 CODE 插入之後,修改一些小地方就可以了。

function redirect_login_page(){
        if(is_user_logged_in()){
            return;
        }
        global $post;
      
        if( has_shortcode($post->post_content, "woocommerce_my_account") ) {
            wp_redirect( '/wp-login.php' );
            exit();
        }
    }

add_action( 'template_redirect','redirect_login_page' );

上面的 CODE 意思是,先偵測登入狀況,接著 wp_redirect( ‘/wp-login.php’ ); 這串的 /wp-login.php 就是改成你要指向的網址就好了,你也可以用 /?p=xxx 這種頁面 ID 去達成你要指向的客製化登入頁面喔!這個是我用 LoginPress 的範例,你可以改成你要指向的頁面 ID。

add_action('wp_logout','my_redirect_after_logout');
function my_redirect_after_logout(){
         wp_redirect( '/?p=xxx' );
         exit();
}

上面這串是設定當使用者按下登出(無論是在我的帳號、會員中心)要強制指向的位置,/?p=xxx 的 xxx 就是你要指向的頁面,當然你也可以指向一個網址。

Read More
Woocommerce 會員中心 My Account 會員資料編輯加入電話號碼

Woocommerce 會員中心 My Account 會員資料編輯加入電話號碼

2021-12-27
by edwinlin WooCommerce

開發時遇到的一個很奇怪的需求,但想想這需求也很合情合理,在 Woocommerce 的會員後台中,其實有這個欄位編輯,是在收件地址資料那邊設定的,既然處理了就順便筆記分享下來

很可能以後都是標配(?)

首先要進到你的佈景主題中,找到 functions.php 記得備份一下,接著新增以下程式碼

 

//會員資料編輯新增手機


add_action( 'woocommerce_edit_account_form', 'add_billing_mobile_phone_to_edit_account_form' ); 
function add_billing_mobile_phone_to_edit_account_form() {
    $user = wp_get_current_user();
    ?>
     <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="billing_mobile_phone"><?php _e( '手機號碼驗證(再輸入一次)', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
    </p>
    <?php
}

// 檢查驗證電話欄位
add_action( 'woocommerce_save_account_details_errors','billing_mobile_phone_field_validation', 20, 1 );
function billing_mobile_phone_field_validation( $args ){
    if ( isset($_POST['billing_mobile_phone']) && empty($_POST['billing_mobile_phone']) )
        $args->add( 'error', __( '手機號碼有所不同,請檢查下方確認再次填寫', 'woocommerce' ),'');
}

// 儲存電話號碼欄位進會員資料
add_action( 'woocommerce_save_account_details', 'my_account_saving_billing_mobile_phone', 20, 1 );
function my_account_saving_billing_mobile_phone( $user_id ) {
    if( isset($_POST['billing_mobile_phone']) && ! empty($_POST['billing_mobile_phone']) )
        update_user_meta( $user_id, 'billing_mobile_phone', sanitize_text_field($_POST['billing_mobile_phone']) );
}

上面完成之後,請進到 Woocommerce 外掛資料夾內,找到 templates/myaccount/form-edit-account.php 先COPY一個備份,再打開編輯

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="billing_mobile_phone"><?php _e( '手機號碼', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
</p>

找到你要的位置,把這個欄位 HTML 安插進去

他插入位置自己去判斷,我是插入在 Email 後面,會像以下這樣:

<?php
/**
 * Edit account form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-edit-account.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerceTemplates
 * @version 3.5.0
 */

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_edit_account_form' ); ?>

<form class="woocommerce-EditAccountForm edit-account" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >

	<?php do_action( 'woocommerce_edit_account_form_start' ); ?>

	<p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
		<label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
		<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" />
	</p>
	
	<div class="clear"></div>

	<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
		<label for="account_display_name"><?php esc_html_e( 'Display name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
		<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_display_name" id="account_display_name" value="<?php echo esc_attr( $user->display_name ); ?>" /> <span><em><?php esc_html_e( 'This will be how your name will be displayed in the account section and in reviews', 'woocommerce' ); ?></em></span>
	</p>
	<div class="clear"></div>

	<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
		<label for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
		<input type="email" class="woocommerce-Input woocommerce-Input--email input-text" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
	</p>
             <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="billing_mobile_phone"><?php _e( '手機號碼', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
</p>

	<fieldset>
		<legend><?php esc_html_e( 'Password change', 'woocommerce' ); ?></legend>

		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<label for="password_current"><?php esc_html_e( 'Current password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
			<input type="password" class="woocommerce-Input woocommerce-Input--password input-text" name="password_current" id="password_current" autocomplete="off" />
		</p>
		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<label for="password_1"><?php esc_html_e( 'New password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
			<input type="password" class="woocommerce-Input woocommerce-Input--password input-text" name="password_1" id="password_1" autocomplete="off" />
		</p>
		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<label for="password_2"><?php esc_html_e( 'Confirm new password', 'woocommerce' ); ?></label>
			<input type="password" class="woocommerce-Input woocommerce-Input--password input-text" name="password_2" id="password_2" autocomplete="off" />
		</p>
	</fieldset>
	<div class="clear"></div>

	<?php do_action( 'woocommerce_edit_account_form' ); ?>

	<p>
		<?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
		<button type="submit" class="woocommerce-Button button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
		<input type="hidden" name="action" value="save_account_details" />
	</p>

	<?php do_action( 'woocommerce_edit_account_form_end' ); ?>
</form>

<?php do_action( 'woocommerce_after_edit_account_form' ); ?>

儲存後就會看到了

Woocommerce 會員中心 My Account 會員資料編輯加入電話號碼
Read More

近期文章

  • 如何製作一鍵清空購物車 Empty Cart 的按鈕
  • WooCommerce 套用折價券 Coupon 免運費後隱藏原有運費顯示金額
  • 無庫存允許下單 Backorder 修改提示
  • WooCommerce 修改訂單備註資料日期格式
  • WooCommerce 清空購物車返回訊息+網址修改

彙整

  • 2022 年 7 月
  • 2022 年 6 月
  • 2022 年 5 月
  • 2022 年 4 月
  • 2022 年 3 月
  • 2022 年 2 月
  • 2022 年 1 月
  • 2021 年 12 月
  • 2021 年 7 月
  • 2020 年 2 月
  • 2019 年 7 月
  • 2019 年 6 月
  • 2019 年 5 月
  • 2019 年 4 月
  • 2018 年 12 月
  • 2018 年 9 月
  • 2018 年 6 月
  • 2017 年 3 月

分類

  • Elementor 教學
  • SEO
  • WooCommerce
  • 實用技巧
  • 版型修改
  • 課程記事

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文
LOGO - 獨角獸工坊 - SEO 優化 | 網站設計 | 網站架設

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

網站設計/網站架設SEO 搜尋引擎最佳化/Wordpress 設定結合 SEO 最佳推薦,兼具美感與質感的代客架站服務,讓你的網站就是比別人更好!

網站架設是在理性與感性的衝突間找到平衡
 
網站絕非一個工具,而是一個具有靈魂及生命的個體,透過他你將會讓你的事業升華至更高的層次。

站內選單

  • 首頁
  • 案例作品
  • 實用技巧
  • 服務詢問
© 2023 The Unicorn Workshop. All Rights Reserved.
Shopping Basket