Filter không còn hoạt động trong WooCommerce Blocks: Cảnh báo quan trọng dành cho Developer - Học wordpress cho người mới bắt đầu

CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%

Bài viết hướng dẫn có chứa CODE - Copy và sử dụng chúng sẽ tiện hơn cho bạn.

Gần đây, trong quá trình hỗ trợ một khách hàng chỉnh sửa giao diện sản phẩm trên website WooCommerce 2025, tôi gặp một tình huống tưởng như đơn giản: thêm một filter để can thiệp vào nội dung danh sách sản phẩm. Tuy nhiên, điều bất ngờ là đoạn mã hoàn toàn không hoạt động – dù cú pháp đúng, hàm được khai báo chuẩn, và mọi thứ vẫn chạy ổn với các phiên bản trước đây.

Bài viết này khá dài và chi tiết, tuy nhiên bạn không nên bỏ qua – vì đây là những chia sẻ mới nhất, được tổng hợp và cập nhật sát sao với tình hình hiện tại, chỉ có tại Wpshare247. Nếu bạn đang phát triển hoặc bảo trì website sử dụng WooCommerce, đặc biệt là với các tuỳ biến nâng cao, thì đây chính là bài viết bạn cần phải đọc hết!
🌱 Nếu thấy bài viết hữu ích, bạn có thể ủng hộ tác giả bằng cách nhấn vào quảng cáo bên dưới — như một donate miễn phí. Bạn không mất gì nhưng chúng tôi sẽ có thêm chi phí để duy trì và vận hành website. Cảm ơn bạn! 🙏

Sau khi kiểm tra kỹ, tôi nhận ra nguyên nhân không nằm ở code, mà đến từ chính sự thay đổi kiến trúc của WooCommerce Blocks – nơi các filter PHP truyền thống đã không còn được áp dụng như trước. Đây là một cảnh báo nghiêm túc dành cho bất kỳ developer nào vẫn đang áp dụng tư duy hook-based cũ mà chưa cập nhật sự khác biệt giữa WooCommerce truyền thống và phiên bản sử dụng Block Editor.

Có phải đôi khi bạn cần tùy chỉnh cách hiển thị giá sản phẩm trong giỏ hàng để phù hợp với các dịch vụ đặc biệt hoặc sản phẩm có thêm phụ phí?
Ví dụ, với dịch vụ Thiết kế Web tại Web366, bạn có thể cộng thêm phí tùy chọn (như cài SSL, viết content…) hoặc hiển thị thông tin mô tả chi tiết ngay trong giỏ hàng.

WooCommerce cung cấp hook woocommerce_cart_item_price để bạn dễ dàng làm điều đó.

add_filter('woocommerce_cart_item_price', 'wpshare247custom_cart_item_price_display', 20, 3);
function wpshare247custom_cart_item_price_display($product_price, $cart_item, $cart_item_key) {

    $text_note = $cart_item['custom_data']['text_note'] ?? '';
    
    if (isset($cart_item['custom_data']['extra_charge'])) {
        $product = $cart_item['data'];

        // Hiển thị giá gốc (nếu cần)
        $base_price = wc_price($cart_item['custom_data']['base_price']);

        // Hiển thị phụ phí thêm nếu có
        $extra_charge_html = '<div class="extra_charge">';
        $extra_charge_html .= wc_price($cart_item['custom_data']['extra_charge']);
        $extra_charge_html .= '<div>Phụ phí dịch vụ Thiết kế Web 366</div>';
        $extra_charge_html .= '</div>';

        // Ghi chú người dùng thêm vào nếu có
        $text_note_html = $text_note ? '<div class="web366_note">Ghi chú khách hàng: ' . esc_html($text_note) . '</div>' : '';

        // Gộp lại toàn bộ nội dung giá hiển thị
        $product_price = $base_price . $extra_charge_html . $text_note_html;
    }

    return $product_price;
}

Cách mới: Sử dụng InnerBlocks hoặc tùy biến component trong JavaScript

import { registerPlugin } from '@wordpress/plugins';
import { CartLineItemPrice } from '@woocommerce/blocks-checkout';

const CustomCartItemPrice = (props) => {
    return (
        <div style={{ color: 'red', fontWeight: 'bold' }}>
            Giá SP: {props.currency.symbol}{props.lineItem.price.value}
        </div>
    );
};

registerPlugin('custom-cart-item-price', {
    render: () => {
        wp.hooks.addFilter(
            'woocommerce.blocks.cart.lineItemPrice',
            'custom-cart-item-price',
            () => CustomCartItemPrice
        );
    },
});

1. Các filter KHÔNG còn hoạt động trong WooCommerce Blocks

Khi sử dụng các khối (Blocks) thay thế cho shortcode truyền thống trong WooCommerce, nhiều filter quen thuộc trong PHP sẽ không còn được áp dụng. Dưới đây là danh sách các hook không còn hoạt động trong từng nhóm chức năng:

