Question

我是此编码知识的新手，我现在研究了许多站点，并尝试在Woocommerce中建立自己的结帐字段。它应该是一个签出字段，选中该字段时，会弹出一些信息或警告，它可以正常显示在签出页面上，但是我的脚本不起作用。

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );
function add_custom_checkout_fields( $fields ) {
    $fields['billing']['checkbox_trigger'] = array(
        'type'      => 'checkbox',
        'label'     => __('You dont live in Germany?', 'woocommerce'),
        'class'     => array('form-row-wide'),
        'clear'     => true
    );
    return $fields;
}

add_action( 'woocommerce_after_checkout_billing_form', 'echo_notice_billing' );
function echo_notice_billing() {
    echo '<div class="billing-notice woocommerce-info" style="display:none">It may take forever</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_notice_billing' );
function show_notice_billing(){ 
    ?>
        <script>
        jQuery(document).ready(function($){
            $('checkbox_trigger').change(function(){
                if(this.checked){
                    $('billing-notice').show();
                }
                else {
                    $('billing-notice').hide();
                }
            });
        });
    </script>
    <?php
}

Answer 1

您的jQuery脚本中有一些错误…尝试用此代替您的相关函数：

add_action( 'woocommerce_after_checkout_form', 'show_notice_billing' );
function show_notice_billing(){
    ?>
        <script>
        jQuery(function($){
            $('#checkbox_trigger').click(function(){
                if($(this).is(':checked') ){
                    $('.billing-notice').show();
                }
                else {
                    $('.billing-notice').hide();
                }
            });
        });
    </script>
    <?php
}

经过测试可以正常工作。

自定义复选框显示或隐藏Woocommerce结帐中的自定义通知

1 个答案: