Hiển thị sản phẩm trong WooCommerce sao cho đẹp mắt và dễ tìm kiếm là một trong những điểm quan trọng hàng đầu. Khách hàng của bạn phải xem được thông tin sản phẩm dễ dàng và đầy đủ mới có thể đi đến quyết định mua hàng.
Ở bài viết này, mình sẽ chia sẻ cách tùy chỉnh để hiển thị sản phẩm theo danh mục WordPress trong WooCommerce nhé!
Tầm quan trọng của danh mục sản phẩm
Khi phân loại các sản phẩm thành danh mục (hay category), khách hàng của bạn sẽ dễ dàng tìm kiếm được mặt hàng mà họ mong muốn. Đây cũng là cách giúp bạn cải thiện được điều hướng website, từ đó tăng tỷ lệ chuyển đổi lên rất nhiều.
Khi không thể tìm được sản phẩm theo nhu cầu, khách hàng sẽ chọn rời bỏ website.
Nếu bạn có thêm chức năng tìm kiếm, lọc hoặc sắp xếp vào bảng thì khách hàng nhanh chóng tìm thấy ngay sản phẩm mà họ cần trong vài giây, không cần phải lướt một danh sách dài.
Hướng dẫn hiển thị sản phẩm trong WooCommerce
Bước đầu tiên, bạn cần cài đặt và kích hoạt plugin WooCommerce bằng cách điều hướng tới Plugins trong trang quản trị WordPress, chọn Add New. Trong ô tìm kiếm, bạn nhập WooCommerce. Khi tìm thấy plugin này, hãy nhấp chọn Install Now (Cài đặt ngay) -> Activate (Kích hoạt).
Nếu đã có plugin WooCommerce hoặc sau khi kích hoạt xong, bạn thực hiện tiếp như sau:
Thêm sản phẩm
Ở trên trang quản trị WordPress, điều hướng đến Products, chọn Add Product (Thêm sản phẩm). Lúc này, hãy điền các thông tin chi tiết của sản phẩm vào, gồm có tên, mô tả, giá cả, hình ảnh, danh mục và các tùy chọn khác.
Sau khi điền xong, bạn nhấp vào Publish (Xuất bản) để lưu sản phẩm.
Hiển thị sản phẩm trong WooCommerce
Để hiển thị sản phẩm trên trang chủ hoặc trang sản phẩm, bạn làm theo các bước này:
- Từ trang quản trị WordPress, điều hướng đến Appearance (Giao diện) -> Customize (Tùy chỉnh)
- Trong phần Homepage Settings (Cài đặt trang chủ) hoặc phần tương tự, bạn chọn hiển thị sản phẩm theo cách nào (mới nhất, phổ biến nhất) hoặc chọn một trang cụ thể để làm trang sản phẩm.
- Lưu lại các thay đổi.
Thêm Widget sản phẩm (không bắt buộc)
- Điều hướng đến Appearance (Giao diện) và chọn Widgets
- Kéo và thả widget Products (Sản phẩm) vào vùng sidebar hoặc phần nào đó của trang web.
- Chọn tùy chọn hiển thị, ví dụ như Recent Products (Sản phẩm gần đây), Best Selling”(Bán chạy nhất), hoặc Featured Products (Sản phẩm nổi bật).
- Lưu các thay đổi của bạn.
Chi tiết cách hiển thị sản phẩm trong WooCommerce theo danh mục
Nếu bạn muốn sắp xếp các sản phẩm được hiển thị theo danh mục (category) thì có thể làm theo 1 trong 4 cách sau đây.
Cách 1: Sử dụng Shortcode
WooCommerce cung cấp một số shortcode cho phép bạn hiển thị sản phẩm dựa trên danh mục cụ thể. Shortcode đó là:
Bạn hãy thay chỗ ten-danh-muc bằng slug của danh mục muốn hiển thị.
Cách 2: Sử dụng Widget
- Từ trang quản trị WordPress, bạn điều hướng đến Appearance (Giao diện) -> Widgets.
- Tại đây, bạn tìm widget có tên là WooCommerce Product Categories (Danh mục sản phẩm WooCommerce) và kéo nó vào vùng sidebar hoặc vùng widget khác trên trang web.
- Chọn danh mục bạn muốn hiển thị sản phẩm.
Cách 3: Tại trang sản phẩm và sử dụng Shortcode
- Từ trang quản trị WordPress, điều hướng đến Pages (Trang) -> Add New (Thêm mới) để tạo một trang mới
- Đặt tên cho trang này, có thể là “sản phẩm” hoặc tên nào đó mà bạn muốn
- Sử dụng shortcode WooCommerce dưới đây để hiển thị sản phẩm theo danh mục trên trang:
- Hãy thay ten-danh-muc bằng slug bạn muốn hiển thị.
Cách 4: Tùy chỉnh trang danh mục sản phẩm
Cách này chỉ áp dụng được cho một số theme nhất định mà có trang danh mục sản phẩm tùy chỉnh. Nếu theme của bạn có tính năng này thì hãy áp dụng.
Cách chèn nội dung vào trang chi tiết sản phẩm trong WooCommerce
Thêm mô tả sản phẩm
Để hiển thị nội dung chi tiết của sản phẩm trong WooCommerce, bạn có thể sử dụng trình soạn thảo WordPress để thêm nội dung HTML hoặc văn bản đơn giản.
- Bước 1: Đăng nhập vào trang quản trị WordPress
- Bước 2: Chọn sản phẩm để chỉnh sửa: Điều hướng đến Products (Sản phẩm) trong thanh bên trái. Chọn sản phẩm mà bạn muốn chỉnh sửa.
- Bước 3: Chèn nội dung vào mô tả sản phẩm: Trong trang chỉnh sửa sản phẩm, bạn sẽ thấy một ô văn bản lớn là Product Description (Mô tả sản phẩm) hoặc Product Short Description (Mô tả ngắn sản phẩm), tùy thuộc từng theme và cài đặt cụ thể. Chèn nội dung chi tiết sản phẩm vào ô văn bản này. Bạn có thể sử dụng trình soạn thảo để định dạng văn bản, thêm hình ảnh, liên kết… tại đây. Bên cạnh đó, bạn cũng có thể sử dụng các tab khác như Product Data (Dữ liệu sản phẩm) để thêm thông tin cụ thể về sản phẩm.
- Bước 4: Lưu lại thông tin sản phẩm: Sau khi bạn đã chèn nội dung mong muốn, hãy nhấp vào nút Update (Cập nhật) hoặc Publish (Xuất bản) để lưu lại thay đổi.
- Bước 5: Kiểm tra sản phẩm: Sau khi đã lưu lại, hãy truy cập vào trang sản phẩm trên website để kiểm tra xem việc chèn nội dung chi tiết vào trang sản phẩm trong WooCommerce đã thành công hay chưa.
Thêm thông tin đồng loạt cho tất cả sản phẩm
Nếu bạn muốn bổ sung nội dung đồng loạt cho tất cả sản phẩm đang có trên website như khuyến mãi, ưu đãi, thông tin vận chuyển, giao hàng, bảo hành,… thì làm theo hướng dẫn sau của mình:
Bước 1. Tạo UX Blocks với tên là Block Custom. Kế tiếp, bạn nhấn vào Edit with UX Builder để thêm thông tin vào ô này. Ví dụ mình thêm icon và thông tin như sau:
Những nội dung này chỉ là mình ví dụ, bạn có thể linh hoạt thay đổi icon và text tùy theo nhu cầu nhé.
Nếu bạn muốn căn giữa thì thêm class align-middle là được.
Tiếp theo, bạn bấm nút Apply -> Update.
Bước 2. Bạn điều hướng lại vào Appearance (Giao diện) -> Theme File Editor -> Chọn theme đang kích hoạt -> function.php -> thêm mã code vào ô và bấm chọn Cập nhật tập tin.
Đoạn code dưới này mình sử dụng tên
Block "block-custom" not found
, bạn chỉ cần đổi block-custom thành tên UX Blocks của bạn là được:// Link: https://miliweb.vn/hien-thi-san-pham-trong-woocommerce.html function add_custom_box_miliweb() { echo do_shortcode('Block "block-custom" not found
'); } add_action('woocommerce_single_product_summary', 'add_custom_box_miliweb', 10, 2);Thêm thông tin riêng cho từng sản phẩm
Nếu mỗi sản phẩm của bạn lại có những lựa chọn hay chương trình khuyến mãi khác nhau thì làm thế nào để tùy biến cho từng sản phẩm? Hãy thử cách sử dụng field, hook có sẵn của WooCommerce nhé.
Thêm field vào trang quản trị sản phẩm
Sản phẩm mà mình lấy ví dụ sẽ như sau:
Đầu tiên, để thêm các trường (field) vào sản phẩm trong trang quản trị, bạn thêm đoạn code dưới đây vào file function.php nhé:
// Thêm field vào quản trị sản phẩm
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_add_fields');
function woocommerce_product_add_fields()
{
global $woocommerce;
echo '<div class="product_custom_field">';
// Custom Product Text Field
woocommerce_wp_text_input(
array(
'id' => '_product_text_field_nhan_hang_1h',
'placeholder' => 'Ghi chú',
'label' => __('Ghi chú (1h)', 'hdev'),
'placeholder' => __('Nhận hàng trong 1 giờ', 'hdev'),
'desc_tip' => 'true',
'description' => 'Không nhập lấy mặc định'
)
);
//Text Area Field - Khuyến mãi
woocommerce_wp_textarea_input(
array(
'id' => '_product_textarea_km',
'label' => __( 'Khuyến mãi và Ưu đãi', 'hdev' ),
'placeholder' => '',
)
);
//Text Area Field - Trong hộp có
woocommerce_wp_textarea_input(
array(
'id' => '_product_textarea_in_box',
'label' => __( 'Trong hộp gồm', 'hdev' ),
'placeholder' => '',
)
);
echo '</div>';
}
Để lưu các giá trị nhập vào, tiếp tục thêm code sau:
function woocommerce_product_fields_save($post_id) {
// Lưu - Giao hàng 1h
$woocommerce_product_text_field_1h = $_POST['_product_text_field_nhan_hang_1h'];
if (!empty($woocommerce_product_text_field_1h))
update_post_meta($post_id, '_product_text_field_nhan_hang_1h', esc_attr($woocommerce_product_text_field_1h));
// Lưu - Khuyến mãi
$woocommerce_procut_textarea_km = $_POST['_product_textarea_km'];
if (!empty($woocommerce_procut_textarea_km))
update_post_meta($post_id, '_product_textarea_km', esc_html($woocommerce_procut_textarea_km));
// Lưu - Tron hộp
$woocommerce_procut_textarea_in_box = $_POST['_product_textarea_in_box'];
if (!empty($woocommerce_procut_textarea_in_box))
update_post_meta($post_id, '_product_textarea_in_box', esc_html($woocommerce_procut_textarea_in_box));
}Tiếp theo, bạn hãy hook nó như sau:
add_action('woocommerce_process_product_meta', 'woocommerce_product_fields_save');Đến đây, bạn đã hoàn thành việc thêm field vào trang quản trị sản phẩm. Bạn chỉ cần bấm F5 và thêm mới hoặc edit sản phẩm để xem kết quả.
Hiển thị sản phẩm trong WooCommerce ra ngoài giao diện của người dùng
Để hiển thị sản phẩm trong WooCommerce ra ngoài front-end. Ở ví dụ dưới đây, mình chọn vị trí xuất hiện là ở phía dưới giá, bên cạnh slide hình ảnh sản phẩm.
Nếu không muốn đụng tới theme gốc, bạn có thể sử dụng child theme. Trong hướng dẫn này, bạn chỉ viết code vào 1 file funtions.php.
Để tại funtion hiển thị ra front-end, bạn thêm đoạn code sau:
function display_front_end() {
// Hiển thị nhận hàng 1 h
$product_1h = get_post_meta( get_the_ID(), '_product_text_field_nhan_hang_1h', true );
if ( ! empty( $product_1h ) ) {
echo '<span class="giao-hang-1h">'.$product_1h.'</span>';
}
// Hiển thị Ưu đãi - Khuyến mãi
$product_km_ud = get_post_meta( get_the_ID(), '_product_textarea_km', true );
if ( ! empty( $product_km_ud ) ) {
$arr_product_km_ud = explode(";",$product_km_ud);
echo '<div class="km-ud"><h3>Khuyến mãi và Ưu đãi</h3>';
foreach ($arr_product_km_ud as $value) {
echo '<span>'.$value.'</span><br/>';
}
echo '</div>';
}
// Hiển thị Trong hộp gồm
$product_in_box = get_post_meta( get_the_ID(), '_product_textarea_in_box', true );
if ( ! empty( $product_in_box ) ) {
$arr_product_inbox = explode(";",$product_in_box);
echo '<div class="in-box"><h3>Trong hộp gồm</h3>';
foreach ($arr_product_inbox as $value) {
echo '<span>'.$value.'</span><br/>';
}
echo '</div>';
}
}Thêm hàm hook hiển thị:
add_action('woocommerce_single_product_summary', 'display_front_end');Đến đây, bạn đã hiển thị sản phẩm trong WooCommerce một cách chi tiết ra giao diện người dùng thành công. Lưu ý rằng phần hiển trị ưu đãi và trong hộp mình có dùng textarea để nhập nên để tách các mục đầu dòng, khi nhập bạn nhớ thêm dấu ; nữa. Ngoài ra, đoạn code để hiển thị ra giao diện người dùng mình có foreach thêm.
Mình tin rằng đến đây các bạn đã biết cách thêm và hiển thị sản phẩm trong WooCommerce rồi. Hãy thử áp dụng cho trang web của mình nhé. Nếu vẫn gặp khó khăn, bạn có thể liên hệ mình để mình hỗ trợ sớm nhé!
