1
我的WooCommerce商店有2種不同的產品。在勾選Woocommerce中的複選框時顯示/隱藏附加結賬區域
在結賬頁面,如果客戶購買正常產品,他只填寫正常的結算字段。
但是,如果此客戶購買第二個產品,則客戶必須勾選一個複選框,該複選框將顯示爲一個附加字段。
任何人都可以幫我解決這個問題嗎?
我的WooCommerce商店有2種不同的產品。在勾選Woocommerce中的複選框時顯示/隱藏附加結賬區域
在結賬頁面,如果客戶購買正常產品,他只填寫正常的結算字段。
但是,如果此客戶購買第二個產品,則客戶必須勾選一個複選框,該複選框將顯示爲一個附加字段。
任何人都可以幫我解決這個問題嗎?
您必須在功能中設置您的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
你不需要一個複選框所有,只是顯示的附加字段,如果相應的產品加入到購物車。添加其他產品時隱藏它。 –
我的意思是我使用wordpress和整合woocommerce經理產品和付款。當用戶在CHECK OUT頁面勾選複選框時,我想顯示額外的字段,如果用戶沒有勾選,則隱藏。 –
嘗試自己編寫代碼,然後我會幫助你,但至少有一個嘗試。 –