[Hướng Dẫn Toàn Tập] Hiển Thị Ảnh Sản Phẩm Trên Trang Thanh Toán WooCommerce

Trang thanh toán (checkout) là cửa ngõ cuối cùng quyết định khách hàng có hoàn tất đơn hàng hay không. Tuy nhiên, một điểm trừ mặc định của WooCommerce là chỉ hiển thị tên sản phẩm trong bảng tóm tắt đơn hàng. Điều này có thể tạo ra một chút do dự cho khách hàng, khiến họ phải tự hỏi: “Mình có chọn đúng sản phẩm không nhỉ?”.

[Hướng Dẫn Toàn Tập] Hiển Thị Ảnh Sản Phẩm Trên Trang Thanh Toán WooCommerce

Việc thêm hình ảnh sản phẩm vào trang thanh toán là một cải tiến nhỏ nhưng mang lại hiệu quả tâm lý lớn:

• Củng cố quyết định mua hàng: Khách hàng nhìn thấy hình ảnh sản phẩm mình đã chọn, giúp họ cảm thấy chắc chắn và tự tin hơn khi hoàn tất thanh toán.
• Tăng sự tin tưởng và chuyên nghiệp: Một trang thanh toán đầy đủ thông tin trực quan luôn tạo cảm giác tin cậy hơn, giống như các trang thương mại điện tử lớn.
• Giảm tỷ lệ bỏ giỏ hàng: Loại bỏ sự do dự không cần thiết, giúp quá trình thanh toán diễn ra suôn sẻ hơn.
• Cải thiện trải nghiệm người dùng: Giao diện trông thân thiện, đầy đủ và chuyên nghiệp hơn.

Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm ảnh sản phẩm vào trang thanh toán, từ phương pháp dùng code tối ưu cho đến giải pháp plugin tiện lợi cho người mới bắt đầu.

Phương pháp 1: Sử dụng Code trong functions.php (Tối ưu nhất)

Đây là phương pháp được khuyên dùng vì nó hiệu quả, nhẹ nhàng, không làm ảnh hưởng đến tốc độ tải trang và giúp bạn toàn quyền kiểm soát giao diện.

⚠️ Cảnh báo quan trọng:

1. Luôn sao lưu (backup) website của bạn trước khi thêm hoặc chỉnh sửa bất kỳ đoạn mã nào.
2. Sử dụng Theme con (Child Theme): Đây là điều bắt buộc. Nếu bạn thêm code trực tiếp vào tệp functions.php của theme gốc, mọi thay đổi sẽ bị xóa sạch khi theme được cập nhật.

Bước 1: Thêm mã PHP để hiển thị hình ảnh

Bạn cần truy cập vào tệp functions.php của child theme đang sử dụng.

• Cách 1: Vào Giao diện (Appearance) → Trình sửa file giao diện (Theme File Editor), chọn theme con của bạn và tìm đến tệp functions.php.
• Cách 2: Sử dụng một trình quản lý file trên hosting (ví dụ: cPanel) hoặc FTP để truy cập vào wp-content/themes/ten-child-theme/functions.php.

Dán đoạn mã PHP sau vào cuối tệp

/**
* Hiển thị ảnh thumbnail sản phẩm trên trang Giỏ hàng và Thanh toán WooCommerce.
*
* @param string $product_name Tên sản phẩm.
* @param array $cart_item Dữ liệu sản phẩm trong giỏ hàng.
* @param string $cart_item_key Key của sản phẩm trong giỏ hàng.
* @return string
* @link https://hoidapwp.com/
*/
add_filter( ‘woocommerce_cart_item_name’, ‘hoidapwp_product_image_on_checkout’, 99, 3 );

function hoidapwp_product_image_on_checkout( $product_name, $cart_item, $cart_item_key ) {
// Chỉ áp dụng trên trang giỏ hàng (cart) và trang thanh toán (checkout)
if ( ! is_cart() && ! is_checkout() ) {
return $product_name;
}

// Lấy dữ liệu của sản phẩm từ giỏ hàng
$_product = apply_filters( ‘woocommerce_cart_item_product’, $cart_item[‘data’], $cart_item, $cart_item_key );

// Lấy mã HTML của ảnh thumbnail với kích thước 64x64px
// Bạn có thể thay đổi kích thước này, ví dụ: array(’80’, ’80’)
$thumbnail = $_product->get_image( array( ’64’, ’64’ ), array( ‘class’ => ‘checkout-thumb’ ) );

// Gắn ảnh thumbnail vào trước tên sản phẩm và trả về kết quả
return $thumbnail . $product_name;
}

