Trong bài viết này Canh Deals sẽ hướng dẫn tích hợp mã  QR ngân hàng lên website bán hàng của bạn một cách dễ dàng và nhanh chóng. Nếu bạn chỉ cần hiển thị mã QR ngân hàng để khách hàng quét và chuyển khoản – trực tiếp trên trang thanh toán hoặc trong email xác nhận đơn hàng – thì bài viết này chính là dành cho bạn. Chỉ với vài dòng HTML đơn giản, bạn hoàn toàn có thể làm điều đó mà không cần dùng đến bất kỳ plugin nào.

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

Bước 1: Các bạn 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 là được:

<p class="p1">p&gt;Quét một trong các mã QR dưới đây để thanh toán:&lt;/p&gt;</p>
<p class="p1">&lt;table style="width: 100%;border-collapse: collapse;margin-top: 15px;margin-bottom: 15px;border: none"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;tbody&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;tr&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;td style="text-align: center;padding: 5px;vertical-align: top;border: none;width: 33.33%"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;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"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div style="font-size: 0.9em;margin-top: 5px"&gt;Ngân hàng 1&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;td style="text-align: center;padding: 5px;vertical-align: top;border: none;width: 33.33%"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;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"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div style="font-size: 0.9em;margin-top: 5px"&gt;Ngân hàng 2&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;td style="text-align: center;padding: 5px;vertical-align: top;border: none;width: 33.33%"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;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"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div style="font-size: 0.9em;margin-top: 5px"&gt;Ngân hàng 3&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/td&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/tr&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/tbody&gt;</p>
<p class="p1">&lt;/table&gt;</p>
<p class="p1">&lt;p&gt;Hoặc chuyển khoản theo thông tin bên dưới:&lt;/p&gt;</p>

Các mã 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.

Lưu ý: Thay lại đường dẫn ảnh cho phù hợp nha, chỗ img src=”link ảnh mã QR ngân hàng của bạn”

Khi dán xong nó sẽ như hình dưới:

Bước 2: Tại mục Tài khoản, các bạn vẫn khai báo như bình thường là được nha, như hình bên dưới.

Giờ xem kết quả

Bạn đã từng tích hợp mã QR ngân hàng vào WooCommerce chưa? Đừng ngần ngại chia sẻ cách làm của bạn trong comment bên dưới, để mọi người có thể tham khảo nhé.

Nếu bạn thấy bài viết hữu ích, đừng quên theo dõi blog để không bỏ lỡ những hướng dẫn mới nhất và hay nhất về WooCommerce và WordPress. Cảm ơn bạn đã đọc tới đây nha! 😊

Chúc bạn thực hiện thành công