woocommerce中將可變商品的下拉選項框改爲淘寶類似的款式點選

公司前段時間有個需求，在 woocommerce 購物時默認的對於可變商品的選擇方法是使用select上傳一個參數，希望可以改變成像淘寶一樣的按鈕帶文字直接點擊選擇，這樣可以平常就看到所有的選項，對於用戶來說十分方便。在初期調用代碼的時候想過用PHP去修改，但是這一部分的內容在wp-include中，官方好像並不希望去重寫這個選擇方法。再調研了woocommerce有用來解決這個問題的插件Variation Swatches and Photos，可以直接下載付費使用，但是考慮到公司網站只有幾個商品，購買一個插件性價比很低，所以直接利用JS和css配合來完成這一個功能

首先，設置正確的產品變量id，在jquery選擇器中如果id爲中文的轉義字符串是無法被識別的，所以在這裏將產品屬性的名字改爲英文名（暫時無解決辦法），然後在頁面對應的CSS中將用於選擇款式屬性的select的display設置爲none，然後在頁面中添加一個button，給他寫一個函數讓他修改select的值就好。應用jquery中的val()結合選擇器完成

$('.summer-class-1'.on('click',function(){
    	alert('change summerclass to 1st value');
    	$('#summerClassTime').val('八月老班');
    	alert($('summer-class').val());
    })

val中選擇select包含的value值，即可完成