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

冬季苹果

在这种编码方面还很陌生,我现在研究了许多站点,并尝试在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
}
LoicTheAztec

您的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
}

经过测试和工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

自定义复选框,在WooCommerce购物车页面中添加费用

在bootstrap-multiselect中显示“全选”复选框,并自定义“未选中”文本

自定义Android复选框

自定义Bootstrap复选框

在WooCommerce结帐中添加一个自定义复选框,该值以管理员编辑顺序显示

Woocommerce中管理员编辑产品的复选框自定义字段

在Woocommerce结帐页面中的所有默认通知之前显示自定义通知

Swift 3中的自定义复选框

产品设置中的“自定义”复选框,选中后会显示一个自定义字段

Bootstrap 4自定义复选框未显示

如何在CSS的自定义复选框中更改复选框的颜色?

基于Woocommerce产品变体库存数据的自定义显示复选框

购物车页面Woocommerce中的自定义“条款和条件”接受复选框

如何删除自定义复选框中的勾号?

复选框字段,用于在WooCommerce中添加/删除自定义费用

在管理面板中向woocommerce quickedit添加自定义复选框

在结帐和我在WooCommerce中的帐户之间同步新闻稿自定义复选框

根据自定义“ woocommerce_variation_option”将复选框添加到WooCommerce结帐页面

无法保存WooCommerce结帐的自定义复选框值

反应:自定义复选框以显示/隐藏表的列

向WooCommerce产品变体选项中添加自定义复选框

如何从WooCommerce结帐保存自定义复选框字段状态?

在WooCommerce Thankyou页面上显示自定义复选框字段状态

隐藏自定义结帐字段,使其不显示在WooCommerce我的帐户编辑地址中

自定义复选框问题

WordPress中的高级自定义字段复选框

获取自定义复选框以正确显示

在 Woocommerce 的前端显示自定义单选和复选框产品设置数据

在 React 中制作自定义复选框