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

Tags

Bạn muốn hiển thị nhiều thông báo hơn cho các bạn khi tậu sản phẩm? Bài viết hôm nay mình sẽ hướng dẫn Anh chị 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 sở hữu thể chèn văn bản dễ dàng mang 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 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 như bạn muốn thêm điều kiện vào, thí dụ như chỉ hiện văn bản với một sản phẩm cụ thể thì bạn sở hữu thể sử dụng hàm get_the_ID() để lấy được ID sản phẩm ngày nay.

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 mang thể bọc văn bản bằng thẻ HTML. Thêm class hoặc ID cho những thẻ ấy và CSS theo nhu cầu của bạn nhé.

Trang shop, danh sách sản phẩm

tương tự như trường hợp ở trên, nhưng giả dụ ở trang danh sách sản phẩm thì sao. Ở trang này chúng ta phải 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 sử 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 Anh chị chỉnh sửa cấu trúc của WooCommerce 1 cách thức tiện lợi.

nếu như 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 san sẻ nó. Ngoài ra nếu bạn quan tâm đến những chủ đề như vậy như vậy, hãy đọc các bài viết chỉ dẫn WooCommerce khác và follow Fanpage để ko bỏ lỡ bài viết mới từ mình nhé.

Theo : https://hocwordpress.vn/chen-van-ban-vao-truoc-va-sau-nut-them-vao-gio-hang

Thủ thuật wordpress : https://flatsome.xyz/category/thu-thuat

Chia sẽ theme Free : https://flatsome.xyz/category/theme

Chia sẽ Plugin miễn phí : https://flatsome.xyz/category/plugin