Tổng hợp Hook trong WordPress – Hook trong Single Product

Giới thiệu về Hook trong WordPress

Hook là một điểm móc trong mã nguồn WordPress, cho phép bạn thêm hoặc thay đổi nội dung, chức năng mà không cần chỉnh sửa trực tiếp file gốc. Điều này giúp bảo vệ code của bạn khi cập nhật WordPress hoặc theme.

Hook trong Single Product

Trong trang sản phẩm đơn lẻ (single product) của WooCommerce, có rất nhiều hook để bạn tùy chỉnh. Dưới đây là một số hook phổ biến:

Trước nội dung sản phẩm

• woocommerce_before_single_product_summary: Thêm nội dung trước tóm tắt sản phẩm.
  • add_action( ‘woocommerce_before_single_product_summary’, ‘display_custom_notice’ );
    function display_custom_notice() {
        echo ‘<div class=”custom-notice”>
            <p>Đây là một thông báo đặc biệt.</p>
        </div>’;
    }
• woocommerce_before_single_product_image: Thêm nội dung trước hình ảnh sản phẩm.
  • add_action( ‘woocommerce_before_single_product_image’, ‘display_logo_before_image’ );
    function display_logo_before_image() {
        echo ‘<img src=”‘ . get_template_directory_uri() . ‘/images/logo.png” alt=”Logo”>
        <p>Một đoạn văn bản giới thiệu sản phẩm.</p>’;
    }
• woocommerce_show_product_images: Thay đổi cách hiển thị hình ảnh sản phẩm.
  • add_filter( ‘woocommerce_single_product_image_size’, ‘custom_product_image_size’ );
    function custom_product_image_size( $size ) {
        return ‘large’; // Thay ‘large’ bằng kích thước mong muốn
    }
• woocommerce_product_thumbnails: Thay đổi cách hiển thị thumbnail sản phẩm.
  • add_filter( ‘woocommerce_product_gallery_image_size’, ‘custom_thumbnail_size’ );
    function custom_thumbnail_size( $size ) {
        return ‘thumbnail’; // Thay ‘thumbnail’ bằng kích thước mong muốn
    }

Trong nội dung sản phẩm

• woocommerce_single_product_summary: Thay đổi nội dung tóm tắt sản phẩm.
  • add_action( ‘woocommerce_single_product_summary’, ‘custom_content_in_summary’ );
    function custom_content_in_summary() {
        echo ‘<p>This is custom content added to the product summary.</p>’;
    }
• woocommerce_single_product_price: Thay đổi cách hiển thị giá sản phẩm.
• woocommerce_single_product_add_to_cart_button: Thay đổi nút “Thêm vào giỏ hàng”.
• woocommerce_after_add_to_cart_button: Thêm nội dung sau nút “Thêm vào giỏ hàng”.
• woocommerce_single_product_meta: Thay đổi thông tin meta sản phẩm.
• woocommerce_product_description: Thay đổi mô tả sản phẩm.
• woocommerce_product_additional_information: Thay đổi thông tin bổ sung sản phẩm.
• woocommerce_product_reviews: Thay đổi phần đánh giá sản phẩm.

Sau nội dung sản phẩm

• woocommerce_after_single_product_summary: Thêm nội dung sau tóm tắt sản phẩm.
• woocommerce_after_single_product_image: Thêm nội dung sau hình ảnh sản phẩm.
• woocommerce_after_single_product: Thêm nội dung cuối trang sản phẩm.

Ví dụ sử dụng Hook

add_action( 'woocommerce_after_single_product_summary', 'custom_content_after_summary' );
function custom_content_after_summary() {
    echo '<p>Đây là nội dung tùy chỉnh sau tóm tắt sản phẩm.</p>';
}

Các Hook Thường Dùng Khác

• woocommerce_single_product_tabs: Thay đổi tab sản phẩm.
• woocommerce_product_tabs_title: Thay đổi tiêu đề tab sản phẩm.
• woocommerce_product_tabs_content: Thay đổi nội dung tab sản phẩm.

Lưu ý

• Để sử dụng hook, bạn cần tạo một hàm và gắn nó vào hook bằng hàm add_action hoặc add_filter.
• Các hook có thể được sử dụng trong file functions.php của theme hoặc trong plugin.
• Khi sử dụng hook, hãy đảm bảo không làm hỏng chức năng cốt lõi của WordPress hoặc WooCommerce.

Bạn có câu hỏi cụ thể nào về hook trong single product không? Tôi sẵn sàng hỗ trợ bạn thêm.

Bạn muốn thực hiện một thay đổi cụ thể nào trên trang sản phẩm của mình? Hãy chia sẻ ý tưởng của bạn, tôi sẽ giúp bạn tìm hook phù hợp.