WooCommerce 控制結帳頁下拉選單

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

–