Cách thêm biểu tượng loại bỏ (xóa) sản phẩm trong trang thanh toán WooCommerce

Trong phần tóm tắt đơn đặt hàng của trang thanh toán, điều quan trọng là cho phép người dùng xóa sản phẩm đã được thêm vào giỏ hàng nhưng họ không muốn tiếp tục thanh toán với sản phẩm. Để thêm biểu tượng xóa vào trang thanh toán WooCommerce (trang checkout WooCommerce), bạn cần thêm bộ lọc sẽ thêm biểu tượng vào phía trước sản phẩm trên bản tóm tắt đơn hàng.

Nút xóa này cho phép người dùng xóa từng sản phẩm khỏi các được thêm vào giỏ hàng, Biểu tượng loại bỏ này theo mặc định được tìm thấy trên trang giỏ hàng nhưng trong hầu hết các themes WooCommerce, nhưng nó không xuất hiện tại các trang thanh toán (trang checkout) của WooCommerce.

Những chủ đềnên tham khảo

WooCommerce: Tự động mở rộng chỗ nhập phiếu giảm giá trên trang checkout (thanh toán)

1.6k

Hướng dẫn cách tạo thanh toán PayPal bằng VNĐ trên WooCommerce

1.8k

Cách dễ dàng để nhúng (embed) Gist vào các bài đăng trên WordPress

1.5k

[Hướng dẫn] Rebake all posts Discourse? Rebake các bài viết trên Discourse sau khi cấu hình lại CDN

1.5k

Và hôm nay mình sẽ hướng dẫn các bạn cách thêm nút xóa hay nút loại bỏ sản phẩm trong trang thanh toán hay trang checkout như hình:

Nếu nút loại bỏ sản phẩm này bị thiếu trong trang thanh toán của bạn và bạn muốn thêm nó vào phần tóm tắt đơn hàng như được hiển thị trên hình ảnh ở trên, thì sau đây là các bước bạn nên thực hiện:

1. Mở tệp functions.php của theme đang hoạt động của bạn nhưng tốt hơn là child theme của bạn. Bạn có thể truy cập các tệp chủ đề thông qua bảng điều khiển WordPress hoặc qua CPanel hoặc FTP.
2. Thêm đoạn mã này vào tệp functions.php và lưu các thay đổi:

Để tạo kiểu cho biểu tượng chữ X đỏ, bạn có thể sử dụng CSS như tôi đã sử dụng trong ví dụ trên.

.remove-icon {
    padding: 5px;
    padding-top: 0; 
    color: red;
    font-size: 16px;
    font-weight: bold;
}

Chúc các bạn thành công.