请求协助：在WooCommerce后台订单详情页添加一键复制功能

你可以通过PHP钩子+JavaScript代码实现这个需求，直接把下面的代码放到主题functions.php文件里，或者创建一个简单的自定义插件即可：

1. 插入一键复制按钮 #

这段代码会在账单地址、配送地址区域的对应字段后生成复制按钮：

add_action('woocommerce_admin_order_data_after_billing_address', 'add_copy_buttons_to_order_details');
add_action('woocommerce_admin_order_data_after_shipping_address', 'add_copy_buttons_to_order_details');

function add_copy_buttons_to_order_details($order) {
    // 账单电话
    if ($order->get_billing_phone()) {
        echo '<p><button class="copy-btn" data-copy-text="' . esc_attr($order->get_billing_phone()) . '">复制电话</button></p>';
    }
    // 账单邮箱
    if ($order->get_billing_email()) {
        echo '<p><button class="copy-btn" data-copy-text="' . esc_attr($order->get_billing_email()) . '">复制邮箱</button></p>';
    }

    // 完整账单地址
    $billing_address = $order->get_formatted_billing_address();
    if ($billing_address) {
        echo '<p><button class="copy-btn" data-copy-text="' . esc_attr($billing_address) . '">复制账单地址</button></p>';
    }

    // 完整配送地址
    $shipping_address = $order->get_formatted_shipping_address();
    if ($shipping_address) {
        echo '<p><button class="copy-btn" data-copy-text="' . esc_attr($shipping_address) . '">复制配送地址</button></p>';
    }
}

2. 添加复制功能逻辑与基础样式 #

这段代码处理点击按钮后的复制操作，同时给按钮加一点适配后台风格的样式：

add_action('admin_footer', 'add_copy_button_script');

function add_copy_button_script() {
    // 仅在订单详情页加载脚本
    global $pagenow;
    if ($pagenow !== 'post.php' || get_post_type() !== 'shop_order') {
        return;
    }
    ?>
    <style>
        .copy-btn {
            padding: 4px 8px;
            font-size: 12px;
            cursor: pointer;
            background: #007cba;
            color: #fff;
            border: none;
            border-radius: 3px;
            margin-left: 8px;
        }
        .copy-btn:hover {
            background: #006ba1;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const copyButtons = document.querySelectorAll('.copy-btn');
            copyButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const textToCopy = this.getAttribute('data-copy-text');
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        // 临时提示复制成功
                        const originalText = this.textContent;
                        this.textContent = '已复制!';
                        setTimeout(() => {
                            this.textContent = originalText;
                        }, 1500);
                    }).catch(err => {
                        console.error('复制失败:', err);
                        alert('复制失败，请手动复制');
                    });
                });
            });
        });
    </script>
    <?php
}

额外说明 #

• 代码会自动判断字段是否有内容，空字段不会显示对应按钮
• 复制成功后按钮会临时显示"已复制!"，1.5秒后恢复原文本
• 样式和按钮位置可以根据需求自行调整，比如修改CSS或者PHP里的输出位置

内容的提问来源于stack exchange，提问作者mücahit bayraktar