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.

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:

Những bài viếttương tự

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

1.8k

[Hướng dẫn] Renew SSL Let’s Encrypt trên CentminMod

3k

[WordPress] Cấu hình mặc định WordPress gửi từ 1 email

2.4k

[WordPress] Cấu hình OneSignal theo Intelligent delivery

1.6k

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:

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:

/**
 * Add Remove button to WooCommerce checkout page - cart items  
 */ 

add_filter('woocommerce_cart_item_name', 'gafaba_filter_wc_cart_item_remove_link', 10, 3);

function gafaba_filter_wc_cart_item_remove_link($product_name, $cart_item, $cart_item_key)
{
  
    if (is_checkout()) {

        $product_name .= apply_filters('woocommerce_cart_item_remove_link', sprintf(
            '<a href="%s" rel="nofollow" class="remove-icon" style="float:left;">x</a>',
            esc_url(WC_Cart::get_remove_url($cart_item_key)),
            __('Remove this item', 'woocommerce'),
            esc_attr($cart_item['product_id']),
            esc_attr($cart_item['data']->get_sku())
        ), $cart_item_key);

        return $product_name;
    }

}

Để 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;
}