WooCommerce自定義修改結賬字段

這是有關結賬字段和排序自定義字段系列的第一篇教程。我們從WooCommerce結賬表單定制開始。

就像WordPress一樣,WooCommerce有許多出色的動作和過濾鉤子。使用這些鉤子的時候,您只需要修改唯一的文件-當前主題的 functions.php這樣就足夠了(當然,如果是子主題的functions.php就更好了)。

我們今天將要使用的主要過濾鉤子是woocommerce_checkout_fields

但是,如果您正在尋找如何跳過購物車并為WooCommerce商店實施單頁結賬,那么此插件應該會對您 有所幫助。實際上,它允許您在商店中創建自定義結賬頁面

woocommerce_checkout_fields簡介

如果您只是因為要刪除一些不必要的結賬字段或想禁用郵政編碼驗證,則可以安全地跳過此步驟。但是,如果您想了解整個過程,那么您來對地方了。

好的,首先打開WooCoommerce商店結賬頁面。在我網站這里,看起來是這樣的。

這是我的測試網站上結帳頁面的界面截圖。店面主題處于活動狀態。
現在,我們將嘗試管理結帳字段。

順便說一句,如果您正在尋找一種方法來更改“下訂單”按鈕的文本,那么我推薦本教程

add_filter( 'woocommerce_order_button_html', 'misha_custom_button_html' );
 
function misha_custom_button_html( $button_html ) {
	$button_html = str_replace( 'Place order', 'Submit', $button_html );
	return $button_html;
}

插入這段代碼后,您將看到帶有參數而不是結賬表單的所有結賬字段的數組。這些字段按組進行排序:billingshippingaccountorder

一個特定的字段數組如下所示:

[billing_company] => Array
(
	[label] => Company name
	[class] => Array
	(
		[0] => form-row-wide
	)
	[autocomplete] => organization
  	[priority] => 30
)

禁用郵編、電話和省份驗證

以下是驗證。

不知道為什么,但有時客戶要求我關閉驗證。

是的,在本文中,我們將主要使用woocommerce_checkout_fields,但是有時候,當您在結賬中同時包含計費和發貨字段時,最好使用 woocommerce_default_address_fields動作掛鉤(在單獨的教程中進行介紹),因為它會同時影響以下位置的發貨和計費字段。

因此,使用它禁用郵編和省份驗證會更容易一些。

add_filter( 'woocommerce_default_address_fields' , 'misha_disable_address_fields_validation' );
 
function misha_disable_address_fields_validation( $address_fields_array ) {
 
	unset( $address_fields_array['state']['validate']);
	unset( $address_fields_array['postcode']['validate']);
	// 你還可以禁用其他字段,比如 first_name and last_name, company, country, city, address_1 and address_2
 
	return $address_fields_array;
 
}

好吧,但是電話字段又該如何禁用呢?它不包含在地址字段數組中。我們將使用woocommerce_checkout_fields禁用電話驗證。

add_filter( 'woocommerce_checkout_fields', 'misha_no_phone_validation' );
 
function misha_no_phone_validation( $woo_checkout_fields_array ) {
	unset( $woo_checkout_fields_array['billing']['billing_phone']['validate'] );
	return $woo_checkout_fields_array;
}

您可以在本教程中閱讀有關WooCommerce 結賬驗證的更多信息。

刪除結賬字段

有一天,我的客戶要求我刪除所有結賬字段,但姓名、郵件和電話除外,因為她希望客戶在來辦公室接收購買的產品時以現金付款。

我認為這很明顯,但是請不要在CSS中隱藏結賬字段。

刪除字段是本教程中最簡單的步驟之一。這是如何做到的:

add_filter( 'woocommerce_checkout_fields', 'misha_remove_fields', 9999 );
 
