Chèn văn bản trước và sau nút thêm vào giỏ hàng trong wordpress

Do nhu cầu khách hàng muốn thêm các thông tin thêm nữa trước và sau nút thêm vào giỏ hàng, mình có tim hiểu thêm trên mạn và các diễn đàn và biết cách thêm theo đúng yêu cầu cảu khách hàng, vì vậy mình xin tổng hợp lại từ các nguồn internet để viết thành bài viết hướng dẫn này nếu bạn nào có nhu cầu có thể tham khảo thêm.

Trang chi tiết sản phẩm

Trước nút Thêm vào giỏ hàng

Ở trường hợp này, bạn có thể chèn văn bản dễ dàng với hook woocommerce_before_add_to_cart_button. Hãy thêm đoạn code dưới đây vào file functions.php của theme bạn đang sử dụng.

add_action( ‘woocommerce_before_add_to_cart_button’, ‘hk_before_add_to_cart_btn’ );

function hk_before_add_to_cart_btn() {

echo ‘Thông tin thêm…’;

}

Nếu bạn muốn thêm điều kiện vào, ví dụ như chỉ hiện văn bản với một sản phẩm cụ thể thì bạn có thể sử dụng hàm get_the_ID() để lấy được ID sản phẩm hiện tại.

Sau nút thêm vào giỏ hàng

Tương tự như trên, ở trường hợp này mình sẽ dùng hook woocommerce_after_add_to_cart_button.

add_action( ‘woocommerce_after_add_to_cart_button’, ‘hk_after_add_to_cart_btn’ );

function hk_after_add_to_cart_btn() {

echo ‘Thông tin thêm…’;

}

Với cả hai trường hợp trên, bạn đều có thể bọc văn bản bằng thẻ HTML. Thêm class hoặc ID cho các thẻ đó và CSS theo nhu cầu của bạn nhé.

Trang Cửa hàng, danh sách sản phẩm

Tương tự như trường hợp ở trên, nhưng nếu ở trang danh sách sản phẩm thì sao. Ở trang này chúng ta phải sử dụng hook khác để can thiệp vào cấu trúc HTML.

Trong cả hai trường hợp hiển thị văn bản trước và sau nút thêm giỏ hàng, bạn chỉ cần dùng một hook woocommerce_loop_add_to_cart_link.

add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘hk_before_after_btn’, 10, 3 );

function hk_before_after_btn( $add_to_cart_html, $product, $args ){
$before = ”; // Văn bản trước nút Thêm vào giỏ hàng – HTML hay string đều được
$after = ”; // Văn bản sau nút Thêm vào giỏ hàng – HTML hay string đều được

return $before . $add_to_cart_html . $after;
}