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

目錄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Picture of 賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2024 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!