Bạn muốn tăng tỷ lệ chuyển đổi trên cửa hàng WooCommerce của mình? Hãy thêm nút Mua Ngay để khách hàng có thể mua sản phẩm nhanh chóng mà không cần qua giỏ hàng. Bài viết này hướng dẫn chi tiết cách thêm nút Mua Ngay vào WooCommerce bằng code đơn giản, giúp tối ưu trải nghiệm mua sắm và tăng doanh thu.

Tại Sao Nên Thêm Nút Mua Ngay?
- Tăng tỷ lệ chuyển đổi: Khách hàng có thể mua hàng ngay lập tức mà không cần qua nhiều bước.
- Tối ưu trải nghiệm người dùng: Giảm số lần nhấp chuột, giúp quá trình mua hàng trở nên nhanh chóng và thuận tiện.
- Phù hợp với sản phẩm đơn giản: Áp dụng tốt cho các sản phẩm không cần nhiều tùy chọn hoặc cấu hình.
Cách Thêm Nút Mua Ngay Vào WooCommerce
Dưới đây là các bước chi tiết để thêm nút Mua Ngay vào trang chi tiết sản phẩm WooCommerce.
Bước 1: Thêm Code Vào File functions.php
Mở file functions.php
của theme hoặc child theme và thêm đoạn code sau:
// Thêm nút Mua Ngay vào trang chi tiết sản phẩm
add_action('woocommerce_after_add_to_cart_button', 'add_buy_now_button');
function add_buy_now_button() {
echo '<button type="submit" name="buy_now" class="button buy_now_button" value="' . get_the_ID() . '">Mua Ngay</button>';
}
// Xử lý khi nhấn nút Mua Ngay
add_action('wp_loaded', 'handle_buy_now');
function handle_buy_now() {
if (isset($_REQUEST['buy_now'])) {
// Xóa giỏ hàng hiện tại (nếu có)
WC()->cart->empty_cart();
// Thêm sản phẩm vào giỏ hàng
$product_id = intval($_REQUEST['buy_now']);
WC()->cart->add_to_cart($product_id);
// Chuyển hướng đến trang thanh toán
wp_redirect(wc_get_checkout_url());
exit;
}
}
Bước 2: Thêm CSS Để Tùy Chỉnh Giao Diện Nút
Thêm CSS vào file style.css
của theme để tùy chỉnh giao diện nút Mua Ngay.
.buy_now_button {
background-color: #ff5722; /* Màu nền */
color: #fff; /* Màu chữ */
padding: 10px 20px; /* Kích thước nút */
margin-left: 10px; /* Khoảng cách với nút Thêm vào giỏ hàng */
border: none; /* Loại bỏ viền */
cursor: pointer; /* Hiệu ứng con trỏ */
font-size: 16px; /* Cỡ chữ */
transition: background-color 0.3s ease; /* Hiệu ứng hover */
}
.buy_now_button:hover {
background-color: #e64a19; /* Màu nền khi hover */
}
Lưu ý khi sử dụng
- Kiểm tra tính tương thích: Đảm bảo code không xung đột với các plugin hoặc theme khác.
- Thử nghiệm trên môi trường staging: Trước khi áp dụng lên website chính, hãy thử nghiệm trên môi trường staging để đảm bảo không có lỗi phát sinh.
- Tùy chỉnh phù hợp: Bạn có thể thay đổi màu sắc, vị trí hoặc văn bản của nút Mua Ngay để phù hợp với thiết kế website của mình.
Việc thêm nút Mua Ngay vào WooCommerce là một cách hiệu quả để tối ưu trải nghiệm mua sắm và tăng tỷ lệ chuyển đổi. Với hướng dẫn chi tiết và code mẫu trên, bạn có thể dễ dàng triển khai tính năng này trên website của mình. Hãy bắt đầu ngay hôm nay và tận hưởng sự khác biệt trong doanh số bán hàng!
Nếu bạn cần hỗ trợ thêm hoặc có câu hỏi, hãy để lại bình luận bên dưới. Chúc bạn thành công! 🚀