利用 Blocksy 主題 Hook 在 WooCommerce 產品頁面新增下載和預覽連結彈窗

2025-02-14 作者: 小豬

在 WooCommerce 產品頁面中，若你的產品包含可供下載或預覽的檔案，你可能希望提供一個更直覺的方式，讓使用者可以快速查看預覽文件，並在購買後下載對應的檔案。
本篇教學將帶你一步步實作如何透過 blocksy:woocommerce:product-single:add_to_cart:after Action Hook，在 WooCommerce 產品頁面購物車按鈕區塊的下方新增一個彈窗，顯示預覽和下載連結。

步驟 1：新增功能程式碼

請將以下程式碼添加到你的 WordPress 主題 functions.php 文件或是專用的插件中。

// 在 WooCommerce 產品頁面購物車按鈕區塊的下方新增彈窗顯示下載和預覽連結
add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
    global $post;
    echo '<div class="ks_links_section">';
    echo '<div class="datasheet_btn"><button id="ks_show_links_modal" >Datasheet ></button></div>';
    echo '<div id="ks_links_modal" class="ks_modal" style="display:none;">';
    echo '<div class="ks_modal-content">';
    echo '<span class="ks_close">&times;</span>';
        
    // 顯示預覽連結
    echo '<h4>Preview file</h4>';
    $preview_links = get_post_meta($post->ID, '_preview_links', true);
    if (!empty($preview_links)) {
        echo '<table class="file-table" border="0" width="100%">';
        foreach ($preview_links as $link) {
            echo '<tr>';
            echo '<td>' . esc_html($link['name']) . '</td>';
            echo '<td>' . esc_html($link['date']) . '</td>';
            echo '<td><a href="' . esc_url($link['url']) . '" target="_blank">Preview</a></td>';
            echo '</tr>';
        }
        echo '</table>';
    } else {
        echo '<p>No preview files available.</p>';
    }

    // 顯示下載連結（僅限已購買並登入的用戶）
    if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
        echo '<h4>Download file</h4>';
        $download_links = get_post_meta($post->ID, '_download_links', true);
        if (!empty($download_links)) {
            echo '<table class="file-table" border="0" width="100%">';
            foreach ($download_links as $index => $link) {
                echo '<tr>';
                echo '<td>' . esc_html($link['name']) . '</td>';
                echo '<td>' . esc_html($link['date']) . '</td>';
                echo '<td>';
                echo "<button class='download-btn' data-product-id='{$post->ID}' data-index='{$index}' style='color: #0073aa; background: none; border: none; cursor: pointer;'>Download</button>";
                echo '</td>';
                echo '</tr>';
            }
            echo '</table>';
        } else {
            echo '<p>No download links available.</p>';
        }
    }
    
    echo '</div></div>';
    echo '</div>'; // .ks_links_section
});

步驟 2：新增前端樣式與行為

為了讓這段功能更完善，我們需要添加一些 CSS 來美化彈窗效果，並且透過 JavaScript 控制顯示/隱藏。

CSS – 設定彈窗外觀

/* 彈窗樣式 */
.ks_modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
    background-color: #fff;
    padding: 20px;
    margin: 15% auto;
    width: 50%;
    border-radius: 10px;
}

.ks_close {
    float: right;
    font-size: 24px;
    cursor: pointer;
}

JavaScript – 控制彈窗開關

// 控制彈窗開關
jQuery(document).ready(function($) {
    $('#ks_show_links_modal').on('click', function() {
        $('#ks_links_modal').fadeIn();
    });
    
    $('.ks_close').on('click', function() {
        $('#ks_links_modal').fadeOut();
    });
});

步驟 3：測試與調整

檢查按鈕是否正常顯示：進入 WooCommerce 產品頁面，確認 Datasheet > 按鈕是否出現在購物車按鈕下方。
確認預覽連結功能：點擊按鈕，應該會顯示包含預覽連結的彈窗。
測試下載連結條件：
- 未登入或未購買的用戶應該無法看到下載連結。
- 已購買的用戶應該可以看到下載連結，並且按下下載按鈕能正確下載檔案。

結論

透過這樣的客製化方式，我們能夠在 WooCommerce 產品頁面中新增更友善的下載與預覽體驗。這對於販售包含技術文件或可下載內容的商品特別實用。

發佈留言取消回覆