使用 WooCommerce 的不同溫層贈品功能提升客戶體驗

在電子商務的世界中，提升客戶的購物體驗是一個永不停歇的目標。最近，我們推出了一個全新的 WooCommerce 插件功能：不同溫層贈品設置。這個功能能夠幫助您為購物車中的常溫和冷凍商品分別設定不同的贈品，以此激勵客戶增加購買金額，提升銷售額。

Table of Contents

功能介紹

這個「贈品設定」插件允許管理者在 WooCommerce 後台輕鬆地創建並管理贈品活動檔期。每個檔期可以包含多組條件，例如在某個購物金額達到後，客戶可以選擇免費贈品。這些條件可以根據產品類型（常溫或冷凍商品）來設定，讓商店能更靈活地提供符合不同客戶需求的贈品方案。

核心功能

多檔期管理：允許商店管理者創建多個不同的贈品活動檔期。每個檔期都可以設置特定的開始和結束時間，並根據需要啟用或禁用。
靈活的贈品條件設置：管理者可以為常溫和冷凍商品分別設置贈品條件。這些條件基於購物金額，並允許多組不同的金額門檻對應不同的贈品選項。
產品多選功能：透過集成的 Select2 多選框，管理者可以方便地從產品列表中選擇可用作贈品的商品，並允許顧客在結帳時進行選擇。
動態增刪檔期功能：管理者可以隨時添加或刪除檔期，方便快速應對市場需求變化。

程式碼

function register_gift_settings_page() {
    add_menu_page(
        '贈品設定',
        '贈品設定',
        'manage_options',
        'gift-settings',
        'display_gift_settings_page'
    );
}
add_action('admin_menu', 'register_gift_settings_page');