Giải thích code:

• add_filter(...): Đây là một “hook” của WordPress, cho phép chúng ta “gắn” hàm của mình vào một chức năng có sẵn của WooCommerce (woocommerce_cart_item_name) để thay đổi nó.
• if ( ! is_cart() && ! is_checkout() ): Lệnh này kiểm tra để đảm bảo code chỉ chạy trên trang giỏ hàng và trang thanh toán, không ảnh hưởng đến các khu vực khác.
• $_product->get_image(...): Hàm này của WooCommerce lấy ra hình ảnh đại diện của sản phẩm. Chúng ta chỉ định kích thước là 64x64 và thêm một class tên là checkout-thumb để tiện cho việc tùy chỉnh CSS ở bước sau.
• return $thumbnail . $product_name;: Dòng cuối cùng ghép chuỗi HTML của hình ảnh và tên sản phẩm lại với nhau.

Sau khi lưu tệp, hình ảnh sẽ xuất hiện nhưng có thể bị lệch và chưa đẹp. Đừng lo, chúng ta sẽ làm đẹp nó ở bước tiếp theo.

Bước 2: Thêm CSS để căn chỉnh giao diện

Để hình ảnh và tên sản phẩm hiển thị thẳng hàng, gọn gàng, bạn cần thêm một vài dòng CSS.

1. Trong khu vực quản trị WordPress, đi tới Giao diện (Appearance) → Tùy biến (Customize).
2. Chọn mục Additional CSS.
3. Dán đoạn mã sau vào:

Nhấn nút “Đăng” (Publish) để lưu lại CSS.

Bây giờ hãy tải lại trang thanh toán, bạn sẽ thấy kết quả hoàn hảo!

Phương pháp 2: Sử dụng Plugin (Dễ dàng, không cần code)

Nếu bạn không muốn động vào code, có những plugin giúp bạn làm điều này và hơn thế nữa. Một trong những plugin miễn phí và mạnh mẽ là CartFlows.

Mặc dù CartFlows là một công cụ tạo phễu bán hàng mạnh mẽ, nó cũng cho phép bạn tùy chỉnh trang thanh toán một cách dễ dàng, bao gồm cả việc hiển thị hình ảnh sản phẩm.

1. Cài đặt: Vào Plugins → Add New, tìm kiếm “CartFlows”, cài đặt và kích hoạt.
2. Tạo một Flow mới: Đi tới CartFlows → Flows → Add New. Chọn một mẫu trang thanh toán có sẵn.
3. Tùy chỉnh trang Checkout: Trong Flow vừa tạo, chọn bước Checkout. Tại đây, bạn có thể bật/tắt và tùy chỉnh các yếu tố, bao gồm cả việc hiển thị ảnh sản phẩm trong tóm tắt đơn hàng.

Ưu điểm của plugin:

• Trực quan, dễ sử dụng, không cần kiến thức về code.
• Cung cấp nhiều tùy chọn tùy chỉnh nâng cao khác cho trang thanh toán.

Nhược điểm:

• Cài thêm plugin có thể làm website nặng hơn một chút.
• Có thể không cần thiết nếu bạn chỉ muốn một thay đổi nhỏ là hiển thị hình ảnh.

Kết luận

Cho dù bạn chọn phương pháp nào, việc hiển thị hình ảnh sản phẩm trên trang thanh toán là một cải tiến đáng giá, giúp tăng cường sự tin tưởng của khách hàng và nâng cao tính chuyên nghiệp cho cửa hàng WooCommerce của bạn.

Với chỉ vài phút cài đặt, bạn đã có thể cải thiện đáng kể một trong những trang quan trọng nhất trên website của mình. Chúc bạn thành công!