如何在WooCommerce新订单邮件中传递localStorage存储的商品链接

一、完善前端传递逻辑 #

你的现有前端代码只完成了存入localStorage的部分，缺少在广告购买页提交订单时传递该链接的关键步骤，且存在语法错误（缺少闭合}）。推荐两种适配WooCommerce流程的可靠传递方式：

方式1：隐藏表单字段传递（优先推荐） #

在商品页存入localStorage，再在结账页面将链接通过隐藏字段传入订单提交数据：

// 商品页存入localStorage（补全语法）
const currentURL = window.location.href;
if (currentURL.startsWith("https://vestcome.com/listing/")) {
    localStorage.setItem("originalLink", currentURL);
}

// 结账页面（广告购买页）添加隐藏字段
document.addEventListener('DOMContentLoaded', function() {
    const originalLink = localStorage.getItem("originalLink");
    if (originalLink) {
        // 创建隐藏输入框并入WooCommerce结账表单
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'original_listing_link';
        hiddenInput.value = originalLink;
        document.querySelector('form.checkout').appendChild(hiddenInput);
        
        // 提交后清空localStorage，避免后续订单重复携带
        document.querySelector('form.checkout').addEventListener('submit', function() {
            localStorage.removeItem("originalLink");
        });
    }
});

方式2：URL参数传递（作为localStorage备选） #

从商品页跳转至广告购买页时，在URL后拼接来源链接参数：

// 商品页跳转按钮点击事件
document.querySelector('.buy-ad-button').addEventListener('click', function(e) {
    e.preventDefault();
    const currentURL = window.location.href;
    // 跳转到广告购买页并携带参数
    window.location.href = "https://vestcome.com/ad-checkout/?from_listing=" + encodeURIComponent(currentURL);
});

在结账页面读取URL参数并生成隐藏字段：

document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const originalLink = urlParams.get('from_listing');
    if (originalLink) {
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'original_listing_link';
        hiddenInput.value = decodeURIComponent(originalLink);
        document.querySelector('form.checkout').appendChild(hiddenInput);
    }
});

二、后端保存链接到订单元数据 #

你的现有后端代码仅接收了Ajax数据，但未关联到具体订单。需通过WooCommerce钩子，将传递的链接保存为订单自定义元数据：

在主题functions.php中添加以下代码：

// 保存自定义字段到订单元数据
add_action('woocommerce_checkout_update_order_meta', 'save_original_listing_link', 10, 1);
function save_original_listing_link($order_id) {
    if (!empty($_POST['original_listing_link'])) {
        $clean_link = sanitize_url($_POST['original_listing_link']);
        update_post_meta($order_id, '_original_listing_link', $clean_link);
    }
}

// 后台订单页面显示来源链接
add_action('woocommerce_admin_order_data_after_billing_address', 'show_listing_link_in_admin', 10, 1);
function show_listing_link_in_admin($order) {
    $link = get_post_meta($order->get_id(), '_original_listing_link', true);
    if ($link) {
        echo '<p><strong>来源商品页：</strong><a href="' . esc_url($link) . '" target="_blank">' . esc_url($link) . '</a></p>';
    }
}

三、修改订单邮件模板显示链接 #

要让订单邮件展示该链接，需修改WooCommerce邮件模板：

1. 在主题目录创建woocommerce/emails文件夹
2. 复制WooCommerce插件目录templates/emails/下的目标邮件模板（如customer-completed-order.php或customer-processing-order.php）到新建文件夹
3. 在模板合适位置（如订单详情区域）添加以下代码：

<?php
$original_link = get_post_meta($order->get_id(), '_original_listing_link', true);
if ($original_link) {
    echo '<p><strong>来源商品页：</strong><a href="' . esc_url($original_link) . '" target="_blank">' . esc_url($original_link) . '</a></p>';
}
?>

关键注意事项 #

• 确保广告购买页的表单提交会触发WooCommerce订单创建流程，否则自定义字段无法被钩子捕获
• 用sanitize_url和esc_url处理链接，避免XSS安全风险
• 搭配URL参数传递可兼容用户清除localStorage的场景

内容的提问来源于stack exchange，提问作者Andrew