function display_gift_settings_page() {
    ?>
    <div class="wrap">
        <h1>贈品設定</h1>
        <form method="post" action="options.php" id="gift-settings-form">
            <?php
            settings_fields('gift_settings_group');
            do_settings_sections('gift-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

function register_gift_settings() {
    register_setting('gift_settings_group', 'gift_periods');

    add_settings_section(
        'gift_settings_section',
        '贈品設定',
        null,
        'gift-settings'
    );

    add_settings_field(
        'gift_periods',
        '檔期設定',
        'display_gift_periods_field',
        'gift-settings',
        'gift_settings_section'
    );
}
add_action('admin_init', 'register_gift_settings');

function display_gift_periods_field() {
    $periods = get_option('gift_periods', []);
    $period_count = count($periods) ?: 1;

    for ($i = 0; $i < $period_count; $i++) {
        $period = isset($periods[$i]) ? $periods[$i] : ['enabled' => false, 'name' => '', 'common' => [], 'frozen' => [], 'start' => '', 'end' => ''];
        ?>
        <fieldset style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;" class="gift-period">
            <legend>
                <input type="checkbox" name="gift_periods[<?php echo $i; ?>][enabled]" value="1" class="enable-period" <?php checked($period['enabled'], true); ?> />
                檔期 <?php echo $i + 1; ?> (啟用)
            </legend>
            <label>檔期名稱：
                <input type="text" name="gift_periods[<?php echo $i; ?>][name]" value="<?php echo esc_attr($period['name']); ?>" placeholder="檔期名稱" />
            </label><br />
            <label>活動開始時間：
                <input type="datetime-local" name="gift_periods[<?php echo $i; ?>][start]" value="<?php echo esc_attr($period['start']); ?>" />
            </label><br />
            <label>活動結束時間：
                <input type="datetime-local" name="gift_periods[<?php echo $i; ?>][end]" value="<?php echo esc_attr($period['end']); ?>" />
            </label><br />
            <h4>常溫商品</h4>
            <?php for ($j = 0; $j < 3; $j++): ?>
                <div>
                    <input type="number" name="gift_periods[<?php echo $i; ?>][common][<?php echo $j; ?>][amount]" value="<?php echo esc_attr($period['common'][$j]['amount'] ?? ''); ?>" placeholder="金額" />
                    <select class="product-select" name="gift_periods[<?php echo $i; ?>][common][<?php echo $j; ?>][gifts][]" multiple="multiple" style="width: 100%;">
                        <?php
                        $selected_gifts = $period['common'][$j]['gifts'] ?? [];
                        foreach ($selected_gifts as $gift_id) {
                            $product = wc_get_product($gift_id);
                            if ($product) {
                                echo '<option value="' . esc_attr($gift_id) . '" selected="selected">' . esc_html($product->get_name()) . '</option>';
                            }
                        }
                        ?>
                    </select>
                </div>
            <?php endfor; ?>
            <h4>冷凍商品</h4>
            <?php for ($j = 0; $j < 3; $j++): ?>
                <div>
                    <input type="number" name="gift_periods[<?php echo $i; ?>][frozen][<?php echo $j; ?>][amount]" value="<?php echo esc_attr($period['frozen'][$j]['amount'] ?? ''); ?>" placeholder="金額" />
                    <select class="product-select" name="gift_periods[<?php echo $i; ?>][frozen][<?php echo $j; ?>][gifts][]" multiple="multiple" style="width: 100%;">
                        <?php
                        $selected_gifts = $period['frozen'][$j]['gifts'] ?? [];
                        foreach ($selected_gifts as $gift_id) {
                            $product = wc_get_product($gift_id);
                            if ($product) {
                                echo '<option value="' . esc_attr($gift_id) . '" selected="selected">' . esc_html($product->get_name()) . '</option>';
                            }
                        }
                        ?>
                    </select>
                </div>
            <?php endfor; ?>
            <button type="button" class="remove-period">刪除檔期</button>
        </fieldset>
        <?php
    }

    echo '<button type="button" onclick="addNewPeriod()">新增檔期</button>';
    ?>
    <script type="text/javascript">
        function addNewPeriod() {
            const container = document.querySelector('#gift-settings-form');
            const newIndex = container.querySelectorAll('.gift-period').length;
            const newFieldset = `
                <fieldset style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;" class="gift-period">
                    <legend>
                        <input type="checkbox" name="gift_periods[${newIndex}][enabled]" value="1" class="enable-period" /> 檔期 ${newIndex + 1} (啟用)
                    </legend>
                    <label>檔期名稱：
                        <input type="text" name="gift_periods[${newIndex}][name]" placeholder="檔期名稱" />
                    </label><br />
                    <label>活動開始時間：
                        <input type="datetime-local" name="gift_periods[${newIndex}][start]" />
                    </label><br />
                    <label>活動結束時間：
                        <input type="datetime-local" name="gift_periods[${newIndex}][end]" />
                    </label><br />
                    <h4>常溫商品</h4>
                    <div>
                        <input type="number" name="gift_periods[${newIndex}][common][0][amount]" placeholder="金額" />
                        <select class="product-select" name="gift_periods[${newIndex}][common][0][gifts][]" multiple="multiple" style="width: 100%;"></select>
                    </div>
                    <div>
                        <input type="number" name="gift_periods[${newIndex}][common][1][amount]" placeholder="金額" />
                        <select class="product-select" name="gift_periods[${newIndex}][common][1][gifts][]" multiple="multiple" style="width: 100%;"></select>
                    </div>
                    <div>
                        <input type="number" name="gift_periods[${newIndex}][common][2][amount]" placeholder="金額" />
                        <select class="product-select" name="gift_periods[${newIndex}][common][2][gifts][]" multiple="multiple" style="width: 100%;"></select>
                    </div>
                    <h4>冷凍商品</h4>
                    <div>
                        <input type="number" name="gift_periods[${newIndex}][frozen][0][amount]" placeholder="金額" />
                        <select class="product-select" name="gift_periods[${newIndex}][frozen][0][gifts][]" multiple="multiple" style="width: 100%;"></select>
                    </div>
                    <div>
                        <input type="number" name="gift_periods[${newIndex}][frozen][1][amount]" placeholder="金額" />
                        <select class="product-select" name="gift_periods[${newIndex}][frozen][1][gifts][]" multiple="multiple" style="width: 100%;"></select>
                    </div>
                    <div>
                        <input type="number" name="gift_periods[${newIndex}][frozen][2][amount]" placeholder="金額" />
                        <select class="product-select" name="gift_periods[${newIndex}][frozen][2][gifts][]" multiple="multiple" style="width: 100%;"></select>
                    </div>
                    <button type="button" class="remove-period">刪除檔期</button>
                </fieldset>
            `;
            container.insertAdjacentHTML('beforeend', newFieldset);
            initializeProductSelect();
            handleEnableCheckbox();
        }

        function handleEnableCheckbox() {
            const checkboxes = document.querySelectorAll('.enable-period');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const fieldset = this.closest('fieldset');
                    const inputs = fieldset.querySelectorAll('input, select');
                    inputs.forEach(input => input.disabled = !this.checked);
                });
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            initializeProductSelect();
            handleEnableCheckbox();

            const removeButtons = document.querySelectorAll('.remove-period');
            removeButtons.forEach(button => {
                button.addEventListener('click', function () {
                    this.closest('fieldset').remove();
                });
            });
        });

        function initializeProductSelect() {
            const selects = document.querySelectorAll('.product-select');
            selects.forEach(select => {
                if (!select.classList.contains('select2-hidden-accessible')) {
                    jQuery(select).select2({
                        placeholder: "選擇贈品",
                        allowClear: true,
                        ajax: {
                            url: '<?php echo admin_url('admin-ajax.php?action=woocommerce_json_search_products&security=' . wp_create_nonce('search-products')); ?>',
                            dataType: 'json',
                            delay: 250,
                            data: function (params) {
                                return { term: params.term };
                            },
                            processResults: function (data) {
                                return { results: data };
                            },
                            cache: true
                        }
                    });
                }
            });
        }
    </script>
    <?php
}

