WooCommerce: Hướng dẫn tùy chỉnh đường dẫn “Add to Cart”

Tùy chỉnh đường dẫn “Add to Cart” trong WooCommerce. Dưới đây là cách tạo các liên kết / nút “Add to Cart” (Thêm vào giỏ hàng) bằng việc tùy chỉnh HTML và làm cho chúng thêm một hoặc nhiều sản phẩm vào giỏ hàng và chuyển hướng đến các trang web cụ thể.

Nhiều người đã hỏi đi hỏi lại những câu hỏi giống nhau, ví dụ: “Có thể thêm nhiều hơn 1 sản phẩm vào Giỏ hàng không?” (mà câu trả lời là “không”, trừ khi bạn tạo được nhóm Sản phẩm).

Với hướng dẫn này, việc đặt nút Thêm vào giỏ hàng trên các trang đích tùy chỉnh, bảng giá, bài đăng trên blog, v.v. dễ dàng hơn nhiều. Thưởng thức!

Sau đây là những hướng dẫn liên quan đến “Add to Cart” trong WooCommerce.

1) Sản phẩm đơn giản: Thêm vào URL đường dẫn giỏ hàng.

Dễ dàng nhất trong số đó, các sản phẩm đơn giản rất dễ thêm vào giỏ hàng qua URL tùy chỉnh. Chỉ cần tìm ID sản phẩm bằng cách di chuột vào tiêu đề sản phẩm trong WooCommerce> Sản phẩm (xem hình ảnh bên dưới), sau đó sử dụng các liên kết sau.

URL: Thêm một sản phẩm đơn giản vào giỏ hàng.

https://yourdomain.com/?add-to-cart=25

Bây giờ, hãy đảm bảo thay đổi tên miền trong liên kết và nút sẽ hoạt động ngay lập tức. 1 sản phẩm có ID = 25 sẽ được thêm vào giỏ hàng.

URL: Thêm một sản phẩm đơn giản vào giỏ hàng với số lượng = 3

https://yourdomain.com/?add-to-cart=25&quantity=3

1 sản phẩm có ID = 25 và số lượng = 3 sẽ được thêm vào giỏ hàng. Lưu ý: bạn không thể thêm 2 sản phẩm khác nhau vào giỏ hàng bằng một URL.

URL: Thêm một sản phẩm đơn giản vào giỏ hàng và chuyển hướng đến giỏ hàng sau đó

https://yourdomain.com/cart/?add-to-cart=25

Hãy nhớ rằng, nếu bạn đã thay đổi URL cho giỏ hàng, hãy đảm bảo thay đổi “/ cart /” thành “/ basket /” chẳng hạn. Để điều này hoạt động, bạn cũng phải đánh dấu vào tùy chọn “Bật nút thêm AJAX vào giỏ hàng trên kho lưu trữ” trong WooCommerce -> Cài đặt -> Sản phẩm -> Chung.

URL: Thêm một sản phẩm đơn giản vào giỏ hàng & chuyển hướng đến thanh toán sau đó

https://yourdomain.com/checkout/?add-to-cart=25

Hãy nhớ rằng, để tính năng này hoạt động, bạn phải đánh dấu vào tùy chọn “Bật nút thêm AJAX vào giỏ hàng trên kho lưu trữ” trong WooCommerce -> Cài đặt -> Sản phẩm -> Chung và đồng thời tắt “Chuyển hướng đến trang giỏ hàng sau khi thêm thành công”:

URL: Thêm một sản phẩm đơn giản vào giỏ hàng và chuyển hướng đến trang bất kỳ sau đó

https://yourdomain.com/your_custom_page/?add-to-cart=25

Hãy nhớ, để tính năng này hoạt động, bạn phải đánh dấu vào tùy chọn “Bật nút thêm AJAX vào giỏ hàng trên kho lưu trữ” trong WooCommerce -> Cài đặt -> Sản phẩm -> Chung và đồng thời tắt “Chuyển hướng đến trang giỏ hàng sau khi thêm thành công”.

2) Sản phẩm có thể thay đổi: Thêm vào URL giỏ hàng

Ở đây, mọi thứ ban đầu phức tạp, nhưng giờ đây đã dễ dàng hơn nhiều! Tất cả những gì bạn cần là ID biến thể. Đây là nơi bạn có thể tìm thấy nó:

Khi bạn có ID biến thể, bạn có thể sử dụng những thứ sau.

URL: Add One Variable Product to Cart

https://yourdomain.com/?add-to-cart=88

Chúng tôi chỉ thêm vào đây ID biến thể (88) theo ảnh chụp màn hình ở trên. Rất đơn giản.

URL: Add One Variable Product to Cart (with Quantity = 3)

https://yourdomain.com/?add-to-cart=88&quantity=3

Bạn cũng có thể chuyển hướng đến Giỏ hàng, Thanh toán và một trang khác giống như cách chúng ta đã thấy đối với các sản phẩm đơn giản:

URL: Thêm một sản phẩm biến đổi vào giỏ hàng & chuyển hướng đến giỏ hàng

https://yourdomain.com/cart/?add-to-cart=88

URL: Thêm một sản phẩm biến đổi vào giỏ hàng & chuyển hướng đến thanh toán

https://yourdomain.com/checkout/?add-to-cart=88"

URL: Thêm một sản phẩm có thể thay đổi vào giỏ hàng và chuyển hướng đến bất kỳ trang nào

3) Sản phẩm được nhóm: Thêm vào URL giỏ hàng

Gần đây tôi đã làm việc với Sản phẩm được nhóm và nhiệm vụ của tôi là thêm nó vào giỏ hàng qua URL tùy chỉnh. Sản phẩm được nhóm lại là sự kết hợp của hai hoặc nhiều sản phẩm phụ và mỗi sản phẩm có thể được thêm vào giỏ hàng với số lượng tùy chỉnh.

Vì vậy, đây là các liên kết tùy chỉnh.

URL: Add a Grouped Product to Cart

Bạn sẽ cần ID sản phẩm được nhóm, có thể được tìm thấy theo cách thông thường và cả ID sản phẩm phụ. Sau đó, sử dụng một cái gì đó như:

https://yourdomain.com/?add-to-cart=3111&quantity[1803]=5&quantity[1903]=2

Trong trường hợp này, chúng tôi đang thêm ID sản phẩm được nhóm = 3111 và cụ thể là chúng tôi sẽ thêm 5x product ID = 1803 và 2x product ID = 2.

Lưu ý: nếu bạn muốn thêm “0” cho một trong các sản phẩm phụ, bạn vẫn cần chỉ định rằng & số lượng [1903] = 0.

Trên đây là hướng dẫn các bạn làm việc với “Add to Cart” trong WooCommerce. Chúc các bạn thành công.

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).

Dịch vụ thiết kế website chuyên nghiệp tại Web MTP

Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!

Website: https://webmtp.com/

Hotline: 0931 912 379

WooCommerce: Đồng bộ số lượng sản phẩm trong giỏ hàng