Last active
January 31, 2020 09:34
-
-
Save nczz/f9d9b5ccc7037327cf41d1e6e52d93e6 to your computer and use it in GitHub Desktop.
調整適合在台灣銷售的 WooCommerce 結帳頁表單欄位(含郵遞區號自動選擇)Blog: https://www.mxp.tw/5961/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//functions.php | |
function woocommerce_version_check($version = '3.3') { | |
if (function_exists('is_woocommerce_active') && is_woocommerce_active()) { | |
global $woocommerce; | |
if (version_compare($woocommerce->version, $version, ">=")) { | |
return true; | |
} | |
} | |
return false; | |
} | |
function mxp_remove_default_useless_fields($fields) { | |
unset($fields['country']); | |
unset($fields['last_name']); | |
unset($fields['address_2']); | |
unset($fields['city']); | |
unset($fields['state']); | |
return $fields; | |
} | |
add_filter('woocommerce_default_address_fields', 'mxp_remove_default_useless_fields', 999, 1); | |
function mxp_custom_override_my_account_billing_fields($fields) { | |
$fields['billing']['billing_company_tax_id'] = array( | |
'label' => __('公司統編', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('公司統編', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$billing_display_fields_order = array( | |
"billing_first_name" => "", | |
"billing_address_1" => "", | |
"billing_postcode" => "", | |
"billing_email" => "", | |
"billing_phone" => "", | |
"billing_company" => "", | |
"billing_company_tax_id" => "", | |
); | |
foreach ($billing_display_fields_order as $field) { | |
if (!empty($field)) { | |
$billing_display_fields_order[$field] = $fields[$field]; | |
} | |
} | |
return $billing_display_fields_order; | |
} | |
add_filter('woocommerce_billing_fields', 'mxp_custom_override_my_account_billing_fields', 999, 1); | |
function mxp_custom_override_my_account_shipping_fields($fields) { | |
$fields['shipping']['shipping_phone'] = array( | |
'label' => __('收件人電話', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('收件人手機格式:0912345678', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['shipping']['shipping_email'] = array( | |
'label' => __('收貨人信箱', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('請輸入收貨人信箱', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$shipping_display_fields_order = array( | |
"shipping_first_name" => "", | |
"shipping_address_1" => "", | |
"shipping_postcode" => "", | |
"shipping_email" => "", | |
"shipping_phone" => "", | |
"shipping_company" => "", | |
); | |
foreach ($shipping_display_fields_order as $field) { | |
if (!empty($field)) { | |
$shipping_display_fields_order[$field] = $fields[$field]; | |
} | |
} | |
return $shipping_display_fields_order; | |
} | |
add_filter('woocommerce_shipping_fields', 'mxp_custom_override_my_account_shipping_fields', 999, 1); | |
function mxp_custom_override_checkout_fields($fields) { | |
$fields['billing']['billing_first_name'] = array( | |
'label' => __('姓名', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('姓名', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-first'), | |
'clear' => true, | |
); | |
$fields['shipping']['shipping_first_name'] = array( | |
'label' => __('姓名', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('姓名', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-first'), | |
'clear' => true, | |
); | |
$fields['billing']['billing_company'] = array( | |
'label' => __('公司名稱', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('公司名稱', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['billing']['billing_company_tax_id'] = array( | |
'label' => __('公司統編', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('公司統編', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['shipping']['shipping_company'] = array( | |
'label' => __('公司名稱', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('公司名稱', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['billing']['billing_phone'] = array( | |
'label' => __('電話', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('手機格式:0912345678', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['billing']['billing_postcode'] = array( | |
'label' => __('郵遞區號', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('郵遞區號', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['billing']['billing_address_1'] = array( | |
'label' => __('地址', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('地址', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['shipping']['shipping_address_1'] = array( | |
'label' => __('地址', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('地址', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['shipping']['shipping_phone'] = array( | |
'label' => __('收件人電話', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('收件人手機格式:0912345678', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['billing']['billing_email'] = array( | |
'label' => __('結帳信箱', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('請輸入信箱', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => true, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
$fields['shipping']['shipping_email'] = array( | |
'label' => __('收貨人信箱', 'mxp-wc-checkout-fields-custom'), | |
'placeholder' => _x('請輸入收貨人信箱', 'placeholder', 'mxp-wc-checkout-fields-custom'), | |
'required' => false, | |
'class' => array('form-row-wide'), | |
'clear' => true, | |
); | |
//reorder fields | |
$billing_fields = array(); | |
$shipping_fields = array(); | |
$billing_display_fields_order = array( | |
"billing_first_name", | |
"billing_address_1", | |
"billing_postcode", | |
"billing_email", | |
"billing_phone", | |
"billing_company", | |
"billing_company_tax_id", | |
); | |
foreach ($billing_display_fields_order as $field) { | |
$billing_fields[$field] = $fields["billing"][$field]; | |
} | |
$shipping_display_fields_order = array( | |
"shipping_first_name", | |
"shipping_address_1", | |
"shipping_postcode", | |
"shipping_email", | |
"shipping_phone", | |
"shipping_company", | |
); | |
foreach ($shipping_display_fields_order as $field) { | |
$shipping_fields[$field] = $fields["shipping"][$field]; | |
} | |
$fields["billing"] = $billing_fields; | |
$fields["shipping"] = $shipping_fields; | |
return $fields; | |
} | |
add_filter('woocommerce_checkout_fields', 'mxp_custom_override_checkout_fields', 999, 1); | |
function mxp_custom_checkout_field_display_admin_order_billing_meta($order) { | |
echo '<p><strong>' . __('公司統編', 'mxp-wc-checkout-fields-custom') . ':</strong> ' . get_post_meta($order->id, '_billing_company_tax_id', true) . '</p>'; | |
} | |
add_action('woocommerce_admin_order_data_after_billing_address', 'mxp_custom_checkout_field_display_admin_order_billing_meta', 10, 1); | |
function mxp_custom_checkout_field_display_admin_order_shipping_meta($order) { | |
echo '<p><strong>' . __('收貨人手機', 'mxp-wc-checkout-fields-custom') . ':</strong> ' . get_post_meta($order->id, '_shipping_phone', true) . '</p>'; | |
echo '<p><strong>' . __('收貨人信箱', 'mxp-wc-checkout-fields-custom') . ':</strong> ' . get_post_meta($order->id, '_shipping_email', true) . '</p>'; | |
} | |
add_action('woocommerce_admin_order_data_after_shipping_address', 'mxp_custom_checkout_field_display_admin_order_shipping_meta', 10, 1); | |
function mxp_checkout_page_footer() { | |
if (is_checkout() || is_account_page()) { | |
?> | |
<script> | |
jQuery(document).ready(function(){ | |
jQuery('<div id="mxp-billing-zipcode"></div>').insertBefore('#billing_address_1_field'); | |
jQuery('<div id="mxp-shipping-zipcode"></div>').insertBefore('#shipping_address_1_field'); | |
jQuery('#billing_postcode_field').hide(); | |
jQuery('#shipping_postcode_field').hide(); | |
function changecb(){ | |
if (jQuery(this)[0].parentNode.id == 'mxp-shipping-zipcode'){ | |
jQuery('#mxp-shipping-zipcode').twzipcode('get', function (county, district, zipcode) { | |
jQuery('#shipping_address_1').val(county+district); | |
jQuery('#shipping_postcode').val(zipcode).trigger('update'); | |
}); | |
} else { | |
jQuery('#mxp-billing-zipcode').twzipcode('get', function (county, district, zipcode) { | |
jQuery('#billing_address_1').val(county+district); | |
jQuery('#billing_postcode').val(zipcode).trigger('update'); | |
}); | |
} | |
} | |
//感謝 essoduke 大的郵遞區號專案 https://github.com/essoduke/jQuery-TWzipcode | |
//路徑視使用需求而改,預設是抓取目前使用的主題 /js/ 目錄下的 jquery.twzipcode.min.js 檔案 | |
//可以從 https://raw.githubusercontent.com/essoduke/jQuery-TWzipcode/master/jquery.twzipcode.min.js 這裡抓下來放進去 | |
jQuery.getScript("<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.twzipcode.min.js", function(){ | |
//billing | |
jQuery('#mxp-billing-zipcode').twzipcode({ | |
readonly:true, | |
detect: true, | |
onCountySelect:changecb, | |
onDistrictSelect:changecb | |
}); | |
var b_addr = jQuery('#billing_address_1').val(); | |
jQuery('#mxp-billing-zipcode').twzipcode('set', jQuery('#billing_postcode').val()); | |
jQuery('#billing_address_1').val(b_addr); | |
//shipping | |
jQuery('#mxp-shipping-zipcode').twzipcode({ | |
readonly:true, | |
detect: true, | |
onCountySelect:changecb, | |
onDistrictSelect:changecb | |
}); | |
var s_addr = jQuery('#shipping_address_1').val(); | |
jQuery('#mxp-shipping-zipcode').twzipcode('set', jQuery('#shipping_postcode').val()); | |
jQuery('#shipping_address_1').val(s_addr); | |
}); | |
}); | |
</script> | |
<?php | |
} | |
} | |
add_action('wp_footer', 'mxp_checkout_page_footer'); | |
//加入免運權重,避免多運費選項出現 | |
function hide_shipping_when_free_is_available($rates) { | |
$free = array(); | |
foreach ($rates as $rate_id => $rate) { | |
if ('free_shipping' === $rate->method_id) { | |
$free = array(); | |
$free[$rate_id] = $rate; | |
break; | |
} | |
if ('flat_rate' === $rate->method_id) { | |
if ($rate->cost == 0) { | |
$free = array(); | |
$rate->label = __('免運費', 'mxp-wc-checkout-fields-custom'); | |
$free[$rate_id] = $rate; | |
break; | |
} | |
} | |
} | |
return !empty($free) ? $free : $rates; | |
} | |
add_filter('woocommerce_package_rates', 'hide_shipping_when_free_is_available', 100, 1); | |
//購物車自動更新數量 | |
function mxp_auto_cart_update_qty_script() { | |
?> | |
<script> | |
jQuery('div.woocommerce').on('change', '.qty', function(){ | |
jQuery("[name='update_cart']").removeAttr('disabled'); | |
jQuery("[name='update_cart']").trigger("click"); | |
}); | |
</script> | |
<?php | |
} | |
add_action('woocommerce_after_cart', 'mxp_auto_cart_update_qty_script'); | |
//更改運送方式1 | |
function filter_woocommerce_shipping_package_name($sprintf, $i, $package) { | |
// make filter magic happen here... | |
return '運送方式'; | |
}; | |
add_filter('woocommerce_shipping_package_name', 'filter_woocommerce_shipping_package_name', 10, 3); | |
function custom_shop_order_column($columns) { | |
$ordered_columns = array(); | |
foreach ($columns as $key => $column) { | |
$ordered_columns[$key] = $column; | |
if ('order_date' == $key) { | |
$ordered_columns['order_notes'] = '備註'; | |
} | |
} | |
return $ordered_columns; | |
} | |
function custom_shop_order_list_column_content($column) { | |
global $post, $the_order; | |
$customer_note = $post->post_excerpt; | |
if ($column == 'order_notes') { | |
if ($the_order->get_customer_note()) { | |
echo '<span class="note-on customer tips" data-tip="' . wc_sanitize_tooltip($the_order->get_customer_note()) . '">' . __('Yes', 'woocommerce') . '</span>'; | |
} | |
if ($post->comment_count) { | |
$latest_notes = wc_get_order_notes(array( | |
'order_id' => $post->ID, | |
'limit' => 1, | |
'orderby' => 'date_created_gmt', | |
)); | |
$latest_note = current($latest_notes); | |
if (isset($latest_note->content) && 1 == $post->comment_count) { | |
echo '<span class="note-on tips" data-tip="' . wc_sanitize_tooltip($latest_note->content) . '">' . __('Yes', 'woocommerce') . '</span>'; | |
} elseif (isset($latest_note->content)) { | |
// translators: %d: notes count | |
echo '<span class="note-on tips" data-tip="' . wc_sanitize_tooltip($latest_note->content . '<br/><small style="display:block">' . sprintf(_n('Plus %d other note', 'Plus %d other notes', ($post->comment_count - 1), 'woocommerce'), $post->comment_count - 1) . '</small>') . '">' . __('Yes', 'woocommerce') . '</span>'; | |
} else { | |
// translators: %d: notes count | |
echo '<span class="note-on tips" data-tip="' . wc_sanitize_tooltip(sprintf(_n('%d note', '%d notes', $post->comment_count, 'woocommerce'), $post->comment_count)) . '">' . __('Yes', 'woocommerce') . '</span>'; | |
} | |
} | |
} | |
} | |
// 設定樣式 | |
function add_custom_order_status_actions_button_css() { | |
echo '<style> | |
td.order_notes > .note-on { display: inline-block !important;} | |
span.note-on.customer { margin-right: 4px !important;} | |
span.note-on.customer::after { font-family: woocommerce !important; content: "\e026" !important;} | |
</style>'; | |
} | |
//判斷 WC 版本是否大於 v3.3 版才啟用附註功能 | |
if (woocommerce_version_check('3.3')) { | |
//Ref: https://stackoverflow.com/a/49047149 | |
add_filter('manage_edit-shop_order_columns', 'custom_shop_order_column', 90); | |
add_action('manage_shop_order_posts_custom_column', 'custom_shop_order_list_column_content', 10, 1); | |
add_action('admin_head', 'add_custom_order_status_actions_button_css'); | |
} | |
//移除在購物車計算運費的方法 | |
function disable_shipping_calc_on_cart( $show_shipping ) { | |
if( is_cart() ) { | |
return false; | |
} | |
return $show_shipping; | |
} | |
add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'disable_shipping_calc_on_cart', 99 ); |
2018/03/12 更新支援 WooCommerce 3.3.x
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
更新資訊:
Q: 請問如何在選擇縣市、郵遞區號的欄位,套上css的樣式?
A:
結帳欄位的 CSS 樣式調整你可以參考元件組成:
先對這幾個設定好樣式 CSS 就可以在畫面中控制樣式。例如:
...等等
如果是要補上 label 元件的話就要寫上 JavaScript ,這塊你只要抓最新版的郵遞區號外掛 我裡面有寫一個事件「afterZipcodeSetup」已提交給作者更新,讓我可以在完成元件設定後再補上其他元件的做法,方法如下:(需改到我寫的程式碼片段)