Tích hợp mã QR ngân hàng cho WooCommerce

Tích hợp mã QR ngân hàng cho WooCommerce một cách đơn giản, không cần dùng plugin.

Trong bài viết cách đây khá lâu, tôi đã từng hướng dẫn cho các bạn cách tích hợp thanh toán quét mã QR cho WooCommerce rồi phải không nào? Tuy nhiên, nhược điểm của phương pháp đó là chỉ hỗ trợ mã QR của các ví điện tử chứ không hỗ trợ mã QR của ngân hàng. Hơn nữa, chúng cần được tích hợp thông qua một plugin đã bị ngừng phát triển từ năm 2022. Nếu bạn đơn giản chỉ là muốn hiển thị mã QR ngân hàng khi thanh toán và trong email đơn hàng thì bài viết này là dành cho bạn. Với chỉ một đoạn HTML đơn giản, bạn thậm chí còn không cần dùng tới plugin.

Tham khảo thêm:

• Đổi tên My Account trên menu khi không đăng nhập
• Redirect về trang cũ sau khi đăng nhập trong WooCommerce

Chuẩn bị và một số lưu ý

• Tạo sẵn các mã QR ngân hàng của bạn và upload chúng lên web, copy lấy link hình ảnh.
• Mã QR nên có hình vuông và kích thước lý tưởng khoảng 180 x 180 pixel.

Tích hợp mã QR ngân hàng cho WooCommerce

1. Truy cập WooCommerce => Cài đặt => Thanh toán => Thực hiện thanh toán ngoại tuyến => Chuyển khoản ngân hàng trực tiếp => kéo xuống và tìm khung Hướng dẫn. Copy và paste đoạn code sau đây vào trong:

<p>Quét một trong các mã QR dưới đây để thanh toán:</p>
<table style="width: 100%;border-collapse: collapse;margin-top: 15px;margin-bottom: 15px;border: none">
    <tbody>
        <tr>
            <td style="text-align: center;padding: 5px;vertical-align: top;border: none;width: 33.33%">
                <img src="link-ma-qr-ngan-hang-1" alt="ma-qr-ngan-hang-1" style="max-width: 100%;margin-left: auto;margin-right: auto;border: 1px solid #ccc;padding: 3px">
                <div style="font-size: 0.9em;margin-top: 5px">Ngân hàng 1</div>
            </td>
            <td style="text-align: center;padding: 5px;vertical-align: top;border: none;width: 33.33%">
                <img src="link-ma-qr-ngan-hang-2" alt="ma-qr-ngan-hang-2" style="max-width: 100%;margin-left: auto;margin-right: auto;border: 1px solid #ccc;padding: 3px">
                <div style="font-size: 0.9em;margin-top: 5px">Ngân hàng 2</div>
            </td>
            <td style="text-align: center;padding: 5px;vertical-align: top;border: none;width: 33.33%">
                <img src="link-ma-qr-ngan-hang-3" alt="ma-qr-ngan-hang-3" style="max-width: 100%;margin-left: auto;margin-right: auto;border: 1px solid #ccc;padding: 3px">
                <div style="font-size: 0.9em;margin-top: 5px">Ngân hàng 3</div>
            </td>
        </tr>
    </tbody>
</table>
<p>Hoặc chuyển khoản theo thông tin bên dưới:</p>

Nó sẽ trông như thế này:

Code bên trên áp dụng cho trường hợp có 3 mã QR và cả 3 nằm trên cùng 1 hàng. Tùy thuộc vào số lượng mã QR để điều chỉnh mã cho phù hợp. Nhớ thay link hình ảnh mã QR và tên ngân hàng bằng thông tin của bạn.

2. Ở mục Tài khoản, các bạn vẫn khai báo như bình thường:

3. Kết quả sẽ trông giống như thế này:

• Trong trang cảm ơn (thông báo đặt hàng thành công):

• Trong email đơn hàng:

Thật tuyệt vời phải không nào? Chúc các bạn thành công!

Bạn có đang tích hợp mã QR ngân hàng cho WooCommerce không? Bạn đã dùng cách nào để làm điều đó? Hãy chia sẻ với chúng tôi phương pháp của bạn thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)