最近有位朋友問我,能不能在結帳的表單中,把縣市的欄位改成下拉選單,於是我翻了一下 WooCommerce 的官方文件之後,發現關於縣市的欄位,其實是能夠自訂改為下拉選單,所以和大家分享一下設定的方法。

步驟

  • 開啟主題中的 functions.php
  • 將下列的程式片段碼複制貼入後存檔
  • 之後在結帳時選擇台灣,自動就會把縣市的欄位轉變為下拉選單

修改之後的縣市欄位如下

WooCommerce 縣市下拉選單
WooCommerce 縣市下拉選單

自訂欄位順序

既然都提到欄位的設定了,就順便說明一下如何快速調整欄位的順序設定,而且如果是利用語法調整的話,還能夠少安裝一個設定欄位的外掛。

步驟

  • 首先也是先開啟主題中的 functions.php
  • 將下列的程式片段碼貼入後存檔

排序方式

如果要把公司的欄位移到最下方,就只要把 $fields2['company'] = $fields['company']; 這段剪下,再把它移到最下方,但切記不管如何調整順序,移動的語法都一定要保持在這段 return $fields2; 的上方。

調整範例

$fields2['phone'] = $fields['phone'];
$fields2['company'] = $fields['company'];

	return $fields2; // 別掉到我底下XD

刪除欄位

去年我在這篇自訂收件欄位的文章中,介紹了如何去除不要的欄位,但現在我們也能利用這個片段程式碼,把不需要的欄位給一併刪除,方法很簡單,在不要的欄位前加上註解就行了。

註解範例

例如要把公司的欄位刪除,就在該段的語法之前加上 //

//$fields2['company'] = $fields['company'];

欄位大小

結帳欄位在 WooCommerce 的預設之下,有左、右以及全寬欄位之分,所以當順序調整完之後,可能還需再調整大小才能讓表單整齊對稱。因為欄位左右的位置,全是由 CSS 的元素所控制,所以只要改變 CSS 之後,就能夠變換調整。

全寬語法範例

在這裡我用鄉鎮市的欄位當範例,它在預設的表單中是一個全寬的欄位,控制的元素是 form-row-wide

$fields2['city']['class'] = array('form-row-wide');
WooCommerce 結帳全寬欄位
全寬欄位

左欄語法範例

左邊欄位的控制的元素是 form-row-first

$fields2['city']['class'] = array('form-row-first');
WooCommerce 結帳左欄位
左欄位

右欄語法範例

右邊欄位的控制的元素是 form-row-last

$fields2['city']['class'] = array('form-row-last');
WooCommerce 結帳左欄位
右欄位

總結

最後我把上述的所有相關的設定範例做合併之後,得到一個完全自訂的結帳欄位。

WooCommerce 自訂結帳欄位
自訂結帳欄位

整理之後的程式片段碼如下

或許並不是每個人都熱衷於修改程式碼,所以我把這篇有談到的範例全都整理好,並且寫成了一個小外掛,但它沒有後台的設定選項,安裝後啟動就能套用,若有需要自訂的地方,請在照著本篇文章自行修改。

Github下載

覺得這篇文章有用?