1.1 Các filter không hoạt động trong Cart Block (Giỏ hàng):

woocommerce_cart_item_price
woocommerce_cart_item_subtotal
woocommerce_cart_item_name
woocommerce_cart_item_quantity
woocommerce_cart_item_remove_link
woocommerce_cart_item_permalink
woocommerce_cart_contents_total
woocommerce_cart_totals_before_shipping
woocommerce_cart_totals_after_shipping
woocommerce_cart_totals_order_total_html

1.2 Các filter không hoạt động trong Checkout Block (Thanh toán):

woocommerce_checkout_fields
woocommerce_checkout_get_value
woocommerce_form_field_args
woocommerce_after_checkout_billing_form
woocommerce_review_order_before_payment
woocommerce_checkout_before_customer_details
woocommerce_checkout_after_customer_details

1.3 Các filter không hoạt động trong Thank You Block (Trang cảm ơn / Đơn hàng đã nhận):

woocommerce_thankyou
woocommerce_order_details_after_order_table

1.4 Các filter không hoạt động liên quan đến Sản phẩm trong giỏ / đơn hàng:

woocommerce_product_get_price
woocommerce_get_price_html

📌 Lưu ý: Những filter này vẫn có thể hoạt động với giao diện truyền thống (shortcode), nhưng sẽ bị bỏ qua hoàn toàn khi website sử dụng các khối Block hiện đại của WooCommerce. Đây là sự thay đổi quan trọng mà developer cần nắm rõ khi tùy biến giỏ hàng, thanh toán hoặc hiển thị đơn hàng sau mua hàng.

2. Làm sao biết website của bạn đang dùng WooCommerce Blocks?

Trong quá trình nâng cấp hoặc kế thừa website từ các đơn vị khác, việc nhận biết WooCommerce đang dùng phiên bản cũ (shortcode) hay đã chuyển sang Blocks (giao diện khối) là bước cực kỳ quan trọng trước khi can thiệp bằng filter.

Dưới đây là những cách đơn giản nhưng hiệu quả để xác định:

2.1. Quan sát trực tiếp giao diện frontend

Giỏ hàng và Thanh toán theo kiểu Blocks sẽ có giao diện hiện đại, các thành phần được chia rõ từng khối như: Cart Items, Totals, Payment methods, Address form.
Nếu bạn nhìn thấy giao diện “mới lạ”, khác với template mặc định trong theme như Storefront, khả năng cao là đang dùng Cart block hoặc Checkout block.

2.2. Kiểm tra trong trang quản trị WooCommerce

Truy cập Trang → Tất cả các trang, kiểm tra các trang như Giỏ hàng, Thanh toán, Cảm ơn.
Nếu nội dung bên trong không còn là shortcode như [woocommerce_cart],
```
[woocommerce_checkout]
```
, mà thay vào đó là khối dạng:
```
 

```
=> Đây là WooCommerce Blocks, không sử dụng hook/filter truyền thống như trước.

Xem mã trong soạn thảo để xác định WooCommerce

2.3. Kiểm tra theme có hỗ trợ block chưa

WooCommerce Blocks thường yêu cầu theme có hỗ trợ tốt Gutenberg (Full Site Editing).
Một số theme cũ chưa hỗ trợ sẽ vẫn giữ nguyên giao diện shortcode, do đó khi theme bạn đang xài vẫn còn [woocommerce_cart]thì nhiều khả năng chưa bị ảnh hưởng.

2.4. Thử một filter cơ bản

Gắn thử đoạn filter đơn giản như sau vào file functions.php:

add_filter( 'woocommerce_cart_item_price', function() { return 'Test Price'; });

Nếu bạn đã bật cache thì hãy tắt tạm hoặc mở bằng tab ẩn danh để test.
Nếu không có tác dụng gì => gần như chắc chắn bạn đang làm việc với WooCommerce Blocks, và filter này sẽ bị bỏ qua.

Việc xác định đúng công nghệ đang chạy là điều bắt buộc với bất kỳ lập trình viên nào, trước khi bỏ hàng giờ ngồi fix bug từ filter không hoạt động mà không hiểu nguyên nhân.

3. Nếu website của bạn đã lỡ nâng cấp lên Blocks – Có thể quay về WooCommerce truyền thống không?

Câu trả lời là CÓ, nhưng bạn cần hiểu rõ rủi ro và giới hạn.

Từ bản WooCommerce 8.x trở đi, hệ thống Cart, Checkout, Product Archive và thậm chí Single Product đang dần được thay thế bằng Blocks-based template – tức các thành phần được xây dựng bằng React thay vì PHP như trước. Điều này khiến các hook/filter PHP quen thuộc như woocommerce_cart_item_price, woocommerce_before_checkout_form… không còn tác dụng.

