Trong nhiều cửa hàng trực tuyến, việc hiển thị giá ngay lập tức không phải lúc nào cũng phù hợp — đặc biệt với sản phẩm cần báo giá theo yêu cầu, hàng order hoặc giá thay đổi theo số lượng. Bài viết này devfulls.com sẽ hướng dẫn chi tiết cách hiển thị văn bản thay thế giá sản phẩm trong wordpress (ví dụ: “Liên hệ”, “Giá theo yêu cầu” hoặc “Call for price”), kèm giải pháp code an toàn, cách xử lý sản phẩm biến thể và lưu ý về structured data để không ảnh hưởng đến SEO. Nếu bạn muốn giữ trải nghiệm người dùng tốt đồng thời tối ưu công cụ tìm kiếm, hướng dẫn dưới đây sẽ cho bạn cả giải pháp nhanh lẫn nâng cao.
Tại sao cần hiển thị văn bản thay thế giá sản phẩm trong wordpress
Có nhiều trường hợp bạn không muốn hiển thị con số giá trực tiếp trên frontend:
-
Sản phẩm cần báo giá (B2B hoặc hàng order).
-
Giá thay đổi theo yêu cầu / theo số lượng.
-
Muốn ưu tiên liên hệ trước khi hiện giá.
-
Tránh cạnh tranh giá trực tiếp trên trang listing.
Những kịch bản thường gặp khi hiển thị văn bản thay thế giá sản phẩm trong wordpress
- Thay giá thành chữ “Liên hệ” cho tất cả sản phẩm.
-
Chỉ thay cho sản phẩm có giá = 0 hoặc chưa thiết lập.
-
Chỉ thay cho sản phẩm thuộc một hoặc vài category (ví dụ
gia-order). -
Hiển thị giá với link tel: cho người dùng mobile.
-
Ẩn giá cho user chưa đăng nhập (login mới xem giá).
Cách thay thế văn bản thay thế giá sản phẩm trong wordpress chi tiết
Ghi chú: luôn đưa code vào child theme
functions.phphoặc file plugin riêng (site-specific plugin). Không chỉnh trực tiếp trong theme gốc.
A. Cách an toàn và phổ biến: dùng filter woocommerce_get_price_html
// Thay "Giá: Liên hệ" cho mọi sản phẩm
add_filter('woocommerce_get_price_html', 'devfulls_replace_price_with_text', 10, 2);
function devfulls_replace_price_with_text($price_html, $product) {
// Ví dụ: nếu muốn thay cho tất cả -> trả về text
return '<span class="price-contact">Giá: <a href="tel:0988123456">Liên hệ: 0988 123 456</a></span>';
}
Có điều kiện ví dụ: chỉ khi giá rỗng hoặc 0
add_filter('woocommerce_get_price_html', 'devfulls_price_if_empty', 10, 2);
function devfulls_price_if_empty($price_html, $product) {
$price = $product->get_price();
if ($price === '' || $price === null || floatval($price) == 0) {
return '<span class="price-contact">Giá: Liên hệ để biết chi tiết</span>';
}
return $price_html;
}
Ví dụ: chỉ áp dụng cho category gia-order
add_filter('woocommerce_get_price_html', 'devfulls_price_by_cat', 10, 2);
function devfulls_price_by_cat($price_html, $product) {
if (has_term('gia-order', 'product_cat', $product->get_id())) {
return '<span class="price-contact">Giá: Liên hệ</span>';
}
return $price_html;
}
B. Override template single-product/price.php
Nếu cần chỉnh giao diện HTML cho giá (ví dụ thêm icon, class, layout), override template.
-
Copy
woocommerce/templates/single-product/price.phpvàoyour-child-theme/woocommerce/single-product/price.php. -
Chỉnh đoạn echo
<?php echo $product->get_price_html(); ?>thành logic bạn cần (hoặc gọi function filter bên trên).
Override thích hợp khi bạn muốn thay đổi markup hoặc thêm microdata tùy chỉnh.
Điều kiện nâng cao (ví dụ)
- Chỉ hiển thị cho user chưa đăng nhập
add_filter('woocommerce_get_price_html', 'devfulls_price_hide_for_guests', 10, 2);
function devfulls_price_hide_for_guests($price_html, $product) {
if (!is_user_logged_in()) {
return '<a class="btn-contact" href="/dang-nhap">Đăng nhập để xem giá</a>';
}
return $price_html;
}
-
Theo role:
current_user_can('wholesale_customer')hay tương tự. -
Theo kho hàng: nếu
!$product->is_in_stock()-> hiển thị “Tạm hết hàng — Liên hệ”.
Xử lý sản phẩm biến thể & structured data (schema)
WooCommerce tự thêm schema offers.price. Nếu chỉ thay đổi hiển thị giá (chỉ frontend), Google vẫn có thể đọc structured data do WooCommerce xuất ra. Nếu bạn muốn đồng bộ (ví dụ: ẩn giá cho Google/SEO hoặc cập nhật offers), bạn cần chỉnh structured data.
Ví dụ: thay đổi offers trong schema
add_filter('woocommerce_structured_data_product', 'devfulls_modify_structured_data', 10, 2);
function devfulls_modify_structured_data($markup, $product) {
// Nếu bạn muốn remove price (ví dụ không muốn công khai) -> unset offers
if (has_term('gia-order', 'product_cat', $product->get_id())) {
if (isset($markup['offers'])) {
unset($markup['offers']);
}
}
return $markup;
}
Lưu ý SEO: nếu bạn xóa offers.price trên page sản phẩm, Google có thể không hiển thị rich results (price snippets). Quyết định này phụ thuộc mục tiêu: show price for SEO vs require contact for price.
Kiểm tra & test
-
Test trên trang sản phẩm đơn, danh sách (loop), trang shop, widget sản phẩm.
-
Kiểm tra mobile (tel: link) và desktop.
-
Test với cache (WP Super Cache, WP Rocket) — xóa cache sau khi thay đổi.
-
Test SEO: dùng Rich Results Test của Google (để xem có offers.price hay không).
-
Test với user roles khác nhau (logout, customer, admin).
Lưu ý SEO & UX khi bạn sử dụng văn bản thay thế giá sản phẩm trong wordpress
-
Nếu ẩn giá, bù lại hãy cung cấp CTA rõ ràng: số điện thoại, form “Yêu cầu báo giá”, chat.
-
Schema: cân nhắc giữ
offersnếu bạn muốn sản phẩm hiển thị giá trong kết quả tìm kiếm. -
Heading & nội dung: trên trang sản phẩm hãy giải thích ngắn lý do không có giá để giảm bounce (ví dụ: “Giá theo số lượng / Liên hệ để nhận báo giá tốt nhất”).
-
Meta tags: update meta description nếu nhiều sản phẩm ẩn giá — tránh gây hiểu lầm.
-
Tốc độ: code đơn giản, tránh hook nặng vào mỗi request product loop gây chậm site.
Một vài đoạn code hiển thị văn bản thay thế giá sản phẩm trong wordpress tham khảo:
- Hiển thị chữ “Liên hệ” khi sản phẩm không có giá. Áp dụng cho tất cả cả mọi nơi
function devvn_wc_custom_get_price_html( $price, $product ) {
if ( ! $product->get_price() ) {
if ( $product->is_on_sale() && $product->get_regular_price() ) {
$regular_price = wc_get_price_to_display( $product, array( 'qty' => 1, 'price' => $product->get_regular_price() ) );
$price = wc_format_price_range( $regular_price, __( 'Free!', 'woocommerce' ) );
} else {
$price = '<a href="tel:0931696302" class="amount contact-price">' . __( 'Liên hệ', 'woocommerce' ) . '</a>';
}
}
return $price;
}
add_filter( 'woocommerce_get_price_html', 'devvn_wc_custom_get_price_html', 10, 2 );
- Hiển thị chữ liên hệ ở card sản phẩm. Nhưng không áp dụng cho các sản phẩm trong trang chi tiết sản phẩm
function devvn_wc_custom_get_price_html( $price, $product ) {
// Nếu đang ở trang product detail thì giữ nguyên $price gốc
if ( is_product() ) {
return $price;
}
// Chỉ những sản phẩm chưa đặt giá (get_price() == 0) mới áp dụng
if ( ! $product->get_price() ) {
// Nếu đang sale thì hiển thị "Giá sale – Free!"
if ( $product->is_on_sale() && $product->get_regular_price() ) {
$regular_price = wc_get_price_to_display( $product, array(
'qty' => 1,
'price' => $product->get_regular_price(),
) );
$price = wc_format_price_range( $regular_price, __( 'Free!', 'woocommerce' ) );
// Ngược lại: show button Liên hệ
} else {
$price = '<a href="tel:0931696302" class="button contact-price">'
. __( 'Liên hệ', 'woocommerce' )
. '</a>';
}
}
return $price;
}
add_filter( 'woocommerce_get_price_html', 'devvn_wc_custom_get_price_html', 10, 2 );
- Hiển thị button “Liên hệ” ở card sản phẩm bao gồm cả card sản phẩm trong trang chi tiết sản phẩm. Không áp dụng cho phần thông tin chi tiết sản phẩm
function devvn_wc_custom_get_price_html( $price, $product ) {
// 1. Nếu là trang detail và đúng sản phẩm đang xem ⇒ return giá gốc
if ( is_singular( 'product' ) && $product->get_id() === get_queried_object_id() ) {
return $price;
}
// 2. Còn lại: nếu sản phẩm không có giá (get_price() == 0) ⇒ hiển thị nút Liên hệ
if ( ! $product->get_price() ) {
// 2.1 Nếu sale + có regular price thì vẫn show "Giá sale – Free!"
if ( $product->is_on_sale() && $product->get_regular_price() ) {
$regular_price = wc_get_price_to_display( $product, [
'qty' => 1,
'price' => $product->get_regular_price(),
] );
$price = wc_format_price_range( $regular_price, __( 'Free!', 'woocommerce' ) );
}
// 2.2 Ngược lại show button Liên hệ
else {
$price = '<a href="tel:0931696302" class="button contact-price">'
. __( 'Liên hệ', 'woocommerce' )
. '</a>';
}
}
return $price;
}
add_filter( 'woocommerce_get_price_html', 'devvn_wc_custom_get_price_html', 10, 2 );
