WooCommerce站点中基于日期隐藏下拉选项的实现方案

我正在设计一个售卖杂志广告位的WooCommerce WordPress站点，需为每个产品添加起始日期属性，隐藏当前月份及下一个月份，防止用户购买后期望立即投放广告。已提取产品属性选择的示例HTML如下：

select { border-color: #F1F1F1; border-top-color: #DDD; border-left-color: #DDD; background-color: #F9F9F9; color: #515151; font: 12px Tahoma; padding: 8px; margin-bottom: 7px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
<table>
<tbody>
<tr>
<td class="label"><label for="advert-size">Advert Size</label></td>
<td class="value">
<select id="advert-size" class="" name="attribute_advert-size" data-attribute_name="attribute_advert-size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="Eighth page" class="attached enabled">Eighth page</option>
<option value="Quarter page (portrait)" class="attached enabled">Quarter page (portrait)</option>
<option value="Quarter page (landscape)" class="attached enabled">Quarter page (landscape)</option>
<option value="Half Page (portrait)" class="attached enabled">Half Page (portrait)</option>
<option value="Half page (landscape)" class="attached enabled">Half page (landscape)</option>
<option value="Full page (standard)" class="attached enabled">Full page (standard)</option>
<option value="Full page (premium)" class="attached enabled">Full page (premium)</option>
<option value="Front cover banner" class="attached enabled">Front cover banner</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="advert-period">Advert Period</label></td>
<td class="value">
<select id="advert-period" class="" name="attribute_advert-period" data-attribute_name="attribute_advert-period" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="1 month" class="attached enabled">1 month</option>
<option value="3 months (save 10%)" class="attached enabled">3 months (save 10%)</option>
<option value="6 months (save 15%)" class="attached enabled">6 months (save 15%)</option>
<option value="12 months (save 20%)" class="attached enabled">12 months (save 20%)</option></select>
</td>
</tr>
<tr>
<td class="label"><label for="start-month">Start month</label></td>
<td class="value">
<select id="start-month" class="" name="attribute_start-month" data-attribute_name="attribute_start-month" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="Jan" class="attached enabled">Jan</option>
<option value="Feb" class="attached enabled">Feb</option>
<option value="Mar" class="attached enabled">Mar</option>
<option value="Apr" class="attached enabled">Apr</option>
<option value="May" class="attached enabled">May</option>
<option value="Jun" class="attached enabled">Jun</option>
<option value="Jul" class="attached enabled">Jul</option>
<option value="Aug" class="attached enabled">Aug</option>
<option value="Sep" class="attached enabled">Sep</option>
<option value="Oct" class="attached enabled">Oct</option>
<option value="Nov" class="attached enabled">Nov</option>
<option value="Dec" class="attached enabled">Dec</option></select><a class="reset_variations" href="#" style="visibility: hidden;">Clear</a>
</td>
</tr>
</tbody>
</table>

请问使用JS或PHP实现该需求的最佳方式是什么？

针对你这个杂志广告位售卖的WooCommerce站点需求，我推荐两种靠谱的实现方式，分别是后端PHP控制和前端JS控制，各有适用场景，你可以根据自己的技术栈选择：

一、后端PHP实现（推荐） #

这种方式从根源上控制可选的月份选项，不会出现前端被篡改绕过的情况，安全性更高。我们可以利用WooCommerce的钩子来过滤start-month属性的选项：

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'hide_current_next_month_start_date', 10, 1 );
function hide_current_next_month_start_date( $args ) {
    // 只针对start-month属性生效
    if ( $args['attribute'] !== 'start-month' ) {
        return $args;
    }

    // 获取当前月份和下一个月份的缩写（比如Jan, Feb）
    $current_month = date('M');
    $next_month = date('M', strtotime('+1 month'));

    // 过滤选项，移除当前和下一个月份
    $filtered_options = array_filter( $args['options'], function( $option ) use ( $current_month, $next_month ) {
        return $option !== $current_month && $option !== $next_month;
    });

    // 更新选项数组
    $args['options'] = $filtered_options;

    return $args;
}

使用说明： #

• 将这段代码添加到你的WordPress主题的functions.php文件中，或者自定义插件里
• 代码会自动识别当前月份和下一个月份，从start-month的下拉选项中移除它们
• 注意：如果你的月份值不是三位缩写（比如用的是"January"而不是"Jan"），需要把date('M')改成date('F')来匹配

二、前端JavaScript实现 #

如果你不想修改后端代码，或者需要快速测试效果，可以用前端JS来隐藏/禁用当前和下一个月份的选项：

document.addEventListener('DOMContentLoaded', function() {
    const startMonthSelect = document.getElementById('start-month');
    if (!startMonthSelect) return;

    // 获取当前月份和下一个月份的缩写
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const now = new Date();
    const currentMonthIndex = now.getMonth();
    const currentMonth = monthNames[currentMonthIndex];
    // 处理跨年情况（比如12月的下一个月是1月）
    const nextMonthIndex = (currentMonthIndex + 1) % 12;
    const nextMonth = monthNames[nextMonthIndex];

    // 遍历选项，禁用并隐藏当前和下一个月份
    Array.from(startMonthSelect.options).forEach(option => {
        if (option.value === currentMonth || option.value === nextMonth) {
            option.disabled = true;
            option.style.display = 'none';
        }
    });

    // 如果默认选中的是被禁用的选项，重置为默认的"Choose an option"
    if (startMonthSelect.value === currentMonth || startMonthSelect.value === nextMonth) {
        startMonthSelect.value = '';
    }
});

使用说明： #

• 将这段代码添加到主题的footer.php文件中（放在</body>标签之前），或者通过WordPress的自定义JS功能添加
• 代码会在页面加载完成后自动处理start-month下拉框，禁用并隐藏当前和下一个月份的选项
• 同样，如果你的月份值是全称，需要把monthNames数组改成全称（比如"January", "February"等）

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