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

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

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ẽ tiêu 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ả 2 trường hợp trên, bạn đều sở hữu 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 cửa hàng, danh sách sản phẩm

như vậy như trường hợp ở trên, nhưng nếu như ở 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ả 2 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 1 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ị em chỉnh sửa cấu trúc của WooCommerce 1 bí quyết thuận lợi.

giả dụ bài viết này có ích và giúp tiết kiệm được thời kì của bạn, hãy giúp mình chia sẻ nó. Tuy nhiên nếu bạn để ý tới các chủ đề tương tự như vậy, hãy đọc các bài viết chỉ dẫn WooCommerce khác và follow Fanpage để không bỏ lỡ bài viết mới trong khoảng 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