Action Hook và Filter Hook trong Woocommerce có ưu điểm tuyệt vời đó là không phải đụng tới bộ Core Theme. Khi update Plugin thì các đoạn mã đã chèn không bị mất đi. Để sử dụng một cách thành thạo bài viết này sẽ hướng dẫn bạn cách sử dụng Action và Filter Hook trong Woocommerce.

Action Hook cho phép bạn làm điều gì đó mới. Ví dụ: chèn tập lệnh theo dõi Google Analytics của bạn vào tiêu đề trang web của bạn.
Action Filter cho phép bạn sửa đổi hành vi của một thứ đã tồn tại (một biến). Ví dụ: bạn có thể sử dụng bộ lọc để thay đổi văn bản của nút thêm vào giỏ hàng trên toàn bộ cửa hàng của mình.

Sử dụng Action Hook của WooCommerce

Đầu tiên bạn sẽ vào Appearance (Giao diện) => Theme Editor (Sửa giao diện)

action-hook-trong-woocommerce

Nhấp vào Woocommerce

action-hook-trong-woocommerce-1

Giả sử chọn content-single-product.php (Đây là trang hiển thị chi tiết sản phẩm)

Tại đây bạn sẽ thấy các đoạn Hook được chú thích.

Ví dụ: woocommerce_before_single_product

action-hook-trong-woocommerce-2

Cấu trúc sử dụng Action Hook sẽ là:

function wc_before_single_product() {
echo '<p>Đây là phần nội dung</p>';
}
add_action('woocommerce_before_single_product', 'wc_before_single_product');

Giải thích:

  • wc_before_single_product: Tên do bạn đặt tùy ý
  • add_action(‘woocommerce_before_single_product’: là thêm một hành động vào trong woocommerce_before_single_product

Đoạn mã này bạn sẽ chèn trong file functions.php

Sau khi thêm vào bạn ra trang chủ nhấp vào một sản phẩm bất kỳ sẽ ra kết quả.

Sử dụng Filter Hook trong Woocommerce

Với Filter cũng sử dụng tương tự như Action Hook, nhưng cấu trúc sẽ khác một chút

function wc_custom_product_add_to_cart_text() {

return __( 'Đặt mẫu', 'woocommerce' );
}

add_filter( 'woocommerce_product_add_to_cart_text', 'wc_custom_product_add_to_cart_text' );

Hoặc bạn cũng có thể viết nhưu thế này:

function wc_before_add_to_cart_form( $content ) {
$content = 'Đây là nội dung';
return $content;
}
add_filter( 'woocommerce_product_add_to_cart_text', 'wc_before_add_to_cart_form' );

Giải thích:

  • wc_custom_product_add_to_cart_text: Hàm này do bạn đặt tùy ý
  • woocommerce_product_add_to_cart_text: Button Add to Cart mặc định
  • return: Trả về chính nó

Thông thường nút Add to cart là mặt định có sẵn trong Woocommerce, nếu muốn thay đổi chúng ta phải dùng Filter để ghi đè văn bản lên.

SONGMAWEB vừa hướng dẫn bạn cách sử dụng Action Hook và Filter Hook để giúp bạn hiểu và sử dụng hiệu quả hơn. Hãy áp dụng và thực hành ngay đi nhé!

0334 859 168