Để đơn giản hóa quá trình mua hàng và thanh toán, 1 số website hiện tại mình thấy bước tạo đơn hàng vô cùng đơn giản chỉ với 1 thao tác là khi mình đang đứng ở trang chi tiết sản phẩm là có thể nhập thông tin đặt hàng và tạo được đơn hàng luôn mà không cần phải đi qua quá nhiều bước (Chi tiết sản phẩm -> Thêm giỏ hàng -> Cập nhật giỏ hàng -> Cập nhật thông tin thanh toán -> Tạo đơn). Việc này vô cùng quan trọng khi giúp cho khách hàng dễ dàng mua hàng và tạo nên nhiều đơn hàng hơn cho chủ shop :).
Trong bài này mình sẽ demo 1 số bước trên Woocommerce và 1 số custom code hổ trợ mình làm việc đó. Ở bài viết này mình sử dụng theme Woocommerce sẵn có Flatsome (theme về ecommerce phổ biến dành cho WordPress hiện tại)
- Đầu tiền Woocommerce có cung cấp sẵn 1 số hooks để mình thêm form nhập thông tin đặt hàng ở chi tiết sản phẩm
add_action('woocommerce_after_add_to_cart_quantity', 'woocommerce_after_add_to_cart_quantity_add_new_shipping_form_func'); function woocommerce_after_add_to_cart_quantity_add_new_shipping_form_func() { echo <<<HTML <div class="cart-form__shipping"> <h3>Thông tin giao hàng</h3> <input name="fullname" type="text" required placeholder="Họ và tên"/> <input name="phone" type="text" required placeholder="Số điện thoại"/> <input name="address" type="text" required placeholder="Địa chỉ nhận hàng"/> </div> HTML; }Với việc tận dụng hook ‘woocommerce_after_add_to_cart_quantity’, thì mình đã thêm được 1 form “Thông tin giao hàng” mong muốn gồm các thông tin Họ và tên, Số điện thoại, địa chỉ nhận hàng (các bạn có thêm thêm 1 số trường khác nếu có nhu cầu hơn).
- Thay vì thêm sản phẩm vào giỏ hàng bằng nút “Thêm vào giỏ hàng”, chúng ta sẽ dùng 1 thủ thuật là custom 1 hook để tạo đơn hàng luôn khi bấm vào nút “Thêm vào giỏ hàng”
add_filter('woocommerce_add_to_cart_redirect', 'redirect_to_checkout', 10, 2); function redirect_to_checkout($url) { if (isset($_POST['add-to-cart'])) { $customer_phone = $_POST['phone'] ?? ''; $customer_address = $_POST['address'] ?? ''; $customer_fname = $_POST['fullname'] ?? ''; $checkout_url = 'http://myshop.com/dat-hang-thanh-cong'; $address = array( 'first_name' => $customer_fname, 'last_name' => '', 'company' => '', 'phone' => $customer_phone, 'address_1' => $customer_address, 'address_2' => '', 'city' => '', 'state' => '', 'postcode' => '', 'country' => '' ); $order = wc_create_order(); // add products from cart to order $items = WC()->cart->get_cart(); foreach ($items as $item => $values) { $product_id = $values['product_id']; $product = wc_get_product($product_id); $var_id = $values['variation_id']; $quantity = (int)$values['quantity']; $variationsArray = array(); if ($var_id) { // Variant product $var_product = new WC_Product_Variation($var_id); $var_color = $values['variation']['attribute_pa_color']; $var_size = $values['variation']['attribute_pa_size']; $variationsArray['variation'] = array( 'pa_color' => $var_color, 'pa_size' => $var_size, ); } else { // Simple product $var_product = new WC_Product_Simple($product_id); } $order->add_product($var_product, $quantity, $variationsArray); } $order->set_address($address, 'billing'); $order->set_address($address, 'shipping'); $order->calculate_totals(); $order->update_status('processing'); WC()->cart->empty_cart(); } return $url; }Với việc tận dụng ‘woocommerce_add_to_cart_redirect’ hook, chúng ta đã có thể tạo được đơn hàng từ bước này (đơn hàng ở trạng thái đang xử lý) và sau khi đặt hàng xong điều hướng khách hàng tới đường dẫn http://myshop.com/dat-hang-thanh-cong do chúng ta tùy biến.
3. Để thay đổi nút “Thêm vào giỏ hàng” thành “Đặt hàng nhanh” cho đúng ý nghĩa, cần làm thêm 1 thao tác thêm 1 filter ‘woocommerce_product_add_to_cart_text’ như bên dưới
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_product_single_add_to_cart_text_func' ); functionwoocommerce_product_single_add_to_cart_text_func() { return 'Đặt hàng nhanh'; }Và kết quả cuối cùng là
Vậy là chỉ với một vài thao tác đơn giản là mình đã có thể tối ưu được quá trình lên đơn cho khách hàng. Ở trang chi tiết sản phẩm hoặc popup xem nhanh sản phẩm, người dùng đã có thể đặt được đơn hàng với chỉ cần nhập thông tin đơn hàng và bấm nút “Đặt hàng nhanh“ và đã có thể tạo được đơn hàng như mong muốn.
Happy coding 🙂
