Skip to content

Instantly share code, notes, and snippets.

@nczz
Last active January 31, 2020 09:34
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save nczz/f9d9b5ccc7037327cf41d1e6e52d93e6 to your computer and use it in GitHub Desktop.
Save nczz/f9d9b5ccc7037327cf41d1e6e52d93e6 to your computer and use it in GitHub Desktop.
調整適合在台灣銷售的 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 );
@nczz
Copy link
Author

nczz commented May 13, 2017

更新資訊:
Q: 請問如何在選擇縣市、郵遞區號的欄位,套上css的樣式?
A:

結帳欄位的 CSS 樣式調整你可以參考元件組成:

  • #mxp-billing-zipcode - 這是包在下拉選單最外層的 div id
  • #mxp-billing-zipcode [name="county"] - 縣市
  • #mxp-billing-zipcode [name="district"] - 鄉鎮
  • #mxp-billing-zipcode [name="zipcode"] - 郵遞區號

先對這幾個設定好樣式 CSS 就可以在畫面中控制樣式。例如:

#mxp-billing-zipcode {
    width: 100px;
}

...等等

如果是要補上 label 元件的話就要寫上 JavaScript ,這塊你只要抓最新版的郵遞區號外掛 我裡面有寫一個事件「afterZipcodeSetup」已提交給作者更新,讓我可以在完成元件設定後再補上其他元件的做法,方法如下:(需改到我寫的程式碼片段)

                jQuery('#mxp-billing-zipcode').twzipcode({
                        readonly:true,
                        detect: true,
                        onCountySelect:changecb,
                        onDistrictSelect:changecb,
                        afterZipcodeSetup: function(){
                        	jQuery('<label for="country">縣市:</label>').insertBefore('#mxp-billing-zipcode [name="county"]');
                        	jQuery('<label for="district">鄉鎮:</label>').insertBefore('#mxp-billing-zipcode [name="district"]');
                        	jQuery('<label for="zipcode">郵遞區號:</label>').insertBefore('#mxp-billing-zipcode [name="zipcode"]');
                        }
                });

@nczz
Copy link
Author

nczz commented Mar 11, 2018

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