如何在 WooCommerce 中添加自訂商品宣傳副標功能並輕鬆批量管理

在現代電子商務網站中，產品展示不僅僅限於基本的產品標題、價格和描述。為了更好地吸引顧客並增加銷售量，您可能需要在產品頁面上添加更多的自訂內容來進行商品宣傳。一個非常實用的方式是為每個產品添加宣傳副標，這些副標可以根據不同的商品和促銷活動進行自訂。

在這篇文章中，我將介紹如何在 WooCommerce 中實現一個自訂的「商品宣傳副標」功能，讓您能夠靈活地在產品頁面中添加、編輯和管理這些宣傳內容。而且，這個功能支持批量管理，讓您在管理大量商品時能更加得心應手。

什麼是商品宣傳副標？

商品宣傳副標是指在產品頁面上顯示的一段額外的文字內容，通常位於產品標題和價格之間。這些內容可以是促銷信息、產品特色亮點、優惠活動等，有助於吸引顧客的注意力並提高轉化率。

批量管理：大幅提升管理效率

在經營電商平台時，可能有數十甚至數百件商品需要管理。如果您需要為這些商品逐一設置宣傳內容，那將會是一個繁瑣而耗時的工作。然而，透過我們的這個功能，您可以輕鬆地批量管理所有的商品宣傳副標，極大地提升您的工作效率。

例如，當您有一個新的促銷活動或季節性銷售時，您可以一次性為多個商品添加或更新宣傳副標內容，而無需逐一進行操作。這使得管理過程變得簡單快捷，讓您能夠將更多的時間投入到其他重要的業務上。

如何添加自訂商品宣傳副標功能

步驟 1：新增商品宣傳副標的管理頁面

首先，我們需要在 WordPress 後台新增一個管理頁面，用於設置商品宣傳副標的內容。我們可以通過以下代碼在 functions.php 文件中新增這個頁面：

// 新增自訂選單頁面
add_action('admin_menu', 'custom_product_page');

function custom_product_page() {
    add_menu_page(
        '商品宣傳副標',
        '商品宣傳副標',
        'manage_options',
        'custom-product-settings',
        'custom_product_settings_page'
    );
}

// 顯示自訂選單頁面的 HTML
function custom_product_settings_page() {
    ?>
    <div class="wrap">
        <h1>商品宣傳副標</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('custom_product_settings');
            $custom_sections = get_option('custom_sections', []);
            ?>
            <div id="custom-sections">
                <?php foreach ($custom_sections as $index => $section): ?>
                    <div class="custom-section" data-index="<?php echo $index; ?>">
                        <h2>區域 <?php echo $index + 1; ?></h2>
                        <input type="checkbox" name="custom_sections[<?php echo $index; ?>][enabled]" value="1" <?php checked(1, $section['enabled'], true); ?> />
                        <label for="enabled">啟用自訂內容</label>

                        <select class="custom-select2" name="custom_sections[<?php echo $index; ?>][products][]" multiple="multiple" style="width: 100%;">
                            <?php
                            $products = get_posts([
                                'post_type' => 'product',
                                'posts_per_page' => -1
                            ]);
                            foreach ($products as $product): ?>
                                <option value="<?php echo $product->ID; ?>" <?php echo in_array($product->ID, $section['products']) ? 'selected' : ''; ?>>
                                    <?php echo $product->post_title; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>

                        <textarea name="custom_sections[<?php echo $index; ?>][content]" rows="10" cols="50" style="width: 100%;"><?php echo esc_textarea($section['content']); ?></textarea>

                        <input type="datetime-local" name="custom_sections[<?php echo $index; ?>][start_time]" value="<?php echo esc_attr($section['start_time']); ?>" style="width: 100%;" />
                        <input type="datetime-local" name="custom_sections[<?php echo $index; ?>][end_time]" value="<?php echo esc_attr($section['end_time']); ?>" style="width: 100%;" />

                        <button type="button" class="remove-section button">移除區域</button>
                    </div>
                <?php endforeach; ?>
            </div>
            <button type="button" id="add-section" class="button">新增區域</button>
            <?php submit_button(); ?>
        </form>
    </div>
    <script>
        jQuery(document).ready(function($) {
            // 初始化 Select2 插件
            function initSelect2() {
                $('.custom-select2').select2({
                    width: 'resolve'
                });
            }

            initSelect2(); // 初始化現有的下拉選單

            var sectionIndex = <?php echo count($custom_sections); ?>;

            $('#add-section').click(function() {
                var newSection = `
                    <div class="custom-section" data-index="${sectionIndex}">
                        <h2>區域 ${sectionIndex + 1}</h2>
                        <input type="checkbox" name="custom_sections[${sectionIndex}][enabled]" value="1" />
                        <label for="enabled">啟用自訂內容</label>

                        <select class="custom-select2" name="custom_sections[${sectionIndex}][products][]" multiple="multiple" style="width: 100%;">
                            <?php foreach ($products as $product): ?>
                                <option value="<?php echo $product->ID; ?>">
                                    <?php echo $product->post_title; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>

                        <textarea name="custom_sections[${sectionIndex}][content]" rows="10" cols="50" style="width: 100%;"></textarea>

                        <input type="datetime-local" name="custom_sections[${sectionIndex}][start_time]" style="width: 100%;" />
                        <input type="datetime-local" name="custom_sections[${sectionIndex}][end_time]" style="width: 100%;" />

                        <button type="button" class="remove-section button">移除區域</button>
                    </div>
                `;
                $('#custom-sections').append(newSection);
                initSelect2(); // 初始化新加入的下拉選單
                sectionIndex++;
            });

            $(document).on('click', '.remove-section', function() {
                $(this).closest('.custom-section').remove();
            });
        });
    </script>
    <?php
}

// 註冊設置
add_action('admin_init', 'custom_product_settings_init');

function custom_product_settings_init() {
    register_setting('custom_product_settings', 'custom_sections');
}

// 在產品標題和售價之間顯示自訂內容
add_action('woocommerce_single_product_summary', 'display_custom_html_between_title_and_price', 6);

function display_custom_html_between_title_and_price() {
    global $product;
    $current_time = current_time('Y-m-d\TH:i');
    $custom_sections = get_option('custom_sections', []);

    foreach ($custom_sections as $section) {
        if ($section['enabled'] && in_array($product->get_id(), $section['products'])) {
            if ((!$section['start_time'] || $current_time >= $section['start_time']) && (!$section['end_time'] || $current_time <= $section['end_time'])) {
                echo '<div class="custom-html-content" style="text-align: center; margin: 10px 0;">';
                echo wp_kses_post($section['content']);
                echo '</div>';
            }
        }
    }
}

// 加載 Select2 的 CSS 和 JavaScript
add_action('admin_enqueue_scripts', 'load_select2_assets');

function load_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', ['jquery'], null, true);
}

通過這樣的設置，您可以輕鬆地在 WooCommerce 產品頁面中添加多個商品宣傳副標，並根據需要對其進行管理和調整。最重要的是，這個功能支持批量管理，讓您能夠在短時間內完成大量商品的設置工作。這不僅可以增強產品展示的效果，還能幫助您更有效地推廣產品和促銷活動。