WooCommerce 結帳頁如果要新增欄位的話可以使用 woocommerce_form_field()
來處理,使用的勾點看是要把這個欄位放在什麼地方,如果是要放在結帳欄位後面的話可以用 woocommerce_after_checkout_billing_form
。
這週處理到的問題是我新增了一個下拉選單,而這下拉選單的選項只有三個,而 WooCommerce 預設的下拉選單會自動帶入搜尋框,在選項一眼就可以看完的情境下,這個搜尋框就顯得完全沒有必要:

第一時間想到的作法就是用 CSS 的 display:none
結案,但由於該下拉選單是經由 selectWoo jQuery 套件所產生的,而這欄位並沒有特定的 id 或 class 可以選擇,因此還是要從 JavaScript 下手。
解決方法是將原始的下拉選單再次建立 select2 實體, select2 是一套非常老牌的 jQuery 下拉選單套件,而 selectWoo 則是依此修改的版本,因此只要找到 select2 文件裡面不顯示搜尋框的參數就能移除該欄位。
select2 的搜尋框參數為 minimumResultsForSearch
,該參數帶入的值是數字,也就是當下拉選單的選項超過這個數字時才會顯示搜尋框,或是也可以帶入 Infinity
關鍵字(不用引號),就會直接隱藏搜尋框。
將以下程式碼中的 #my-custom-select
置換為你的下拉選單 ID 即可:
<?php
add_action(
'wp_footer',
function() {
if ( is_checkout() ) {
?>
<script>
jQuery(document).ready(function ($) {
$('#my-custom-select').selectWoo({
minimumResultsForSearch: Infinity,
});
});
</script>
<?php
}
},
99
);
–