調整適合在台灣銷售的 WooCommerce 結帳頁表單欄位(含郵遞區號自動選擇)Blog: https://www.mxp.tw/5961/
<?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 ); |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
更新資訊:
Q: 請問如何在選擇縣市、郵遞區號的欄位,套上css的樣式?
A:
結帳欄位的 CSS 樣式調整你可以參考元件組成:
先對這幾個設定好樣式 CSS 就可以在畫面中控制樣式。例如:
...等等
如果是要補上 label 元件的話就要寫上 JavaScript ,這塊你只要抓最新版的郵遞區號外掛 我裡面有寫一個事件「afterZipcodeSetup」已提交給作者更新,讓我可以在完成元件設定後再補上其他元件的做法,方法如下:(需改到我寫的程式碼片段)