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

Ngày đăng: 26 - 04 - 2022 Lượt xem: 58 lượt

Bạn muốn hiển thị nhiều thông tin hơn cho người dùng khi mua sản phẩm? Bài viết hôm nay mình sẽ hướng dẫn các bạn cách chèn văn bản vào trước và sau nút Thêm vào giỏ hàng.

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

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

Lời kết

Mình hi vọng bài viết trên sẽ giúp các bạn chỉnh sửa cấu trúc của WooCommerce một cách dễ dàng.

Nếu bài viết này hữu ích và giúp tiết kiệm được thời gian của bạn, hãy giúp mình chia sẻ nó. Ngoài ra nếu bạn quan tâm đến các chủ đề tương tự như vậy, hãy đọc các bài viết Hướng dẫn WooCommerce khác và follow Fanpage để không bỏ lỡ bài viết mới từ mình nhé.

0 0 votes
Đánh giá bài viết

guest
0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

22 - 04 - 2022

Bạn có từng nghĩ rằng, sẽ tốt hơn nếu giỏ hàng tự động cập nhật khi thay đổi số...

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

18 - 04 - 2022

Theo mặc định, WooCommerce chỉ hiện nhãn cho sản phẩm hết hàng và đang được giảm giá. Nhưng nếu...

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

07 - 04 - 2022

Bạn có nhu cầu muốn xoá, đổi tên, thay đổi vị trí của tính năng sắp xếp trong WooCommerce....

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

02 - 03 - 2022

Bạn muốn loại bỏ dữ liệu WooCommerce ra khỏi trang web? Nếu bạn chỉ gỡ cài đặt plugin và...

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

12 - 12 - 2021

Bạn đang tìm cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce? Theo mặc định, giá...

Làm thế nào để ẩn nút Thêm vào giỏ hàng hoặc Giá của WooCommerce cho người dùng chưa đăng nhập?

Làm thế nào để ẩn nút Thêm vào giỏ hàng hoặc Giá của WooCommerce cho người dùng chưa đăng nhập?

04 - 11 - 2021

Mình sẽ hướng dẫn cách ẩn nút Thêm vào giỏ hàng hoặc Giá sản phẩm của WooCommerce có điều...

0
Would love your thoughts, please comment.x