WooCommerce 後台商品列表新增複製購物車連結並支援優惠券輸入功能

小豬 — Tue, 23 Dec 2025 22:21:03 +0000

前言

在 WooCommerce 後台商品列表中，管理者常需要快速取得商品的「加入購物車」連結以便分享或推廣。這段程式碼實作了在商品列表中新增一欄「複製課程連結」按鈕，點擊後可彈出視窗讓使用者輸入優惠券代碼，並將優惠券參數附加到連結中，最後將完整連結複製到剪貼簿。這對於需要快速產生帶優惠券的購物車連結的電商管理者非常實用。

新增自訂欄位顯示複製按鈕

利用 manage_edit-product_columns 過濾器新增一欄「複製課程連結」，並透過 manage_product_posts_custom_column 動作在該欄位輸出一個帶有商品加入購物車 URL 的按鈕。URL 是以網站首頁 URL 加上 /cart/?add-to-cart=商品ID 組成。

add_filter('manage_edit-product_columns', 'add_copy_link_column');
function add_copy_link_column($columns) {
    $columns['copy_add_to_cart'] = __('複製課程連結', 'woocommerce');
    return $columns;
}

add_action('manage_product_posts_custom_column', 'show_copy_link_column_content', 10, 2);
function show_copy_link_column_content($column, $post_id) {
    if ($column === 'copy_add_to_cart') {
        $product_id = (int) $post_id;
        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;
        echo '';
    }
}

客製化 JavaScript 處理複製邏輯與優惠券輸入

在後台商品列表頁尾插入 JavaScript 和 CSS，當使用者點擊「複製」按鈕時：

透過 window.prompt 詢問是否輸入優惠券代碼，可留空。
根據輸入結果組合最終 URL，若有優惠券則加上 &wt_coupon=優惠券代碼。
使用 Clipboard API 複製連結，若不支援則使用傳統 execCommand 備援。
複製成功會顯示成功提示，失敗則顯示錯誤提示並提供手動複製。

function buildFinalUrl(baseUrl) {
    var coupon = window.prompt('是否要加入優惠券？\n(可留空，直接按確定即可)', '');
    if (coupon === null) return baseUrl;
    coupon = String(coupon || '').trim();
    if (!coupon) return baseUrl;
    var joiner = (baseUrl.indexOf('?') === -1) ? '?' : '&';
    return baseUrl + joiner + 'wt_coupon=' + encodeURIComponent(coupon);
}

$(document).on('click', '.copy-cart-link', function(e) {
    e.preventDefault();
    var button = $(this);
    var baseUrl = button.data('url');
    var originalHtml = button.html();
    if (button.hasClass('copying')) return;
    button.addClass('copying');
    var finalUrl = buildFinalUrl(baseUrl);
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(finalUrl).then(function() {
            showCopySuccess(button, originalHtml);
        }).catch(function() {
            fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
        });
    } else {
        fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
    }
});

快速動作連結整合

除了欄位按鈕外，也在商品標題下方的快速動作連結加入「複製購物車連結」，提升操作便利性。此連結同樣帶有商品加入購物車的 URL，並套用相同的 JavaScript 行為。

add_filter('post_row_actions', 'add_copy_link_quick_action', 10, 2);
function add_copy_link_quick_action($actions, $post) {
    if ($post->post_type === 'product') {
        $product_id = (int) $post->ID;
        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;
        $actions['copy_cart_link'] = '📋 複製購物車連結';
    }
    return $actions;
}

實務應用與優化建議

此功能適合需要快速產生帶優惠券的購物車連結的 WooCommerce 商店管理員，方便推廣或客服回覆。未來可優化：

將網站 URL 改為動態取得，避免硬編碼。
增加複製成功的視覺動畫提升 UX。
支援多種優惠券參數或其他自訂參數。
對於大量商品列表，可考慮優化前端效能。

完整程式碼


                 複製
              ';
    }
}

// 添加 JavaScript 和 CSS
add_action('admin_footer', 'copy_link_admin_script');
function copy_link_admin_script() {
    $screen = get_current_screen();
    if (!$screen || $screen->id !== 'edit-product') {
        return;
    }
    ?>



    
    post_type === 'product') {
        $product_id = (int) $post->ID;

        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;

        $actions['copy_cart_link'] = '📋 複製購物車連結';
    }
    return $actions;
}