Việc tùy biến WooCommerce là chìa khóa để xây dựng một cửa hàng trực tuyến độc đáo và hiệu quả. Các hook (action và filter) chính là công cụ mạnh mẽ giúp bạn định hình lại mọi khía cạnh của trang web mà không cần chỉnh sửa trực tiếp mã nguồn cốt lõi. Hiểu rõ “tại sao” và “ý nghĩa” đằng sau mỗi tùy chỉnh sẽ giúp bạn đưa ra quyết định sáng suốt, tối ưu hóa trải nghiệm người dùng và thúc đẩy doanh số.

Tại sao cần tùy chỉnh hiển thị sản phẩm?

Tùy chỉnh cách sản phẩm được hiển thị không chỉ là về thẩm mỹ mà còn ảnh hưởng trực tiếp đến hành vi của khách hàng. Một giao diện gọn gàng, dễ điều hướng sẽ giữ chân khách hàng lâu hơn và khuyến khích họ khám phá.

Loại bỏ số lượng kết quả sản phẩm

Theo mặc định, WooCommerce hiển thị số lượng sản phẩm tìm thấy hoặc tổng số sản phẩm trong danh mục. Việc loại bỏ thông tin này giúp giao diện trở nên gọn gàng hơn, giảm bớt các yếu tố gây nhiễu, đặc biệt khi số lượng sản phẩm không phải là yếu tố then chốt để khách hàng đưa ra quyết định mua sắm.

function woocommerce_result_count() {
    return;
}

Ý nghĩa: Tạo không gian trực quan thoáng đãng, tập trung sự chú ý của người dùng vào chính các sản phẩm thay vì số liệu thống kê. Điều này đặc biệt hữu ích cho các cửa hàng có ít sản phẩm hoặc muốn tạo cảm giác độc quyền.

Xóa tùy chọn sắp xếp mặc định

Các tùy chọn sắp xếp mặc định như “Sắp xếp theo độ phổ biến”, “Sắp xếp theo giá” có thể hữu ích, nhưng đôi khi bạn muốn kiểm soát hoàn toàn thứ tự hiển thị sản phẩm. Việc loại bỏ chúng cho phép bạn áp dụng chiến lược sắp xếp của riêng mình, ví dụ như dựa trên sản phẩm mới nhất, sản phẩm nổi bật, hoặc tích hợp các thuật toán đề xuất thông minh.

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Ý nghĩa: Đảm bảo khách hàng luôn thấy sản phẩm theo chiến lược kinh doanh của bạn, có thể là đẩy mạnh sản phẩm mới, sản phẩm bán chạy hoặc các mặt hàng có lợi nhuận cao.

Ẩn tiêu đề trang shop

Nếu theme của bạn đã có một tiêu đề trang được thiết kế riêng hoặc bạn muốn tạo một trải nghiệm trang shop liền mạch hơn mà không có tiêu đề mặc định của WooCommerce, việc ẩn nó là cần thiết.

add_filter('woocommerce_show_page_title', function(){
    return false;
});

Ý nghĩa: Tránh trùng lặp tiêu đề, tạo giao diện chuyên nghiệp và đồng bộ hơn với thiết kế tổng thể của website.

Điều chỉnh số sản phẩm trên mỗi hàng và mỗi trang

Mặc định WooCommerce hiển thị 4 sản phẩm trên một hàng và một số lượng sản phẩm nhất định trên mỗi trang. Tùy chỉnh các giá trị này giúp bạn tối ưu hóa bố cục cho nhiều loại màn hình và kiểm soát độ dài của trang.

// Thay đổi số sản phẩm trên 1 hàng
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 3; // 3 sản phẩm trên 1 hàng
    }
}

// Thay đổi số sản phẩm trên 1 trang
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 ); // 24 sản phẩm trên 1 trang

Ý nghĩa: Cải thiện trải nghiệm duyệt web, cân bằng giữa tốc độ tải trang và số lượng sản phẩm hiển thị, giúp khách hàng dễ dàng tìm kiếm và xem xét sản phẩm.

