Skip to main content

[Thủ Thuật WordPress] Tạo yêu cầu kèm theo khi mua sản phẩm trong WordPress

Đối với website bán hàng, ví dụ như hàng điện tử – điện lạnh thì việc có nhân viên kỹ thuật đi cùng khi giao hàng là rất cần thiết để tránh những rủi ro phát sinh trong quá trình vận chuyển cũng như giải quyết các vấn đề phát sinh. 

Do đó, để tạon checkbox yêu cầu kèm theo khi mua sản phẩm trong WordPress như hình thì bạn có thể xem hướng dẫn bên dưới

Image
Tạo yêu cầu kèm theo khi mua sản phẩm trong WordPress
 

Bước 1: Tạo checkbox yêu cầu kèm theo khi đặt hàng

Đầu tiên chúng ta tạo một checkbox yêu cầu kèm theo như hình trên với code HTML đơn giản bên dưới.

Copy và paste đoạn code dưới vào functions.php của theme

add_action( 'woocommerce_before_add_to_cart_button', 'misha_before_add_to_cart_btn' );

function misha_before_add_to_cart_btn(){
	echo 
        '<div><input type="checkbox" id="yeucau" name="yeucau" value="HỖ TRỢ LẮP ĐẶT VÀ HƯỚNG DẪN SỬ DỤNG">
            <label for="yeucau">Yêu cầu nhân viên kỹ thuật giao hàng: hỗ trợ lắp đặt và hướng dẫn sử dụng sản phẩm.
        </label></div>';
}

Ở đâu hiển thị trước Add to cart button, bạn có thể thay đổi vị trí tùy thích bằng các hook của WordPress. 

Xem thêm: Danh sách các hook trong woocommerce

Bước 2: Lưu data vào trang giỏ hàng

Để có thể lưu data vào trang giỏ hàng, chúng ta sẽ thêm tiếp đoạn code sau:

function add_hotro_to_cart_item($cart_item_data, $product_id, $variation_id)
{
  $hotro = filter_input(INPUT_POST, 'yeucau');
  if (empty($hotro)) {
    return $cart_item_data;
  }
  $cart_item_data['yeucau'] = $hotro;
  return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'add_hotro_to_cart_item', 10, 3);

Sau khi lưu thì chúng ta sẽ cho hiển thị bằng functions

Image
Tạo yêu cầu kèm theo khi mua sản phẩm trong WordPress
function display_hotro_into_cart($item_data, $cart_item)
{
  if (empty($cart_item['yeucau'])) {
    return $item_data;
  }
  $item_data[] = array(

    'key' => 'Yêu cầu hỗ trợ',
    'value' => wc_clean($cart_item['yeucau']),
    'display' => '',
  );
  return $item_data;
}
add_filter('woocommerce_get_item_data', 'display_hotro_into_cart', 10, 2);

Lúc hiển thị sẽ trông như thế này

 

Bước 3: Hiển thị yêu cầu hỗ trợ trong checkout, trang quản trị

Để hiển thị trong checkout và trang admin bạn sử dụng hook woocommerce_checkout_create_order_line_item như sau:

function add_hotro_to_order_items($item, $cart_item_key, $values, $order)
{
  if (empty($values['yeucau'])) {
    return;
  }
  $item->add_meta_data('Yêu cầu hỗ trợ', $values['yeucau']);
}
add_action('woocommerce_checkout_create_order_line_item', 'add_hotro_to_order_items', 10, 4);

Kết quả như sau

Image
Tạo yêu cầu kèm theo khi mua sản phẩm trong WordPress

Vậy là xong, thử load lại trang sản phẩm