Bài viết này tổng hợp các đoạn code tính năng WooCommerce PHP nâng cao nhưng cực kỳ dễ áp dụng, giúp bạn tùy biến website bán hàng chuyên nghiệp mà không cần cài đặt thêm quá nhiều plugin. Tại Phạm Hải: Blog cá nhân, chúng tôi sẽ hướng dẫn bạn chi tiết cách thay đổi nút mua hàng, thiết lập trang thanh toán, tối ưu tốc độ và thêm các trường thông tin sản phẩm một cách nhanh chóng, an toàn để nâng cao trải nghiệm người dùng và tăng tỷ lệ chuyển đổi.
Các đoạn code PHP tùy biến trang sản phẩm và trang cửa hàng thông dụng nhất
Việc tùy chỉnh WooCommerce bằng code PHP tại trang sản phẩm giúp bạn kiểm soát hoàn toàn giao diện hiển thị, từ nút mua hàng đến các thông tin chi tiết mà không làm nặng website. Dưới đây là những đoạn code WooCommerce hay dùng nhất.
Code thay đổi chữ và màu sắc nút “Thêm vào giỏ hàng” để thu hút khách hàng
Bạn có thể sử dụng filter woocommerce_product_single_add_to_cart_text để đổi chữ mặc định thành thông điệp hấp dẫn hơn nhằm tăng tỷ lệ chuyển đổi.
Code thay đổi nút “Thêm vào giỏ hàng” là một thủ thuật nhỏ nhưng mang lại hiệu quả tâm lý lớn. Thay vì dòng chữ mặc định nhàm chán, bạn có thể biến tấu chúng thành “Mua Ngay Giảm 10%” hoặc “Thêm Vào Giỏ – Freeship”. Dưới đây là đoạn mã PHP bạn cần sử dụng:
// Đổi chữ nút Thêm vào giỏ hàng ở trang chi tiết sản phẩm
add_filter( 'woocommerce_product_single_add_to_cart_text', 'phamhai_custom_cart_button_text' );
function phamhai_custom_cart_button_text() {
return __( 'Mua Ngay Giảm 10%', 'woocommerce' );
}
// Đổi chữ nút Thêm vào giỏ hàng ở trang cửa hàng (Shop/Archive)
add_filter( 'woocommerce_product_add_to_cart_text', 'phamhai_archive_custom_cart_button_text' );
function phamhai_archive_custom_cart_button_text() {
return __( 'Mua Ngay', 'woocommerce' );
}
Code thêm các trường tùy chỉnh (custom fields) vào trang sản phẩm
Để thêm trường tùy chỉnh sản phẩm WooCommerce bằng code, bạn cần kết hợp các action hook để hiển thị ô nhập liệu trong khu vực quản trị và lưu dữ liệu vào cơ sở dữ liệu.
Đôi khi, các trường thông tin mặc định của WooCommerce là không đủ. Nếu bạn bán đồ điện tử, bạn có thể cần thêm trường “Thời gian bảo hành”. Đoạn code sau giúp bạn tạo một custom field cơ bản:
// 1. Hiển thị trường tùy chỉnh trong bảng dữ liệu sản phẩm
add_action( 'woocommerce_product_options_general_product_data', 'phamhai_add_custom_field' );
function phamhai_add_custom_field() {
woocommerce_wp_text_input( array(
'id' => '_thoi_gian_bao_hanh',
'label' => __( 'Thời gian bảo hành', 'woocommerce' ),
'placeholder' => 'VD: 12 tháng',
'desc_tip' => 'true',
'description' => __( 'Nhập thời gian bảo hành cho sản phẩm này.', 'woocommerce' )
) );
}
// 2. Lưu dữ liệu trường tùy chỉnh
add_action( 'woocommerce_process_product_meta', 'phamhai_save_custom_field' );
function phamhai_save_custom_field( $post_id ) {
$custom_field_value = isset( $_POST['_thoi_gian_bao_hanh'] ) ? $_POST['_thoi_gian_bao_hanh'] : '';
update_post_meta( $post_id, '_thoi_gian_bao_hanh', sanitize_text_field( $custom_field_value ) );
}
Code tùy chỉnh cách hiển thị thuộc tính của sản phẩm (ẩn/hiện, thay đổi vị trí)
Sử dụng filter woocommerce_display_product_attributes là cách tối ưu nhất để code tùy chỉnh hiển thị thuộc tính sản phẩm WooCommerce theo đúng ý định thiết kế của bạn.
Khi quản lý Thuộc tính sản phẩm và Biến thể sản phẩm, đôi khi bạn muốn ẩn một số thuộc tính nội bộ không cho khách hàng thấy ở tab “Thông tin bổ sung”. Bạn có thể áp dụng đoạn mã sau:
add_filter( 'woocommerce_display_product_attributes', 'phamhai_hide_specific_attributes', 10, 2 );
function phamhai_hide_specific_attributes( $product_attributes, $product ) {
// Thay 'pa_mau-sac' bằng slug thuộc tính bạn muốn ẩn
if ( isset( $product_attributes['pa_mau-sac'] ) ) {
unset( $product_attributes['pa_mau-sac'] );
}
return $product_attributes;
}
Code thay đổi tiêu đề “Sản phẩm liên quan” thành nội dung bán hàng hấp dẫn hơn
Đổi tiêu đề “Sản phẩm liên quan” thành “Khách hàng cũng mua” giúp kích thích nhu cầu mua sắm bằng cách sử dụng filter woocommerce_product_related_products_heading.
Một tiêu đề mang tính gợi ý mạnh mẽ sẽ mang lại hiệu quả upsell tốt hơn. Hãy chèn đoạn mã này để thay đổi tiêu đề mặc định:
add_filter( 'woocommerce_product_related_products_heading', 'phamhai_rename_related_products' );
function phamhai_rename_related_products() {
return __( 'Khách hàng thường mua kèm với', 'woocommerce' );
}
Code tự động thêm một sản phẩm vào giỏ hàng khi khách truy cập
Tính năng này cực kỳ hữu ích cho các chiến dịch tặng quà miễn phí. Bạn có thể dùng action template_redirect để tự động add sản phẩm vào giỏ hàng.
Nếu bạn đang chạy chương trình “Tặng kèm túi tote cho mọi đơn hàng”, đoạn code dưới đây sẽ giúp bạn tự động hóa quy trình đó mà không cần khách hàng phải thao tác:
add_action( 'template_redirect', 'phamhai_auto_add_product_to_cart' );
function phamhai_auto_add_product_to_cart() {
if ( ! is_admin() ) {
$product_id = 123; // Thay 123 bằng ID sản phẩm quà tặng
$found = false;
// Kiểm tra xem sản phẩm đã có trong giỏ chưa
if ( sizeof( WC()->cart->get_cart() ) > 0 ) {
foreach ( WC()->cart->get_cart() as $cart_item_key => $values ) {
$_product = $values['data'];
if ( $_product->get_id() == $product_id )
$found = true;
}
// Nếu chưa có thì thêm vào
if ( ! $found )
WC()->cart->add_to_cart( $product_id );
}
}
}
Nâng cao trải nghiệm thanh toán với code tùy biến trang giỏ hàng và checkout
Tối ưu hóa Quy trình thanh toán là yếu tố sống còn để giảm tỷ lệ bỏ giỏ hàng. Việc áp dụng Code tùy biến trang thanh toán WooCommerce giúp biểu mẫu trở nên gọn gàng, chuyên nghiệp và thân thiện hơn với người dùng.
Code tùy biến trang thanh toán WooCommerce: thêm, xóa hoặc sắp xếp lại các trường
Bằng cách can thiệp vào filter woocommerce_checkout_fields, bạn có thể dễ dàng loại bỏ các trường không cần thiết như mã bưu điện (Postcode) hoặc tên công ty để làm ngắn biểu mẫu.
Nhiều khách hàng cảm thấy phiền phức khi phải điền quá nhiều thông tin. Tại Việt Nam, trường mã bưu điện thường không bắt buộc. Bạn có thể ẩn nó đi bằng đoạn mã sau:
add_filter( 'woocommerce_checkout_fields' , 'phamhai_remove_checkout_fields' );
function phamhai_remove_checkout_fields( $fields ) {
unset($fields['billing']['billing_company']); // Ẩn tên công ty
unset($fields['billing']['billing_postcode']); // Ẩn mã bưu điện
unset($fields['billing']['billing_address_2']); // Ẩn địa chỉ dòng 2
return $fields;
}
Code thêm nút “Mua Ngay” (Buy Now) để chuyển hướng thẳng đến trang thanh toán
Nút “Mua Ngay” giúp rút ngắn hành trình mua hàng. Đoạn code dưới đây sẽ tạo một nút chuyển hướng thẳng đến trang checkout thay vì chỉ thêm vào giỏ.
Tính năng này đặc biệt phù hợp cho các landing page bán sản phẩm đơn lẻ.
add_action( 'woocommerce_after_add_to_cart_button', 'phamhai_add_buy_now_button' );
function phamhai_add_buy_now_button() {
global $product;
$checkout_url = wc_get_checkout_url();
echo '<button type="submit" name="add-to-cart" value="' . esc_attr( $product->get_id() ) . '" class="single_add_to_cart_button button alt phamhai-buy-now" id="buy_now_button" data-checkout_url="' . esc_url( $checkout_url ) . '">Mua Ngay</button>';
}
(Lưu ý: Bạn có thể cần thêm một chút JavaScript để xử lý sự kiện click chuyển hướng trực tiếp).
Code thay đổi chữ “Miễn phí” của sản phẩm giá 0đ thành “Giá liên hệ”
Đối với các sản phẩm chưa có giá hoặc giá biến động, việc hiển thị “Giá liên hệ” sẽ chuyên nghiệp hơn rất nhiều so với chữ “Miễn phí” mặc định của hệ thống.
add_filter( 'woocommerce_empty_price_html', 'phamhai_custom_empty_price_message' );
add_filter( 'woocommerce_variable_empty_price_html', 'phamhai_custom_empty_price_message' );
function phamhai_custom_empty_price_message() {
return 'Giá liên hệ';
}
Code thêm ghi chú, hậu tố vào sau giá sản phẩm (ví dụ: “Đã bao gồm VAT”)
Thêm hậu tố giá giúp minh bạch thông tin chi tiết chi phí cho khách hàng, tránh những hiểu lầm không đáng có trong quá trình thanh toán.
add_filter( 'woocommerce_get_price_html', 'phamhai_add_price_suffix', 100, 2 );
function phamhai_add_price_suffix( $price, $product ) {
$suffix = ' <span class="price-suffix">(Đã bao gồm VAT)</span>';
return $price . $suffix;
}
Hướng dẫn cách thêm code PHP vào WooCommerce an toàn và đúng cách
Để Cách thêm code PHP vào WooCommerce không làm sập website, bạn tuyệt đối không được chèn trực tiếp vào các file core (lõi) mà phải dùng Child Theme hoặc plugin chuyên dụng.
Phương pháp 1: Sử dụng file functions.php của Child Theme (Khuyến khích)
Chèn code vào file functions.php của Child Theme đảm bảo các tùy chỉnh của bạn không bị mất đi khi bạn tiến hành cập nhật giao diện gốc lên phiên bản mới.
Tại Phạm Hải: Blog cá nhân, chúng tôi luôn khuyến khích các nhà phát triển sử dụng phương pháp này. Bạn chỉ cần vào WordPress Dashboard, điều hướng đến mục Giao diện > Tùy chỉnh giao diện (Theme File Editor), chọn file functions.php của Child Theme và dán đoạn mã vào cuối file. Cuối cùng, nhấn “Cập nhật tập tin” để lưu lại.
Phương pháp 2: Sử dụng plugin Code Snippets (An toàn cho người mới bắt đầu)
Nếu bạn không rành về kỹ thuật, Code Snippets plugin là giải pháp hoàn hảo để quản lý các đoạn mã PHP ngay trong trang quản trị mà không cần đụng đến file hệ thống.
Sử dụng Plugin này giúp bạn dễ dàng bật/tắt từng đoạn code tính năng woocommerce php giống như cách quản lý các plugin con. Nếu một đoạn mã gây lỗi, plugin sẽ tự động vô hiệu hóa nó, giúp trang web của bạn luôn an toàn.
Những lưu ý quan trọng cần biết trước khi chèn code để tránh gây lỗi website
Luôn sao lưu (backup) toàn bộ website và kiểm tra thông số PHP limit trước khi thực thi bất kỳ đoạn mã mới nào để phòng tránh lỗi trắng trang (White Screen of Death).
- Sao lưu cơ sở dữ liệu: Thao tác bắt buộc trước khi chỉnh sửa.
- Sử dụng môi trường Staging: Hãy thử nghiệm code trên trang web nháp trước khi đưa lên trang chính thức.
- Hiểu rõ hệ thống: Nếu bạn chưa nắm rõ kiến thức nền tảng, việc tìm hiểu woocommerce là gì sẽ giúp bạn làm chủ hệ thống này tốt hơn và tránh các sai sót cơ bản.
Mở rộng tính năng và tối ưu tốc độ WooCommerce bằng code
Việc Mở rộng tính năng WooCommerce với code không chỉ giúp đa dạng hóa chức năng mà còn hỗ trợ Tối ưu hiệu suất mạnh mẽ hơn rất nhiều so với việc lạm dụng cài đặt các tiện ích mở rộng của bên thứ ba.
Giới thiệu về WooCommerce Hooks (Actions và Filters) – Chìa khóa để tùy biến mọi tính năng
Sử dụng WooCommerce hooks và filters là tiêu chuẩn kỹ thuật để can thiệp vào mã nguồn. Trong đó, WooCommerce Actions dùng để chèn nội dung mới, còn WooCommerce Filters dùng để sửa đổi dữ liệu có sẵn.
| Loại Hook | Chức năng chính | Ví dụ tiêu biểu |
|---|---|---|
| Actions | Thêm nội dung, thực thi chức năng tại một vị trí cụ thể. | woocommerce_before_single_product |
| Filters | Lọc, thay đổi hoặc định dạng lại dữ liệu trước khi hiển thị. | woocommerce_get_price_html |
Hiểu rõ WooCommerce Hooks là bước đệm quan trọng. Để thiết kế hệ thống dữ liệu phức tạp hơn trên website bán hàng, bạn có thể tham khảo thêm cách tạo custom post type wordpress code kết hợp với WooCommerce.
Code tối ưu tốc độ bằng cách loại bỏ các CSS và JS không cần thiết của WooCommerce
Tối ưu tốc độ WooCommerce bằng code thông qua việc vô hiệu hóa các file script trên các trang không phục vụ mục đích bán hàng (như trang Giới thiệu, Liên hệ) giúp giảm tải đáng kể cho server.
WooCommerce mặc định tải CSS và JS trên toàn bộ website. Để ngăn chặn điều này, hãy dùng đoạn mã sau:
add_action( 'wp_enqueue_scripts', 'phamhai_dequeue_woocommerce_styles_scripts', 99 );
function phamhai_dequeue_woocommerce_styles_scripts() {
// Nếu không phải trang liên quan đến WooCommerce thì loại bỏ scripts
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
}
}
}
Tổng hợp các đoạn Shortcode WooCommerce hay dùng để hiển thị sản phẩm linh hoạt
Shortcode cho phép bạn gọi và hiển thị danh sách sản phẩm ở bất kỳ đâu trên website như trang chủ, bài viết blog hay landing page một cách cực kỳ linh hoạt.
Các shortcode này thường hoạt động dựa trên các truy vấn ngầm của hệ thống, tương tự như việc ứng dụng wp_query vòng lặp wordpress để lấy dữ liệu bài viết chuẩn xác. Dưới đây là một số shortcode cơ bản:
[products limit="4" columns="4" orderby="popularity"]: Hiển thị 4 sản phẩm bán chạy nhất.[featured_products limit="8" columns="4"]: Hiển thị các sản phẩm nổi bật.[sale_products limit="4"]: Hiển thị các sản phẩm đang giảm giá.
Việc sử dụng các đoạn code tính năng WooCommerce PHP là một phương pháp vô cùng mạnh mẽ để tùy biến sâu và tối ưu hóa cửa hàng trực tuyến của bạn. Thay vì phụ thuộc vào hàng tá plugin có thể làm chậm tốc độ tải trang web, bạn hoàn toàn có thể chủ động kiểm soát, tùy biến và nâng cao các tính năng cốt lõi. Tại Phạm Hải: Blog cá nhân, chúng tôi hy vọng với những đoạn mã an toàn và chuẩn xác được tổng hợp trong bài viết này, bạn sẽ dễ dàng áp dụng thành công để xây dựng một website bán hàng chuyên nghiệp, mượt mà và mang lại hiệu quả kinh doanh vượt trội.
Bạn có cần thêm đoạn code cho một tính năng cụ thể nào không? Hãy để lại yêu cầu trong phần bình luận bên dưới, chúng tôi sẽ hỗ trợ bạn!
Lưu ý: Các thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.
