Những điểm chính
• Quan điểm của mình: Một trong những nguyên nhân phổ biến gây lỗi giao diện hoặc xung đột chức năng trên WooCommerce là sử dụng quá nhiều Hook nhưng không kiểm soát thứ tự thực thi (priority).
• Khái niệm: Hiểu WooCommerce Hooks là gì và cách chúng giúp mở rộng, tùy chỉnh WooCommerce mà vẫn đảm bảo khả năng cập nhật hệ thống an toàn.
• Phân biệt Action Hook và Filter Hook: Nắm được sự khác nhau giữa hai loại Hook để áp dụng đúng trong từng trường hợp.
• Cách sử dụng: Biết cách triển khai Hook thông qua file functions.php của Child Theme hoặc các plugin hỗ trợ.
• Các Hook phổ biến: Tìm hiểu những Hook thường được sử dụng trên trang sản phẩm, giỏ hàng, thanh toán và các khu vực quan trọng khác của WooCommerce.
WooCommerce Hooks là gì?
WooCommerce Hooks là hệ thống "móc nối" cho phép bạn thêm mới hoặc thay đổi chức năng của WooCommerce mà không cần chỉnh sửa trực tiếp các file core. Nhờ đó, website vẫn có thể cập nhật phiên bản mới mà không làm mất các tùy chỉnh đã thực hiện.
WooCommerce cung cấp hai nhóm Hook chính:
Action Hooks
Action Hook sử dụng hàm do_action() để thực thi các đoạn mã tùy chỉnh tại một vị trí xác định trên website. Loại Hook này thường được dùng để chèn thêm nội dung hoặc chức năng mới.
Ví dụ:
-
Thêm trường thông tin vào trang thanh toán.
-
Hiển thị banner khuyến mãi trên trang sản phẩm.
-
Chèn nội dung trước hoặc sau giỏ hàng.
Filter Hooks
Filter Hook sử dụng hàm apply_filters() để thay đổi dữ liệu trước khi dữ liệu đó được hiển thị hoặc xử lý. Khi sử dụng Filter Hook, bạn bắt buộc phải trả về giá trị sau khi chỉnh sửa bằng lệnh return.
Ví dụ:
-
Thay đổi tên trường thanh toán.
-
Chỉnh sửa giá sản phẩm trước khi hiển thị.
-
Thay đổi nội dung email WooCommerce.
Action Hooks và Filter Hooks khác nhau như thế nào?
|
Tiêu chí |
Action Hooks |
Filter Hooks |
|
Mục đích sử dụng |
Thêm hoặc thực thi chức năng mới |
Chỉnh sửa dữ liệu có sẵn |
|
Hàm nền tảng |
do_action() |
apply_filters() |
|
Cách khai báo |
add_action() |
add_filter() |
|
Yêu cầu return |
Không cần |
Bắt buộc |
|
Ví dụ thực tế |
Thêm trường vào form Checkout |
Đổi nhãn hoặc placeholder của trường |
|
Kết quả |
Thực hiện hành động |
Trả về dữ liệu đã thay đổi |
Cách sử dụng WooCommerce Hooks trong functions.php
Để đảm bảo các tùy chỉnh không bị mất khi cập nhật giao diện, bạn nên triển khai Hook trong file functions.php của Child Theme hoặc sử dụng plugin Code Snippets.
Bước 1: Chọn vị trí triển khai
Ưu tiên sử dụng:
-
File
functions.php của Child Theme.
Không nên chỉnh sửa trực tiếp Parent Theme vì các thay đổi sẽ bị ghi đè khi cập nhật.
Bước 2: Xác định Hook phù hợp
Tùy theo vị trí muốn tùy chỉnh, bạn lựa chọn Hook tương ứng trên trang sản phẩm, giỏ hàng hoặc thanh toán.
Cú pháp Action Hook
add_action('hook_name', 'function_name');
Action Hook dùng để thực hiện một hành động mới và không cần trả về giá trị.
Cú pháp Filter Hook
add_filter('hook_name', 'function_name', $priority, $accepted_args);
Filter Hook dùng để thay đổi dữ liệu và bắt buộc phải trả về kết quả bằng return.
Bước 3: Kiểm tra trên môi trường thử nghiệm
Trước khi áp dụng trên website thật, bạn nên:
-
Kiểm tra trên staging site.
-
Đánh giá khả năng tương thích với theme hiện tại.
-
Kiểm tra xung đột với plugin khác.
Các WooCommerce Hook phổ biến theo từng khu vực
Hook trên trang Giỏ hàng (Cart)
Một số Hook thường dùng trên trang giỏ hàng:
-
woocommerce_before_cart: Hiển thị nội dung trước toàn bộ trang giỏ hàng.
-
woocommerce_cart_contents: Khu vực hiển thị danh sách sản phẩm.
-
woocommerce_cart_coupon: Vị trí mã giảm giá.
-
woocommerce_cart_totals: Hiển thị tổng tiền, thuế và phí vận chuyển.
-
woocommerce_proceed_to_checkout: Khu vực nút chuyển sang thanh toán.
Hook trên trang Thanh toán (Checkout)
Các Hook phổ biến dùng để tùy chỉnh biểu mẫu thanh toán:
-
woocommerce_before_checkout_form
-
woocommerce_checkout_billing
-
woocommerce_review_order_before_cart_contents
-
woocommerce_review_order_after_cart_contents
-
woocommerce_review_order_after_payment
Những Hook này thường được dùng để thêm trường nhập liệu, thông báo hoặc thay đổi bố cục trang Checkout.
Hook trên trang Hoàn tất đơn hàng (Thank You Page)
Các Hook hỗ trợ tùy chỉnh trang xác nhận đơn hàng:
-
woocommerce_order_details_before_order_table
-
woocommerce_order_items_table
-
woocommerce_order_details_after_order_table
Bạn có thể dùng chúng để hiển thị thông tin khuyến mãi, hướng dẫn thanh toán hoặc nội dung chăm sóc khách hàng sau mua.
Visual Hook Guide cho trang sản phẩm đơn
Một số Hook quan trọng trên trang chi tiết sản phẩm:
-
woocommerce_before_single_product: Trước toàn bộ nội dung sản phẩm.
-
woocommerce_single_product_summary: Khu vực tiêu đề, giá và nút mua hàng.
-
woocommerce_after_single_product_summary: Khu vực tab mô tả, sản phẩm liên quan.
-
woocommerce_product_thumbnails: Khu vực ảnh thu nhỏ sản phẩm.
Hook trên trang Shop và Archive
Những Hook thường dùng để tùy chỉnh danh sách sản phẩm:
-
woocommerce_before_shop_loop
-
woocommerce_shop_loop_item_title
-
woocommerce_after_shop_loop_item_title
-
woocommerce_archive_description
Các Hook này giúp thay đổi bố cục danh mục sản phẩm hoặc thêm nội dung quảng bá vào trang Shop.
Hook cho tài khoản khách hàng và Email
My Account Hooks
-
woocommerce_account_dashboard
-
woocommerce_before_my_account
Được sử dụng để bổ sung nội dung hoặc tiện ích trong khu vực tài khoản khách hàng.
Email Hooks
-
woocommerce_email_order_details
Cho phép tùy chỉnh giao diện và nội dung email WooCommerce gửi đến khách hàng.
Hook bố cục tổng thể
-
woocommerce_before_main_content
-
woocommerce_after_main_content
Đây là các Hook được sử dụng rộng rãi để chèn nội dung vào đầu hoặc cuối phần nội dung chính của WooCommerce.