function enqueue_select2_assets() {
    wp_enqueue_style('select2-css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css');
    wp_enqueue_script('select2-js', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'enqueue_select2_assets');

如何設置

進入後台設定
在 WooCommerce 的管理面板中，您會看到一個新的「贈品設定」選項。點擊進入設定頁面，您可以看到為不同的檔期設置贈品的選項。
添加檔期
在設定頁面中，您可以添加新的贈品檔期。每個檔期可以根據您的營銷計劃設置特定的開始和結束日期。
設定門檻和贈品
在每個檔期中，您可以設定常溫和冷凍商品的金額門檻。例如，當購物車中的常溫商品金額達到 100 元時，客戶將獲得一份特定的贈品；而當冷凍商品金額達到 200 元時，則提供另一份贈品。
自動添加贈品
當客戶的購物車滿足條件時，系統會自動在購物車中添加贈品，這些贈品的價格將顯示為 0 元，以確保客戶獲得的是真正的免費贈品。

使用案例

假設您經營一家食品網店，提供大量的常溫和冷凍食品。您可以設置以下檔期：

檔期 1：夏季促銷
- 常溫商品滿 100 元，贈送一份精美零食。
- 冷凍商品滿 200 元，贈送一袋冷凍水果。
檔期 2：年終大促
- 常溫商品滿 150 元，贈送一瓶高級橄欖油。
- 冷凍商品滿 250 元，贈送一盒高級冰淇淋。

結語

透過不同溫層贈品的策略，商家可以更加靈活地制定營銷方案，吸引客戶提高購買金額。這不僅有助於提高客戶滿意度，還能增加銷售額，達到雙贏的效果。試著利用這個功能來優化您的銷售策略，讓您的客戶享受更多的購物樂趣！

功能介紹

核心功能

程式碼

如何設置

使用案例

結語

相關文章