• About
  • Advertise
  • Privacy & Policy
  • Contact
MyComputer.vn: Thông tin công nghệ, thủ thuật, tư vấn về điện thoại, máy tính, camera, đồ điện gia dụng và âm thanh, khoa học kĩ thuật.
  • PC & Mobile
    • Windows
    • Mac
    • Android
    • iPhone & iPad
    • Internet
    • Bảo mật
    • Miễn Phí
      • Phần mềm bản quyền miễn phí
      • Khóa học Online
  • My Computer
    • Tin tức
    • Office
    • Sáng tạo
  • Hardware
    • Giải thích công nghệ
    • Tư vấn Công Nghệ
    • Đánh giá sản phẩm
  • DEV Tuts
  • Shop
No Result
View All Result
MyComputer.vn
  • PC & Mobile
    • Windows
    • Mac
    • Android
    • iPhone & iPad
    • Internet
    • Bảo mật
    • Miễn Phí
      • Phần mềm bản quyền miễn phí
      • Khóa học Online
  • My Computer
    • Tin tức
    • Office
    • Sáng tạo
  • Hardware
    • Giải thích công nghệ
    • Tư vấn Công Nghệ
    • Đánh giá sản phẩm
  • DEV Tuts
  • Shop
No Result
View All Result
MyComputer.vn
No Result
View All Result
Home DEV Tuts

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

MyComputer bởi MyComputer
19/02/2022
Thời gian đọc: 2 phút
A A
0
xoa checkout woocommece
Theo dõi MyComputer trên

Chia sẻ lên FacebookChia sẻ lên TwitterChia sẻ lên TelegramChia sẻ lên Linkedin

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)

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

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

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

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

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

1.6k
[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

[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:

add remove icon or button to woocommerce checkout page
Cách thêm biểu tượng loại bỏ (xóa) sản phẩm trong trang thanh toán WooCommerce (Ảnh 3 - Source: Google Image)

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.

Tags: Web Developmentwordpress
Đăng ký nhận bản tin
MyComputer

MyComputer

Thích là nhích...

Bài cùng DANH MỤC

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

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

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

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

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

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

1.6k
[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
DEV Tuts

[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
Bài kế tiếp
[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

[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

Theo dõi
Thông báo của
guest

guest

0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
Đăng ký nhận bản tin qua Email Đăng ký nhận bản tin qua Email Đăng ký nhận bản tin qua Email

TOP TRENDING

  • Các lỗi & mã lỗi SADP tool thường gặp (SADP Error Codes)

    Các lỗi & mã lỗi SADP tool thường gặp (SADP Error Codes)

    1223 lượt chia sẻ
    Chia sẻ 489 Tweet 306
  • 10 cách giúp Chrome sử dụng ít dung lượng ổ đĩa hơn

    829 lượt chia sẻ
    Chia sẻ 331 Tweet 207
  • Hướng dẫn sử dụng “DDU driver” – thao tác tất cả người dùng AMD Radeon nên biết, khắc phục 90% các lỗi

    452 lượt chia sẻ
    Chia sẻ 180 Tweet 113
  • [Đánh giá] Ram APACER NOX RGB White 2x8GB 3600MHz – Hiệu suất tốt, khả năng ép xung mạnh mẽ và ĐẸP

    17 lượt chia sẻ
    Chia sẻ 578 Tweet 361
  • [Hướng dẫn sử dụng] Các phím funtion (fn) trên bàn phím cơ IQUNIX

    537 lượt chia sẻ
    Chia sẻ 214 Tweet 134

TOP SÔI ĐỘNG

    MyComputer.vn

    © 2019 MyComputer.vn

    Bảo lưu mọi quyền

    • About
    • Advertise
    • Privacy & Policy
    • Contact

    Follow me

    No Result
    View All Result
    • PC & Mobile
      • Windows
      • Mac
      • Android
      • iPhone & iPad
      • Internet
      • Bảo mật
      • Miễn Phí
        • Phần mềm bản quyền miễn phí
        • Khóa học Online
    • My Computer
      • Tin tức
      • Office
      • Sáng tạo
    • Hardware
      • Giải thích công nghệ
      • Tư vấn Công Nghệ
      • Đánh giá sản phẩm
    • DEV Tuts
    • Shop

    © 2019 MyComputer.vn