Vị Trí Các Hàm Hook Trong Trang Chi Tiết Sản Phẩm Woocommerce

Trong WooCommerce, trang chi tiết sản phẩm được xây dựng dựa trên một loạt các hook để bạn dễ dàng thêm, chỉnh sửa hoặc loại bỏ các thành phần. Dưới đây là các hàm hook trong trang chi tiết sản phẩm phổ biến và vị trí của chúng trong trang chi tiết sản phẩm:

Hàm hook trong trang chi tiết sản phẩm

Các Actions trang danh mục WooCommerce

//Note: These are actions you can unhook/remove!
 // Before content
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
  
// Left column
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
 
// Right column
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
 
// Right column - add to cart
do_action( 'woocommerce_before_add_to_cart_form' );
do_action( 'woocommerce_before_add_to_cart_button' );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
 
add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
do_action( 'woocommerce_before_quantity_input_field' );
do_action( 'woocommerce_after_quantity_input_field' );
do_action( 'woocommerce_after_add_to_cart_button' );
do_action( 'woocommerce_after_add_to_cart_form' );
 
// Right column - meta
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
do_action( 'woocommerce_product_meta_start' );
do_action( 'woocommerce_product_meta_end' );
 
// Right column - sharing
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
do_action( 'woocommerce_share' );
 
// Tabs, upsells and related products
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );
do_action( 'woocommerce_product_after_tabs' );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
 
// Reviews
add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
do_action( 'woocommerce_review_before_comment_text', $comment );
add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );
do_action( 'woocommerce_review_after_comment_text', $comment );
 
// After content
do_action( 'woocommerce_after_single_product' );
do_action( 'woocommerce_after_main_content' );

//Note: These are actions you can unhook/remove!

// Before content

add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );

// Left column

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

// Right column

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// Right column - add to cart

do_action( 'woocommerce_before_add_to_cart_form' );

do_action( 'woocommerce_before_add_to_cart_button' );

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );

add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );

add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );

add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );

add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

do_action( 'woocommerce_before_quantity_input_field' );

do_action( 'woocommerce_after_quantity_input_field' );

do_action( 'woocommerce_after_add_to_cart_button' );

do_action( 'woocommerce_after_add_to_cart_form' );

// Right column - meta

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

do_action( 'woocommerce_product_meta_start' );

do_action( 'woocommerce_product_meta_end' );

// Right column - sharing

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

do_action( 'woocommerce_share' );

// Tabs, upsells and related products

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );

do_action( 'woocommerce_product_after_tabs' );

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// Reviews

add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );

add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );

add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );

do_action( 'woocommerce_review_before_comment_text', $comment );

add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );

do_action( 'woocommerce_review_after_comment_text', $comment );

// After content

do_action( 'woocommerce_after_single_product' );

do_action( 'woocommerce_after_main_content' );

Bạn có thể sử dụng các hook này để tùy biến trang sản phẩm bằng cách thêm mã PHP vào file functions.php của theme. Việc này giúp bạn thay đổi thứ tự hoặc chèn nội dung mới mà không cần chỉnh sửa mã nguồn WooCommerce trực tiếp

Hướng dẫn sử dụng hàm hook

Ví dụ: Các bạn muốn hiển thị thêm dòng “Tunlamweb” cuối trang sản phẩm thì thêm hàm kiểm tra single product is_product() và hook vào vị trí woocommerce_after_single_product như sau:

// Note: Test Demo Hook After Button Add to Cart
add_action( 'woocommerce_after_add_to_cart_form','demo_woocommerce_product_button_addtocart',35,2);
function demo_woocommerce_product_button_addtocart() {
	
	if ( is_product()) {
		echo '<a href="https://tunlamweb.com/" class="button"> Tunlamweb - Demo </a>';
	}
}

// Note: Test Demo Hook After Button Add to Cart

add_action( 'woocommerce_after_add_to_cart_form','demo_woocommerce_product_button_addtocart',35,2);

function demo_woocommerce_product_button_addtocart() {

if ( is_product()) {

echo '<a href="https://tunlamweb.com/" class="button"> Tunlamweb - Demo </a>';

}

Xem thêm: Tạo nút tải về đếm ngược không cần plugin cho bài viết WordPress

Theo dỗi thêm mình qua Fanpage hoặc Youtube nhé.

Chúc các bạn thành công.

Nguồn: CodeFE