Tối ưu trang sản phẩm và quy trình mua hàng

Các tùy chỉnh trên trang sản phẩm đơn và quy trình mua hàng có thể tác động lớn đến tỷ lệ chuyển đổi.

Gỡ bỏ nút "Thêm vào giỏ hàng" ở trang danh mục

Trong một số trường hợp, bạn muốn khách hàng phải vào trang chi tiết sản phẩm để tìm hiểu kỹ hơn trước khi thêm vào giỏ. Điều này đặc biệt hữu ích cho các sản phẩm phức tạp, cần nhiều thông tin hoặc có các biến thể đa dạng.

function remove_loop_button(){
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action('init','remove_loop_button');

Ý nghĩa: Hướng khách hàng đến trang chi tiết sản phẩm, nơi họ có thể tìm hiểu sâu hơn, xem nhiều hình ảnh và mô tả chi tiết, từ đó đưa ra quyết định mua hàng có cân nhắc hơn, giảm tỷ lệ hoàn trả.

Xóa thông tin SKU, danh mục, thẻ trên trang sản phẩm đơn

Các thông tin như SKU (mã sản phẩm), danh mục và thẻ có thể không cần thiết hoặc gây nhiễu cho khách hàng trên trang sản phẩm đơn. Việc loại bỏ chúng giúp trang gọn gàng hơn và tập trung vào các yếu tố quan trọng như hình ảnh, mô tả và nút mua hàng.

remove_action('woocommerce_single_product_summary','woocommerce_template_single_meta',40);

Ý nghĩa: Đơn giản hóa trang sản phẩm, giúp khách hàng tập trung vào giá trị cốt lõi của sản phẩm và hành động mua hàng.

Ẩn các tab, sản phẩm upsell và liên quan

Việc loại bỏ các tab thông tin sản phẩm, sản phẩm upsell (bán thêm) và related products (sản phẩm liên quan) có thể được áp dụng khi bạn muốn kiểm soát hoàn toàn luồng thông tin hoặc không muốn làm phân tâm khách hàng khỏi sản phẩm chính.

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Ý nghĩa: Giúp khách hàng tập trung vào sản phẩm đang xem, đặc biệt hữu ích khi bạn có chiến lược bán chéo/bán thêm riêng hoặc muốn hướng người dùng đến một sản phẩm cụ thể.

Tùy chỉnh hiển thị sản phẩm liên quan

Nếu bạn vẫn muốn hiển thị sản phẩm liên quan nhưng muốn kiểm soát số lượng và bố cục của chúng, hook này cho phép bạn làm điều đó.

add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args' );
function jk_related_products_args( $args ) {
    $args['posts_per_page'] = 4; // Số product hiển thị
    $args['columns'] = 4; // Số product trên 1 dòng
    return $args;
}

Ý nghĩa: Đề xuất sản phẩm liên quan một cách hiệu quả hơn, tăng cơ hội bán thêm mà không làm quá tải giao diện.

Nâng cao trải nghiệm thanh toán

Quy trình thanh toán là điểm chạm quan trọng nhất, nơi khách hàng đưa ra quyết định cuối cùng. Tối ưu hóa nó có thể cải thiện đáng kể tỷ lệ chuyển đổi.

Loại bỏ tiêu đề phí vận chuyển

Trong trang giỏ hàng hoặc thanh toán, WooCommerce thường hiển thị tiêu đề “via [phương thức vận chuyển]” bên cạnh phí vận chuyển. Loại bỏ dòng này giúp giao diện gọn gàng và dễ đọc hơn.

add_filter('woocommerce_order_shipping_to_display_shipped_via', '__return_false');

Ý nghĩa: Tạo giao diện thanh toán sạch sẽ, tránh gây nhầm lẫn hoặc cảm giác phức tạp cho khách hàng.

Yêu cầu giá trị đơn hàng tối thiểu

Để đảm bảo lợi nhuận hoặc bù đắp chi phí vận hành/vận chuyển, bạn có thể thiết lập giá trị đơn hàng tối thiểu để khách hàng có thể tiến hành thanh toán.

add_action( 'woocommerce_checkout_process', 'devvn_wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart', 'devvn_wc_minimum_order_amount' );
function devvn_wc_minimum_order_amount() {
    $minimum = '100000'; // Giá trị tối thiểu: 100.000 VNĐ
    $checkout_minimum_price_mess = 'Bạn cần có hóa đơn trên %s để tiếp tục đặt hàng. Tổng giá trị hiện tại là %s.';
    if ( WC()->cart->total < $minimum ) {
        if( is_cart() ) {
            wc_print_notice(
                sprintf( $checkout_minimum_price_mess,
                    wc_price( $minimum ),
                    wc_price( WC()->cart->total )
                ), 'error'
            );
        } else {
            wc_add_notice(
                sprintf( $checkout_minimum_price_mess,
                    wc_price( $minimum ),
                    wc_price( WC()->cart->total )
                ), 'error'
            );
        }
    }
}

Ý nghĩa: Bảo vệ biên lợi nhuận của cửa hàng, khuyến khích khách hàng mua nhiều sản phẩm hơn trong một lần để đạt mức tối thiểu.

Tùy chọn không bắt buộc nhập email

Trong một số trường hợp, để giảm rào cản thanh toán và tăng tỷ lệ chuyển đổi, bạn có thể cho phép khách hàng không bắt buộc phải nhập địa chỉ email. Điều này hữu ích cho các mô hình kinh doanh không yêu cầu email để hoàn tất đơn hàng hoặc khi bạn thu thập thông tin liên hệ qua các kênh khác.

add_filter( 'woocommerce_checkout_fields', 'devvn_custom_override_checkout_fields', 9999 );
function devvn_custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_email']['required'] = false;
    return $fields;
}

