Skip to content

WordPress外掛修改筆記(1)-元素擺放位置

歡迎在下方留言區討論
記錄使用  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=”http://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裡面引用的應該是 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動作
<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>
但是
<ul id=”shipping_method” onClick=”showDeliveryTime()”>在Woocommerce 裡面
不想動 Woocommerce 所以作罷
另外一個問題是,其實舊版的jQuery也無法讓我做到這個效果
至此,在js方面先打住
參考資料:

© 2014, Chaneswin. 如發現留有早期非原創作品可以留言回報喔~感謝您的幫忙 🙂


文章如有幫助,先按讚,再分享,歡迎贊助哦!  

歡迎在下方留言區討論