在勾选Woocommerce中的复选框时显示/隐藏附加结账区域

问题描述：

我的WooCommerce商店有2种不同的产品。在勾选Woocommerce中的复选框时显示/隐藏附加结账区域

在结账页面，如果客户购买正常产品，他只填写正常的结算字段。

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

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

你不需要一个复选框所有，只是显示的附加字段，如果相应的产品加入到购物车。添加其他产品时隐藏它。 –

我的意思是我使用wordpress和整合woocommerce经理产品和付款。当用户在CHECK OUT页面勾选复选框时，我想显示额外的字段，如果用户没有勾选，则隐藏。 –

尝试自己编写代码，然后我会帮助你，但至少有一个尝试。 –

答

您必须在功能中设置您的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

在勾选Woocommerce中的复选框时显示/隐藏附加结账区域

相关推荐