勾选Woocommerce中的复选框时显示/隐藏其他结帐字段-Java 学习之路

我的WooCommerce商店有2种不同的产品 .

在结帐页面，如果客户购买普通产品，他只填写正常的结算字段 .

但是，如果该客户购买第二个产品，则客户必须勾选一个复选框，该复选框将显示为附加字段 .

任何人都可以帮我解决这个问题？

1 回答

您必须在功能中设置您的2产品IDS并为您的自定义结帐字段输入正确的文本 . 当两个产品都在购物车中时，下面的代码将有条件地显示一个复选框 . 当客户勾选复选框时，将显示另一个文本字段：

// Add  fields to the checkout
add_action( 'woocommerce_after_order_notes', 'custom_checkout_fields' );
function custom_checkout_fields( $checkout ) {

    // Set HERE below your different product IDs
    $product_1_id = 37; // Normal product
    $product_2_id = 67; // Specific product (second product)
    $has_id_1 = $has_id_2 = false;

    // Check if products are in cart
    foreach( WC()->cart->get_cart() as $cart_item ){
        if( $cart_item['product_id'] == $product_1_id ) $has_id_1 = true;
        if( $cart_item['product_id'] == $product_2_id ) $has_id_2 = true;
    }

    // Display conditionally Custom checkout Fields (when both products are in cart)
    if( $has_id_1 && $has_id_2 ){

        echo '<div id="custom_checkout_fields">';

        // The Check box
        woocommerce_form_field( 'my_checkbox', array(
            'type'          => 'checkbox',
            'class'         => array('my-field-class form-row-wide'),
            'label'         => __('Fill in this field'),
            'placeholder'   => __('Enter something'),
            ), $checkout->get_value( 'my_checkbox' ));

        // The hidden field
        woocommerce_form_field( 'my_text_field', array(
            'type'          => 'text',
            'class'         => array('my-field-class form-row-wide'),
            'label'         => __('Fill in this field'),
            'placeholder'   => __('Enter something'),
            ), $checkout->get_value( 'my_text_field' ));

        echo '</div>';

        $required = esc_attr__( 'required', 'woocommerce' );

        // The jQuery Script
        ?>
        <script>
            jQuery(function($){
                // Initialising variables
                var textField = 'p#my_text_field_field',
                    checkboxField = 'input[name^="my_checkbox"]',
                    required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

                // Initialising at start (Hidding the text field)
                $(textField).hide(function(){
                    $(this).removeClass("validate-required");
                    $(this).removeClass("woocommerce-validated");
                    $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                    if( $(textField+' > label > abbr').html() != undefined )
                        $(textField+' label > .required').remove();
                });

                // When Checkbox is checked / unchecked (Live event)
                $( checkboxField ).click( function() {
                    if( $(this).prop('checked') == true )
                        $(textField).show(function(){
                            $(this).addClass("validate-required");
                            $(this).removeClass("woocommerce-validated");
                            $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                            if( $(textField+' > label > abbr').html() == undefined )
                                $(textField+' label').append(required);
                        });
                    else
                        $(textField).hide(function(){
                            $(this).removeClass("validate-required");
                            $(this).removeClass("woocommerce-validated");
                            $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                            if( $(textField+' > label > abbr').html() != undefined )
                                $(textField+' label > .required').remove();
                        });
                });
            });
        </script>
        <?php

    }
}

// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_text_field'] ) ) {
        update_post_meta( $order_id, __('My Field'), sanitize_text_field( $_POST['my_text_field'] ) );
    }
}

代码位于活动子主题的function.php文件中（活动主题或任何插件文件） .

在WooCommerce中测试和工作3

相关官方开发人员文档：Customizing checkout fields using actions and filters

回复于 2024-04-26T03:48:24+08:00

勾选Woocommerce中的复选框时显示/隐藏其他结帐字段

1 回答

相关问题