Ý nghĩa: Tăng tỷ lệ chuyển đổi bằng cách loại bỏ một trường bắt buộc, đặc biệt với khách hàng muốn mua hàng nhanh chóng mà không muốn chia sẻ quá nhiều thông tin.

Xác thực số điện thoại chuẩn Việt Nam

Đảm bảo thông tin liên lạc chính xác là vô cùng quan trọng cho việc giao hàng và hỗ trợ khách hàng. Hook này giúp xác thực số điện thoại theo định dạng chuẩn Việt Nam (10-11 số, bắt đầu bằng số 0).

add_action('woocommerce_checkout_process', 'devvn_validate_phone_field_process');
function devvn_validate_phone_field_process() {
    $billing_phone = filter_input(INPUT_POST, 'billing_phone');
    if ( ! (preg_match('/^0([0-9]{9,10})+$/D', $billing_phone)) ){
        wc_add_notice( "Xin nhập đúng <strong>số điện thoại</strong> của bạn", 'error' );
    }
}

Ý nghĩa: Giảm thiểu lỗi giao hàng, cải thiện hiệu quả vận hành và nâng cao trải nghiệm khách hàng thông qua việc liên lạc chính xác.

Kết luận

Việc tận dụng các hook trong WooCommerce không chỉ là một kỹ thuật lập trình mà còn là một chiến lược kinh doanh. Thông qua việc tùy chỉnh hiển thị, tối ưu hóa trang sản phẩm và quy trình thanh toán, bạn có thể tạo ra một cửa hàng trực tuyến không chỉ đẹp mắt mà còn hoạt động hiệu quả, đáp ứng chính xác nhu cầu của khách hàng và mục tiêu kinh doanh.

“Tips AI Tech” khuyến nghị bạn không ngừng tìm hiểu sâu hơn về kiến trúc của WooCommerce và các hook có sẵn. Việc thử nghiệm và điều chỉnh liên tục dựa trên dữ liệu người dùng sẽ giúp bạn tối ưu hóa cửa hàng của mình một cách thông minh và bền vững. Hãy bắt đầu áp dụng các hook này ngay hôm nay để nâng tầm trải nghiệm mua sắm trên website của bạn!