function misha_remove_fields( $woo_checkout_fields_array ) {
 
	// 她希望在結賬頁面保留下面的字段
	// unset( $woo_checkout_fields_array['billing']['billing_first_name'] );
	// unset( $woo_checkout_fields_array['billing']['billing_last_name'] );
	// unset( $woo_checkout_fields_array['billing']['billing_phone'] );
	// unset( $woo_checkout_fields_array['billing']['billing_email'] );
	// unset( $woo_checkout_fields_array['order']['order_comments'] ); // remove order notes
 
	// 然后刪除下面的字段
	unset( $woo_checkout_fields_array['billing']['billing_company'] ); // remove company field
	unset( $woo_checkout_fields_array['billing']['billing_country'] );
	unset( $woo_checkout_fields_array['billing']['billing_address_1'] );
	unset( $woo_checkout_fields_array['billing']['billing_address_2'] );
	unset( $woo_checkout_fields_array['billing']['billing_city'] );
	unset( $woo_checkout_fields_array['billing']['billing_state'] ); // remove state field
	unset( $woo_checkout_fields_array['billing']['billing_postcode'] ); // remove zip code field
 
	return $woo_checkout_fields_array;
}

我將鉤子的優先級設置為9999,因為我想盡可能晚地運行它。當然,如果您刪除結賬帳單的詳細信息,則不希望使用信用卡卡付款。當然不會。但是,如果您想使用PayPal Standard,一切都應該沒問題。

添加上述代碼后,我的結賬界面如下所示。

如果您網站需要在線付款,特別是通過信用卡付款,請小心刪除字段。

如果要禁用條款和協議復選框,實際上不需要任何代碼,只需轉到WooCommerce設置并將其關閉即可。我們將在下文介紹。

設置字段為可選或必填

好吧,讓我們繼續講同樣的故事–我的客戶問我:“ Misha,請讓電話和電子郵件字段全寬顯示,在電話前放置電子郵件字段,然后讓姓氏和電話字段變為非必填”。

我們先來設置字段是否必填。所需要做的就是更改字段數組中的唯一參數,現在就開始吧:

add_filter( 'woocommerce_checkout_fields' , 'misha_not_required_fields', 9999 );
 
function misha_not_required_fields( $f ) {
 
	unset( $f['billing']['billing_last_name']['required'] ); // 這就是重點
	unset( $f['billing']['billing_phone']['required'] );
 
	// 可以使用類似的方式將字段設置為必填
	// $f['billing']['billing_company']['required'] = true;
 
	return $f;
}

更改字段排序

正如上文提到的,客戶要求我將郵箱地址放在電話字段的前面,由于知識點有點多,我單獨寫了一篇教程介紹這個。

按照教程去操作以后,我們可以看到結賬界面變成了這個樣子:

好吧,這不是我所期望的。

為什么會這樣呢?由于僅對字段數組進行排序還不夠,因此您還必須將適當的css類應用于每個字段。

實際上,每個結賬字段都有自己的樣式(CSS類),具體取決于其位置,共有3個主要類:

  • form-row-first –半寬,位于前面
  • form-row-last –半寬,位于后面
  • form-row-wide - 全寬

現在,我們將使用以下代碼將電話和電子郵件字段變為全寬。

add_filter( 'woocommerce_checkout_fields' , 'misha_checkout_fields_styling', 9999 );
 
function misha_checkout_fields_styling( $f ) {
 
	$f['billing']['billing_email']['class'][0] = 'form-row-wide';
	$f['billing']['billing_phone']['class'][0] = 'form-row-wide';
 
	return $f;
 
}

最后效果如下:

更改標簽和占位符

以下是用來更改賬單字段的標簽和賬單備注字段的占位符的代碼。

add_filter( 'woocommerce_checkout_fields' , 'misha_labels_placeholders', 9999 );
 
function misha_labels_placeholders( $f ) {
 
	// first name can be changed with woocommerce_default_address_fields as well
	$f['billing']['billing_first_name']['label'] = 'Your mom calls you';
	$f['order']['order_comments']['placeholder'] = 'What\'s on your mind?';
 
	return $f;
 
}

結果如下:

條款和協議復選框

在繼續下一步并開始在代碼中創建此復選框之前,我想向您展示一種非常簡單且正確的方法。

首先,在“頁面”>“新建頁面 ”中創建“條款和協議”頁面

然后,轉到WooCommerce>設置>高級,在此處設置頁面。

WooCommerce>設置>高級>頁面設置

就是這樣,在此處選擇頁面并保存更改后,該復選框將出現在結賬頁面上的 “下訂單”按鈕之前。

添加自定義結賬字段

在文章的這一部分中,我將在WooCommerce結賬表單中添加兩個字段:賬單明細下方的下拉選擇框和“訂購”部分的“訂閱”復選框。第一個字段將是必填字段。

下面我們詳細來說下如何實現。

