專注於架設企業網站,分享WordPress教學和Elementor教學

WooCommerce:在編輯訂單頁面,為帳單位址、配送地址、郵箱、電話添加一鍵複製文案的功能

更新日期:2023-08-25
本系列教學
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

我有一位B2C跨境電商零售站的架設網站客戶,在運營時,有一個小需求:希望能在WooCommerce的訂單詳情頁面中,能夠將Billing(帳單位址)、Shipping(配送地址)顯示在一行中,這樣方便複製到自己的ERP系統中進行管理。

考慮到最終目的是為了複製,那麼添加一鍵複製帳單位址、配送位址的功能就可以了,順帶給郵箱和電話也添加一鍵複製的功能。 於是,下圖便是最終的效果啦,它是怎麼實現的呢? 不需要藉助專門的外掛程式,我們用一段PHP代碼就可以搞定它。

WooCommerce:在編輯訂單頁面,為帳單位址、配送地址、郵箱、電話添加一鍵複製文案的功能

請在Code snippet外掛程式中新增並啟用下面這段php代碼段,注意,可以設置為:Only run in administration area:

// Add "Copy" button next to email and phone fields on order edit page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'add_copy_buttons_to_order_email_and_phone', 10, 1 );
function add_copy_buttons_to_order_email_and_phone( $order ) {
    $email = $order->get_billing_email();
    $phone = $order->get_billing_phone();
    ?>
    <button type="button" class="button copy-email" data-clipboard-text="<?php echo $email; ?>">Copy Email</button>
    <button type="button" class="button copy-phone" data-clipboard-text="<?php echo $phone; ?>">Copy Phone</button>
    <script>
    jQuery(document).ready(function($) {
        var clipboard = new ClipboardJS('.copy-email, .copy-phone');
    });
    </script>
    <?php
}
// Add "Copy" button next to billing and shipping addresses on order edit page and replace <br/> with comma
add_action( 'woocommerce_admin_order_data_after_billing_address', 'add_copy_button_to_billing_address', 10, 1 );
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'add_copy_button_to_shipping_address', 10, 1 );
function add_copy_button_to_billing_address( $order ) {
    $billing_address = $order->get_formatted_billing_address();
    $billing_address = str_replace( '<br/>', ', ', $billing_address );
    ?>
    <button type="button" class="button copy-billing-address" data-clipboard-text="<?php echo $billing_address; ?>">Copy Billing Address</button>
    <script>
    jQuery(document).ready(function($) {
        var clipboard = new ClipboardJS('.copy-billing-address');
    });
    </script>
    <?php
}
function add_copy_button_to_shipping_address( $order ) {
    $shipping_address = $order->get_formatted_shipping_address();
    $shipping_address = str_replace( '<br/>', ', ', $shipping_address );
    ?>
    <button type="button" class="button copy-shipping-address" data-clipboard-text="<?php echo $shipping_address; ?>">Copy Shipping Address</button>
    <script>
    jQuery(document).ready(function($) {
        var clipboard = new ClipboardJS('.copy-shipping-address');
    });
    </script>
    <?php
}

解釋一下上面這段代碼:

這段代碼是用來為WooCommerce訂單編輯頁面添加“複製”按鈕,以便快速複製訂單中的電子郵件地址、電話號碼、帳單位址和配送位址。

代碼的核心是使用了WordPress的鉤子(hook)來將自定義函數添加到特定的位置。 具體來說,代碼使用了以下兩個鉤子:

  • woocommerce_admin_order_data_after_billing_address 鉤子:該鉤子會在帳單地址後面添加一些自定義內容。
  • woocommerce_admin_order_data_after_shipping_address 鉤子:該鉤子會在配送地址後面添加一些自定義內容。

對於電子郵件地址和電話號碼的“複製”按鈕,代碼使用了WooCommerce訂單物件的get_billing_email()和get_billing_phone()方法來獲取訂單的電子郵件地址和電話號碼,並使用了ClipboardJS庫來實現複製操作。

對於帳單位址和配送位址的“複製”按鈕,代碼使用了WooCommerce訂單物件的get_formatted_billing_address()和get_formatted_shipping_address()方法來獲取格式化的帳單位址和配送位址,然後使用PHP的str_replace()函數將地址資訊中的
標籤替換為逗號,並使用ClipboardJS庫來實現複製操作。

最後,為了確保代碼在WooCommerce訂單編輯頁面上正常工作,您需要在訂單編輯頁面上載入jQuery和ClipboardJS庫。 ——只要能複製就行了,這邊只是給技術人員看的。

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我