WooCommerce: Hộp kiểm ẩn / hiện trường thanh toán tùy chỉnh

Làm thế nào để ẩn / hiện trường thanh toán với Woocommerce Đoạn mã này có thể thực sự hữu ích vì một số lý do. Khi bạn cần thực hiện tùy chỉnh nâng cao đối với thanh toán và các trường của nó, hy vọng bạn sẽ cảm thấy có ích.

Trong đoạn mã của ngày hôm nay, chúng tôi sẽ thêm một hộp kiểm mới và một trường “ẩn” mới – sau đó, nếu hộp kiểm được chọn, trường sẽ hiển thị, nếu không nó sẽ lại biến mất.

TRƯỚC: hộp kiểm thanh toán mới không được chọn – do đó trường mới hiển thị

SAU: hộp kiểm thanh toán mới được chọn – do đó trường mới biến mất

Đoạn mã PHP: Hộp kiểm để ẩn / hiện trường thanh toán tùy chỉnh

[code]

add_filter( ‘woocommerce_checkout_fields’ , ‘bbloomer_display_checkbox_and_new_checkout_field’ );

function bbloomer_display_checkbox_and_new_checkout_field( $fields ) {

$fields[‘billing’][‘checkbox_trigger’] = array(
‘type’ => ‘checkbox’,
‘label’ => __(‘Checkbox label’, ‘woocommerce’),
‘class’ => array(‘form-row-wide’),
‘clear’ => true
);

$fields[‘billing’][‘new_billing_field’] = array(
‘label’ => __(‘New Billing Field Label’, ‘woocommerce’),
‘placeholder’ => _x(‘New Billing Field Placeholder’, ‘placeholder’, ‘woocommerce’),
‘class’ => array(‘form-row-wide’),
‘clear’ => true
);

return $fields;

}

add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_conditionally_hide_show_new_field’, 9999 );

function bbloomer_conditionally_hide_show_new_field() {

wc_enqueue_js( ”
jQuery(‘input#checkbox_trigger’).change(function(){

if (! this.checked) {
// HIDE IF NOT CHECKED
jQuery(‘#new_billing_field_field’).fadeOut();
jQuery(‘#new_billing_field_field input’).val(”);
} else {
// SHOW IF CHECKED
jQuery(‘#new_billing_field_field’).fadeIn();
}

}).change();
“);

}

[/code]

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).