WordPress外掛修改筆記(1)-元素擺放位置 @ Chaneswin's blog & dreams －－查納斯文．小查的白日夢

記錄使用 WooCommerce Delivery Slots 的問題
這次的要求是把外掛在結帳頁面的顯示位置改掉
雖然我是在改Slots 這個外掛，不過元素位置的改法應該在很多外掛上道理都是相同的
也就是使用Hook，這個名詞直譯成鉤子，我總算多多少少可以體會了

利用檢查元素找到 id="jckwds_fields"搜尋其所在的PHP頁面以及程式碼位置
（ id="你要換位置的元素"，不要傻傻照抄哦！）
再由包住它的函式 wds_field_output找到
// Checkout Fields
add_action( 'woocommerce_after_order_notes', array( &$this, 'wds_field_output' ) );

嗯！藉此機會了解一下 add_action 與 hook，
就簡單理解成 add_action 與 do_action要成對使用，
add_action 只是添加動作，do_action才是實際做動作，
這不難理解與記憶

因此接下來就是用 woocommerce_after_order_notes 來搜尋plugins資料夾裡面的全部檔案
看看哪裡有do_action
這才找到 woocommerce 外掛裡面的 do_ation
（plugins\woocommerce\templates\checkout\form-checkout.php）
說起來也蠻妙的，在 Slots 外掛添加動作，卻在woocommerce 外掛做動作
懂了以後覺得沒什麼，不懂的時候應該會頭很大吧

裡面有幾個常用位置可以放，譬如
woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_after_customer_details（後來是用這個先頂著）
一直到...
woocommerce_after_checkout_form

因此只要把 wp-content\plugins\jck_woo_deliveryslots\jck_woo_deliveryslots.php 裡面
// Checkout Fields
add_action( 'woocommerce_after_order_notes', array( &$this, 'wds_field_output' ) );
裡面的woocommerce_after_order_notes改掉成要對應的hook就可以了
所以我改成這樣
add_action( 'woocommerce_checkout_after_customer_details', array( &$this, 'wds_field_output' ) );

雖然可惜，事實上我要放的正好都不是這些常用位置...
但常用位置如何放置還是記錄一下

而我就繼續用訂單表格中我所要的運費位置 class="shipping" 去找我的答案，
不能用hook以後，有兩種思維方式，
一種是變更woocommerce裡面可以加hook的地方或直接在 class="shipping"裡面用html動手腳
第二種是變更Slots外掛，
想當然，既然是為了處理這個外掛，用第二種才比較合理

雖然不能輕鬆用hook去改變，但當初輸出html內容是使用echo，
於是我回到輸出內容的函式wds_field_output，
寫在輸出的html之前，利用 jQuery的append把位置調動了
/*更改位置 BEGIN*/
echo '';
echo '';
/*更改位置 END*/

當然如果原本就引入了jQuery的話不用加第一行，不過我的沒抓到jQuery應有的效果，只好多加上去了
卻造成.原本「配送到不同的地址？」控制顯示隱藏的核取方塊失效了
其js行為不起效果，於是我再搜尋「jquery」檢查一遍原始碼，
看到 wp-includes/js/jquery/jquery.js?ver=1.11.0
發覺WordPress裡面引用的應該是 http://code.jquery.com/jquery-1.11.0.min.js
1.11.0這個版本沒有我要的效果，我用的是 http://code.jquery.com/jquery-1.5.min.js
我換掉jQuery，不過...依然失效，
最後我把所有檔案還原回去...還是失效
唯獨漏掉了...jquery.js
討論時說了，先換回去原本版本吧
於是把版本換回去...
原來...WordPress 的 jQuery不能亂換版本...
亂換版本會出事，至少Woocommerce 會出事

原本想說同理可以做隱藏顯示，我的方法是加上onCLick動作