Php 如何使 Wordpress Woocommerce 自定义输入字段成为必填字段

我已经编写了一些代码来显示产品页面上的 Select 输入，我现在的问题是，如果它是一个没有变化的简单产品，那么客户可以添加到购物车中，而无需从输入字段中进行 Select .尽管如此，我还是希望输入字段是必需的.

以下是我到目前为止所做的:

add_action('woocommerce_before_add_to_cart_button','wdm_add_custom_fields');
/**
 * Adds a custom field for Product
 * @return [type] [description]
 */
function wdm_add_custom_fields()
{

    global $product;

    ob_start();

    ?>
        <div class="wdm-custom-fields>
        <label for="fabric">Fabric:</label>

        <select id="id_select2_example" name="Fabric" style="width: 150px;">
                <option data-img_src="" value="">Choose a Fabric</option>

        <option data-img_src="http://localhost/shopneyah/wp-content/uploads/2022/08/19-organic-cotton-satin-fabric-1-250x250-1.webp" value="ash">Ash</option>
        
        <option data-img_src="http://localhost/shopneyah/wp-content/uploads/2022/08/superior-quality-poly-cotton-denim-blue-white-blue-plain-poly-cotton-fabric-close-up-fabric-photo.jpg" value="Light Blue">Light Blue</option>
        <option data-img_src="http://localhost/shopneyah/wp-content/uploads/2022/08/poly-cotton-fabric.jpg" value="Dark Blue">Dark Blue</option>
        <option data-img_src="http://localhost/shopneyah/wp-content/uploads/2022/08/images-2.jpg" value="light purple">Light Purple</option>
    </select>
    </div>
    
    <!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<script type="text/javascript">
    function custom_template(obj){
            var data = $(obj.element).data();
            var text = $(obj.element).text();
            if(data && data['img_src']){
                img_src = data['img_src'];
                template = $("<div><img src=\"" + img_src + "\" style=\"width:35%;height:200px;\"/><p style=\"font-weight: 700;font-size:14pt;text-align:left;\">" + text + "</p></div>");
                return template;
            }
        }
    var options = {
        'templateSelection': custom_template,
        'templateResult': custom_template,
    }
    $('#id_select2_example').select2(options);
    $('.select2-container--default .select2-selection--single').css({'height': '225px'});

</script>

    <?php

    $content = ob_get_contents();
    ob_end_flush();

    return $content;
}

add_filter( 'woocommerce_checkout_fields' , 'wdm_add_custom_fields' );

从上面的图像中，尚未 Select 布料输入，但可以单击添加到购物车，请在 Select 布料之前如何禁用它或停止它工作？谢谢.