Trong quá trình phát triển một cửa hàng WooCommerce, việc tối ưu trải nghiệm mua sắm của khách hàng là một yếu tố quan trọng.
Một trong những thách thức mà các chủ cửa hàng gặp phải là việc quản lý nút “Thêm vào giỏ hàng” khi một sản phẩm đã có trong giỏ hàng. Việc giữ nguyên nút “Thêm vào giỏ hàng” có thể gây nhầm lẫn cho khách hàng và làm giảm trải nghiệm mua sắm.
Trong bài viết này, chúng ta sẽ tìm hiểu cách thay đổi nút “Thêm vào giỏ hàng” thành một thông báo hoặc lời mời khác khi sản phẩm đã có trong giỏ hàng, tạo ra một giao diện người dùng tốt hơn và nâng cao trải nghiệm mua sắm.
Cách 1: Tạo một plugin tùy chỉnh
Để thay đổi nút “Thêm vào giỏ hàng” trong WooCommerce, chúng ta sẽ sử dụng một plugin tùy chỉnh. Đầu tiên, hãy tạo một thư mục mới trong thư mục wp-content/plugins/ và đặt tên cho plugin, ví dụ: custom-add-to-cart-button. Trong thư mục plugin mới tạo, tạo một tệp PHP mới và đặt tên cho nó, ví dụ: custom-add-to-cart-button.php.
Tiếp theo, mở tệp custom-add-to-cart-button.php trong trình chỉnh sửa mã và bắt đầu viết mã tùy chỉnh của chúng ta.
<?php
/**
* Plugin Name: Custom Add to Cart Button
* Description: Change the add to cart button text if product is already in the cart.
* Version: 1.0
* Author: Your Name
*/
// Add a filter to modify the add to cart button text
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_button_text' );
function custom_add_to_cart_button_text( $text ) {
global $product;
// Check if the product is already in the cart
if ( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) ) ) {
// If yes, change the button text to something else
$text = 'Product Already in Cart';
}
return $text;
}Trong đoạn mã trên, chúng ta đã tạo một plugin với tên là “Custom Add to Cart Button” và mô tả là “Change the add to cart button text if product is already in the cart”. Chúng ta đã thêm hai bộ lọc để thay đổi văn bản của nút “Thêm vào giỏ hàng” trên trang sản phẩm đơn lẻ và trang danh sách sản phẩm. Trong hàm custom_add_to_cart_button_text(), chúng ta kiểm tra xem sản phẩm đã có trong giỏ hàng hay chưa bằng cách sử dụng WC()->cart->find_product_in_cart() và WC()->cart->generate_cart_id(). Nếu sản phẩm đã có trong giỏ hàng, chúng ta thay đổi văn bản của nút thành “Product Already in Cart”.
Kích hoạt plugin
Sau khi tạo mã tùy chỉnh, chúng ta cần kích hoạt plugin để nó có hiệu lực trong WooCommerce. Để làm điều này, hãy truy cập vào trang quản lý plugin trong WordPress. Tìm plugin tùy chỉnh vừa tạo và kích hoạt nó.
Bây giờ, khi một sản phẩm đã có trong giỏ hàng, nút “Thêm vào giỏ hàng” sẽ được thay đổi thành “Product Already in Cart”. Ngược lại, nếu sản phẩm chưa có trong giỏ hàng, nút vẫn sẽ hiển thị như bình thường.
Cách 2: Thêm đoạn mã vào file functions.php của theme
Nếu bạn không muốn tạo một plugin riêng, bạn cũng có thể thêm đoạn mã tùy chỉnh vào file functions.php của theme hiện tại. Điều này sẽ thực hiện các thay đổi tương tự trong việc thay đổi nút “Thêm vào giỏ hàng” nếu sản phẩm đã có trong giỏ hàng.
- Đầu tiên, truy cập vào trang quản lý theme trong WordPress. Tìm theme đang được sử dụng và nhấp vào “Chỉnh sửa” để mở file functions.php của theme.
- Mở file functions.php trong trình chỉnh sửa mã và thêm đoạn mã sau vào cuối file:
function custom_add_to_cart_button_text( $text ) {
global $product;
// Check if the product is already in the cart
if ( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) ) ) {
// If yes, change the button text to something else
$text = 'Product Already in Cart';
}
return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_button_text' );- Lưu lại file functions.php sau khi thêm đoạn mã.
Bây giờ, khi một sản phẩm đã có trong giỏ hàng, nút “Thêm vào giỏ hàng” sẽ được thay đổi thành “Product Already in Cart”. Nếu sản phẩm chưa có trong giỏ hàng, nút vẫn sẽ hiển thị như bình thường.
Lưu ý rằng việc thêm mã vào file functions.php của theme có thể ảnh hưởng đến các cập nhật theme trong tương lai. Vì vậy, hãy đảm bảo sao lưu trước khi thực hiện bất kỳ thay đổi nào và kiểm tra lại sau khi cập nhật theme để đảm bảo mã tùy chỉnh vẫn hoạt động đúng.
Kết luận
Trong bài viết này, chúng ta đã tìm hiểu cách thay đổi nút “Thêm vào giỏ hàng” trong WooCommerce khi sản phẩm đã có trong giỏ hàng bằng cách sử dụng một plugin tùy chỉnh hoặc thêm đoạn mã vào file functions.php của theme. Cả hai phương pháp đều giúp tạo ra trải nghiệm mua sắm tốt hơn và truyền đạt thông điệp rõ ràng hơn về trạng thái của sản phẩm.
Hãy tùy chỉnh giao diện người dùng của cửa hàng WooCommerce để đáp ứng đúng nhu cầu của khách hàng và tạo ra trải nghiệm mua sắm tốt nhất.