首先,我們應該決定要在哪里放置新字段。以下是可選位置:

  • woocommerce_before_checkout_billing_form
  • woocommerce_after_checkout_billing_form
  • woocommerce_before_checkout_registration_form
  • woocommerce_after_checkout_registration_form
  • woocommerce_before_checkout_shipping_form
  • woocommerce_after_checkout_shipping_form
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

從位置名稱可以一目了然-它也是動作掛鉤的名稱,我們將在下面使用。此處還以與模板代碼中相同的順序提到了字段位置。

這些位置可能僅在一種情況下不適合您-如果WooCommerce默認結賬模板:form-shipping.php并且form-billing.php在主題中被覆蓋。在這種情況下,您可以手動將新字段添加到主題文件/woocommerce/checkout目錄中。

// 添加字段
add_action( 'woocommerce_after_checkout_billing_form', 'misha_select_field' );
add_action( 'woocommerce_after_order_notes', 'misha_subscribe_checkbox' );
 
// 保存字段
add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added' );
 
// 選擇
function misha_select_field( $checkout ){
 
	// 你可以添加一些自定義html內容在這里
 
	woocommerce_form_field( 'contactmethod', array(
		'type'          => 'select', // text, textarea, select, radio, checkbox, password, about custom validation a little later
		'required'	=> true, // actually this parameter just adds "*" to the field
		'class'         => array('misha-field', 'form-row-wide'), // array only, read more about classes and styling in the previous step
		'label'         => 'Preferred contact method',
		'label_class'   => 'misha-label', // sometimes you need to customize labels, both string and arrays are supported
		'options'	=> array( // options for <select> or <input type="radio" />
			''		=> 'Please select', // empty values means that field is not selected
			'By phone'	=> 'By phone', // 'value'=>'Name'
			'By email'	=> 'By email'
			)
		), $checkout->get_value( 'contactmethod' ) );
 
	// 你可以添加一些自定義html內容在這里
 
}
 
// 復選框
function misha_subscribe_checkbox( $checkout ) {
 
	woocommerce_form_field( 'subscribed', array(
		'type'	=> 'checkbox',
		'class'	=> array('misha-field form-row-wide'),
		'label'	=> ' Subscribe to our newsletter.',
		), $checkout->get_value( 'subscribed' ) );
 
}
 
// 保存字段的值
function misha_save_what_we_added( $order_id ){
 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) );
 
 
	if( !empty( $_POST['subscribed'] ) && $_POST['subscribed'] == 1 )
		update_post_meta( $order_id, 'subscribed', 1 );
 
}

結果:

將上面的代碼插入到functions.php或自定義插件中后,新字段將顯示在結帳頁面上。

提交訂單后,您將看到結賬字段值出現在新訂單“自定義字段”元數據框中:

如果在編輯訂單頁面上找不到此框,請在“屏幕選項”選項卡中將其打開,您可以在屏幕的右上角找到它。

但是,如何對新的結賬字段進行驗證呢?woocommerce_form_field() 的required參數僅在字段標簽附近添加一個符號* ,但不處理驗證。

設置必填字段/自定義驗證/創建自定義錯誤通知

如果未選擇首選的聯系方式,此小段代碼將打印通知。如前所述,對于自定義結賬字段而言,僅設置required參數為true,還不足以讓它變成必填字段,因為缺少驗證。

add_action('woocommerce_checkout_process', 'misha_check_if_selected');
 
function misha_check_if_selected() {
 
	// 你可以在這里添加自定義驗證
	if ( empty( $_POST['contactmethod'] ) )
		wc_add_notice( 'Please select your preferred contact method.', 'error' );
 
}

看一下wp_add_notice函數的第二個參數-它也支持“success”和“notice”通知類型,但是“error”是唯一與此相關的參數。

哈哈,好吧,我應該在這里添加更多有趣的事情:將自定義結賬字段集成到:查看訂單頁面,感謝頁面,編輯訂單頁面(wp-admin),電子郵件…,但是我在一篇文章中講這么多,那是多么長篇大論了。因此,我決定繼續在單獨的文章繼續探討,歡迎繼續關注我們網站的更新。

聲明:原文出自 https://rudrastyh.com/woocommerce/checkout-fields.html ,由WordPress大學翻譯整理,轉載請保留本聲明!

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

暫無評論

發表評論