【聲明】本站任何文章都可能有聯盟行銷連結，當你透過文章內的連結購買產品，我可能獲得分潤，這不會增加你任何成本，並且我分享的都是自己實際使用過的資訊，更多細節請點這裡。 Disclosure: Any post on this site may contain affiliate links, meaning I get commission if you decide to make a purchase through my links, at no cost to you.
記錄使用 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 ‘<script src=”https://code.jquery.com/jquery-1.5.min.js” type=”text/javascript”></script>’;
echo ‘<script>$(document).ready(function(e){$(“#shipping_method”).append($(“#jckwds_fields”))});</script>’;
/*更改位置 END*/
echo ‘<script src=”https://code.jquery.com/jquery-1.5.min.js” type=”text/javascript”></script>’;
echo ‘<script>$(document).ready(function(e){$(“#shipping_method”).append($(“#jckwds_fields”))});</script>’;
/*更改位置 END*/
當然如果原本就引入了jQuery的話不用加第一行，不過我的沒抓到jQuery應有的效果，只好多加上去了
卻造成.原本「配送到不同的地址？」控制顯示隱藏的核取方塊失效了
其js行為不起效果，於是我再搜尋「jquery」檢查一遍原始碼，
看到 wp-includes/js/jquery/jquery.js?ver=1.11.0
發覺WordPress裡面引用的應該是 https://code.jquery.com/jquery-1.11.0.min.js
1.11.0這個版本沒有我要的效果，我用的是 https://code.jquery.com/jquery-1.5.min.js
我換掉jQuery，不過…依然失效，
最後我把所有檔案還原回去…還是失效
唯獨漏掉了…jquery.js
討論時說了，先換回去原本版本吧
於是把版本換回去…
原來…WordPress 的 jQuery不能亂換版本…
亂換版本會出事，至少Woocommerce 會出事
原本想說同理可以做隱藏顯示，我的方法是加上onCLick動作
<ul id=”shipping_method” onClick=”showDeliveryTime()”>
配合
<script>$(document).ready(function(e) {$(“#shipping_method”).append($(“#jckwds_fields”))
showDeliveryTime()
});
function showDeliveryTime(){
if ($(“#shipping_method_0_local_pickup”).attr(“checked”)== true)
$(“#jckwds_fields”).show();
if ($(“#shipping_method_0_local_pickup”).attr(“checked”)!= true)
$(“#jckwds_fields”).hide();
}</script>
});
function showDeliveryTime(){
if ($(“#shipping_method_0_local_pickup”).attr(“checked”)== true)
$(“#jckwds_fields”).show();
if ($(“#shipping_method_0_local_pickup”).attr(“checked”)!= true)
$(“#jckwds_fields”).hide();
}</script>
但是
<ul id=”shipping_method” onClick=”showDeliveryTime()”>在Woocommerce 裡面
不想動 Woocommerce 所以作罷
另外一個問題是，其實舊版的jQuery也無法讓我做到這個效果
至此，在js方面先打住
參考資料：
阿淳的自在生活工具箱 除客座文章分類外，均為阿淳（chaneswin）原創，禁止商業使用，歡迎社群分享，轉載請註明作者與原文連結，禁止商業使用。有任何想法歡迎留言交流！
原文連結：WordPress外掛修改筆記(1)-元素擺放位置