Nếu bạn cần sử dụng lại các filter PHP hoặc các hook truyền thống để tùy biến, bạn có thể tắt WooCommerce Blocks bằng một số cách sau:

3.1 Dùng filter của WooCommerce để tắt Block Features

Thêm đoạn code sau vào functions.php

add_filter( 'woocommerce_should_load_cart_block', '__return_false' );
add_filter( 'woocommerce_should_load_checkout_block', '__return_false' );

3.2 Sử dụng theme không hỗ trợ Block

Một số theme cũ hoặc theme tùy biến không tích hợp sẵn hỗ trợ Block sẽ tự động fallback về hệ thống PHP truyền thống. Bạn cũng có thể tạo child theme và override lại các template cũ như cart.php, checkout.php theo nhu cầu.

WooCommerce Blocks là một phần quan trọng trong quá trình hiện đại hóa trải nghiệm bán hàng của WooCommerce. Dưới đây là tổng quan đầy đủ để bạn nắm rõ:

4. Sẵn thì bạn nên tìm hiểu WooCommerce Blocks là gì?

Bài viết này như một phần tài liệu mới nâng cao cho các bạn lập trình WordPress có thêm một chút kiến thức.

WooCommerce Blocks là tập hợp các block Gutenberg dành riêng cho WooCommerce, cho phép bạn xây dựng giao diện giỏ hàng (Cart), thanh toán (Checkout), sản phẩm, lọc sản phẩm… bằng cách kéo-thả trực quan trong trình chỉnh sửa Block Editor (Gutenberg) của WordPress.

4.1 WooCommerce Blocks sử dụng công nghệ gì?

1. React.js

Mọi thành phần của WooCommerce Blocks được viết bằng React, giúp giao diện linh hoạt, tương tác mượt và dễ mở rộng.

Ví dụ: Custom Block với React (Hello Wpshare247)
Bạn cần hiểu rằng các block trong WooCommerce sử dụng nền tảng Gutenberg block editor, nghĩa là chúng được viết bằng React + JSX và đăng ký thông qua JavaScript. Đây là một ví dụ cơ bản:

// File: hello-wpshare247.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('wpshare247/hello-block', {
    title: __('Hello Wpshare247', 'wpshare247'),
    icon: 'smiley',
    category: 'widgets',
    edit() {
        const blockProps = useBlockProps();
        return <div {...blockProps}>Xin chào từ <strong>Wpshare247</strong></div>;
    },
    save() {
        const blockProps = useBlockProps.save();
        return <div {...blockProps}>Xin chào từ <strong>Wpshare247</strong></div>;
    }
});

2. REST API & Store API

Store API là nền tảng dữ liệu mới được WooCommerce phát triển để hỗ trợ Blocks.
Dữ liệu giỏ hàng, sản phẩm, vận chuyển… được lấy trực tiếp qua API thay vì PHP template truyền thống.

3. Gutenberg Blocks

Tích hợp sâu với WordPress Gutenberg để cho phép kéo thả và dựng giao diện không cần code.

4.2 Blocks này nhằm tương thích với gì?

Tương thích tốt hơn với:

Giao diện mới của WordPress (Full Site Editing).
Các theme hiện đại hỗ trợ block như: Storefront, Blocksy, Kadence…
Thiết bị di động, nhờ vào React rendering.
Người không biết lập trình vẫn có thể dựng trang Checkout, Cart nhanh chóng.

Không tương thích 100% với:

Nhiều hook và filter PHP cũ, vốn dùng trong template cart.php, checkout.php.
Các plugin tùy chỉnh giỏ hàng / giá tiền nếu không hỗ trợ Store API.
Một số custom code kiểu add_filter(‘woocommerce_cart_item_price’…) sẽ không còn hiệu lực.

4.3 WooCommerce Blocks có từ phiên bản nào?

Được giới thiệu thử nghiệm từ WooCommerce 3.6 (tháng 4/2019).
Tích hợp mặc định và ổn định từ WooCommerce 6.9 trở đi.
Từ WooCommerce 8.3+ (cuối 2023): Blocks Checkout trở thành mặc định, khuyên dùng thay vì shortcode.

5. Vậy thì chúng ta cần gì trước tình cảnh hiện tại?

Trước làn sóng thay đổi lớn của WooCommerce khi chuyển sang mô hình block-based, bạn không thể đứng ngoài cuộc. Tuy nhiên, để đảm bảo không bị động và không làm gián đoạn hoạt động kinh doanh của các website cũ, bạn cần chuẩn bị song song hai hướng:

5.1. Học và làm chủ các công nghệ Block hiện đại

