Code thêm checkbox gói quà ở trang thanh toán trong WooCommerce

Bài viết này mình sẽ hướng dẫn bạn cách thêm checkbox gói quà ở trang thanh toán trong WooCommerce nhé.

Shop bán quà tặng mà khách muốn gói quà đẹp kèm thiệp thì thường phải nhắn riêng cho shop, vừa mất công vừa dễ sót đơn. WooCommerce mặc định không có tùy chọn gói quà ở trang thanh toán, muốn khách tự tick chọn và tự cộng phí gói quà vào đơn thì bạn phải code thêm nhé.

Thêm code checkbox gói quà

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
add_action('woocommerce_after_order_notes', 'nn_wc_checkbox_goi_qua');
function nn_wc_checkbox_goi_qua($checkout) {
    woocommerce_form_field('goi_qua', array(
        'type' => 'checkbox',
        'class' => array('form-row-wide'),
        'label' => 'Gói quà tặng kèm thiệp (+20.000₫)',
        'required' => false,
    ), $checkout->get_value('goi_qua'));
}

add_action('woocommerce_cart_calculate_fees', 'nn_wc_phi_goi_qua', 20);
function nn_wc_phi_goi_qua($cart) {
    if (is_admin() && !defined('DOING_AJAX')) {
        return;
    }
    $du_lieu = array();
    if (isset($_POST['post_data'])) {
        parse_str(wp_unslash($_POST['post_data']), $du_lieu);
    } elseif (isset($_POST['goi_qua'])) {
        $du_lieu = $_POST;
    }
    if (!empty($du_lieu['goi_qua'])) {
        $cart->add_fee('Phí gói quà', 20000);
    }
}

add_action('woocommerce_checkout_create_order', 'nn_wc_luu_goi_qua', 10, 2);
function nn_wc_luu_goi_qua($order, $data) {
    if (!empty($data['goi_qua'])) {
        $order->update_meta_data('_goi_qua', 'yes');
        $order->add_order_note('Khách yêu cầu gói quà (+20.000₫).');
    }
}

Code trên có ba phần. Phần đầu móc vào hook woocommerce_after_order_notes để thêm một checkbox Gói quà tặng kèm thiệp (+20.000₫) ngay dưới phần ghi chú đơn hàng ở trang thanh toán, dùng hàm woocommerce_form_field() có sẵn của WooCommerce nên checkbox hiện đúng kiểu form của theme. Phần giữa móc vào woocommerce_cart_calculate_fees: mỗi khi khách tick hoặc bỏ tick, WooCommerce tự gọi AJAX cập nhật đơn hàng, code đọc trạng thái checkbox trong dữ liệu gửi lên rồi cộng phí 20.000₫ vào tổng tiền bằng add_fee(), bỏ tick thì phí tự biến mất. Phần cuối móc vào woocommerce_checkout_create_order để lưu lựa chọn gói quà vào đơn hàng và ghi thêm một ghi chú trong đơn, nhân viên đóng gói nhìn vào là biết đơn nào cần gói quà.

Kiểm tra ở trang thanh toán

Bạn mở trang thanh toán, kéo xuống dưới phần ghi chú đơn hàng sẽ thấy checkbox gói quà. Tick vào thì tổng tiền tự cộng thêm dòng “Phí gói quà 20.000₫”, bỏ tick thì dòng phí biến mất. Đặt thử một đơn có tick gói quà rồi vào trang quản trị đơn hàng, bạn sẽ thấy ghi chú “Khách yêu cầu gói quà (+20.000₫).” trong phần ghi chú của đơn.

Lưu ý khi dùng

Code này chỉ chạy với trang thanh toán dạng shortcode cổ điển ([woocommerce_checkout]), nếu shop bạn đang dùng Checkout block mới của WooCommerce thì checkbox sẽ không hiện, bạn cần chuyển trang thanh toán về dạng shortcode mới dùng được. Muốn đổi phí gói quà thì bạn sửa cả số 20000 trong hàm tính phí và dòng chữ trong nhãn checkbox cho khớp nhau. Phí này mặc định không tính thuế, nếu shop bạn cần tính thuế cho phí gói quà thì thêm tham số thuế vào hàm add_fee().

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm checkbox gói quà ở trang thanh toán trong WooCommerce rồi nhé. Tính năng này đi chung với bài code thêm đếm ngược khuyến mãi cho sản phẩm trong WooCommerce và bài code đặt số lượng mua tối thiểu cho sản phẩm trong WooCommerce là thành combo bán hàng theo mùa và dịp lễ khá tốt cho shop.

Nếu cần mình kèm 1-1 về WooCommerce thì cứ liên hệ mình nhé.