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.

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

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).

Dịch vụ thiết kế website chuyên nghiệp tại Web MTP

Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!

Website: https://webmtp.com/

Hotline: 0931 912 379

WooCommerce: Cập nhật Meta Người dùng sau khi Đơn hàng thành công

Viết bình luận





Mời bạn xem nhiều bài hấp dẫn khác

Phương pháp SEO tăng thứ hạng của website trên Google

Tìm hiểu phương pháp chọn từ khóa chuẩn SEO

Plugin giúp bảo mật website WordPress

Tăng trust website hiệu quả bằng 100 backlink chất lượng đến từ Google

Cách chăm sóc website hiệu quả

Cách tạo nút gọi trên website WordPress

Mời bạn đọc thêm

Phương pháp SEO tăng thứ hạng của website trên Google

Tìm hiểu phương pháp chọn từ khóa chuẩn SEO

Plugin giúp bảo mật website WordPress

Tăng trust website hiệu quả bằng 100 backlink chất lượng đến từ Google

Cách chăm sóc website hiệu quả

Cách tạo nút gọi trên website WordPress