Nắm vững cấu trúc block mới: Đây không đơn thuần là việc học vài đoạn mã React. Bạn cần hiểu cách WooCommerce xử lý giỏ hàng, thanh toán, và logic hiển thị từng block.
Thử nghiệm trên staging site: Không nên chờ khách hàng than phiền hoặc sự cố phát sinh. Hãy chủ động nâng cấp một site demo, test khả năng tương thích theme, plugin cũ, khả năng tùy biến và tốc độ.
Tạo block tùy chỉnh (custom block): Học cách build block bằng React để có thể tích hợp các chức năng riêng (ví dụ upsell, hiển thị flash sale, combo…).

5.2. Bảo trì và quản lý hệ thống WooCommerce cũ

Duy trì khả năng vận hành ổn định: Với các website đã lên sản phẩm, vận hành và có luồng mua bán ổn định bằng các shortcode cũ, không nên vội nâng cấp. Hãy duy trì plugin, chủ đề, PHP version và backup định kỳ.
Lập danh sách website có nguy cơ xung đột khi update: Tạo bảng theo dõi các phiên bản plugin WooCommerce, theme, PHP, MySQL, để quyết định nâng cấp hay duy trì.
Giải pháp rollback và clone: Khi khách hàng nâng cấp nhầm, cần có giải pháp quay về WooCommerce Classic bằng bản backup, hoặc restore từ staging. Việc dùng plugin như WP Rollback, hoặc giữ bộ source cũ là điều cần thiết.
Đào tạo khách hàng hoặc viết tài liệu hướng dẫn: Rất nhiều khách hàng sẽ “hoảng” nếu thấy website không giống như cũ. Hãy chủ động cung cấp video, PDF hướng dẫn hoặc bán kèm dịch vụ “nâng cấp bảo vệ dữ liệu cũ”.

6. Ví dụ đơn giản, các bước thực hiện trong functions.php

1. Tạo file JS custom block (ví dụ custom-cart-price.js) với nội dung:

import { registerPlugin } from '@wordpress/plugins';
import { CartLineItemPrice } from '@woocommerce/blocks-checkout';

const CustomCartItemPrice = (props) => {
    return (
        <div style={{ color: 'red', fontWeight: 'bold' }}>
            Giá SP: {props.currency.symbol}{props.lineItem.price.value}
        </div>
    );
};

registerPlugin('custom-cart-item-price', {
    render: () => {
        wp.hooks.addFilter(
            'woocommerce.blocks.cart.lineItemPrice',
            'custom-cart-item-price',
            () => CustomCartItemPrice
        );
    },
});

2. Enqueue script từ functions.php:

function enqueue_custom_woocommerce_blocks_script() {
    // Đường dẫn đến file JS của bạn
    wp_enqueue_script(
        'custom-cart-block-js',
        get_stylesheet_directory_uri() . '/custom-cart-price.js',
        [ 'wp-plugins', 'wp-element', 'wp-hooks', 'wc-blocks-checkout' ],
        filemtime(get_stylesheet_directory() . '/custom-cart-price.js'),
        true
    );
}
add_action('enqueue_block_assets', 'enqueue_custom_woocommerce_blocks_script');

WooCommerce đang dần chuyển mình sang một hướng tiếp cận mới bằng việc áp dụng Blocks thay vì các shortcode cũ. Sự thay đổi này tuy hiện đại và chuẩn hóa theo hướng React/JS, nhưng cũng mang đến không ít thách thức cho các lập trình viên WordPress lâu năm – đặc biệt là khi các hook và filter truyền thống như woocommerce_cart_item_price không còn hoạt động như trước.

Trong bài viết này, bạn đã được cung cấp:

Cách kiểm tra xem website đang dùng Blocks hay shortcode truyền thống.
Nguyên nhân khiến các filter quen thuộc không còn hoạt động trong các trang giỏ hàng/sản phẩm mới.
Cách quay trở lại giao diện cũ nếu cần giữ nguyên các chức năng đã code sẵn.
Cách tư duy mới khi muốn custom block theo phương pháp mới với React hoặc InnerBlocks.
Hướng đi tương lai: nâng cấp kiến thức về Blocks, đồng thời bảo trì hệ thống web WooCommerce cũ.

Đây là giai đoạn chuyển giao mà bất kỳ dev WordPress nào cũng không nên bỏ qua. Đặc biệt nếu bạn đang làm dịch vụ cho khách hàng thì việc hiểu rõ sự khác biệt này sẽ giúp bạn tiết kiệm rất nhiều thời gian xử lý sự cố và nâng cao chất lượng công việc.

Đừng quên lưu bài viết này hoặc chia sẻ với team dev của bạn, vì đây là chủ đề mà sớm muộn bạn cũng sẽ gặp phải.

Mọi ví dụ và kinh nghiệm thực tế chỉ có tại wpshare247.com – nền tảng học WordPress từ kinh nghiệm thực chiến.