Mặc định, Woocommerce không hỗ trợ tính năng gán thương hiệu cho sản phẩm. Bắt buộc phải sử dụng các plugin bên ngoài để bổ sung tính năng thương hiệu trên Woocommece.
Một số plugin tạo thương hiệu phổ biển cho Woocommerce:
- Woocommerce Brands ($29/năm)
- YITH Woocommece Brands Add-on (Miễn phí)
- Perfect Woocommece Brands (Miễn phí)
- Brands for Woocommerce (Miễn phí)
Mình đã từng dùng thử qua tất cả các plugin này nhưng đều cảm thấy không hài lòng, vì những lý do sau:
- Các bản miễn phí hạn chế tính năng, rất khó tuỳ biến theo nhu cầu sử dụng
- Các bản Premium trả phí lại có quá nhiều tính năng mình không cần. Tất cả plugin đều thêm quá nhiều file css, js vào front end gây ảnh hưởng đến tốc độ tải trang.
Vậy nên cách tốt nhất để bổ sung tính năng thương hiệu cho sản phẩm (product brands) trên Woocommerce là mình sẽ tự chế. Không cần dùng plugin có sẵn của bên ngoài nữa.
Mục Lục
1. Yêu cầu chuẩn bị
- Trang WordPress đã được cài đặt và thiết lập Woocommerce, đã có sẵn sản phẩm.
- Cài đặt plugin Code Snippets (miễn phí): để thêm PHP code mà không cần phẩi edit file
functions.php
trong thư mục theme. - Cài đặt plugin Advanced Custom Fields (miễn phí): để tạo custom field cho taxonomy
- Cài đặt plugin Simple Custom CSS & JS (miễn phí): để thêm CSS tuỳ biến cho website.
Mình sẽ thực hiện demo trên trang bán hàng https://keeb.vn luôn cho tiện.
2. Tạo Custom Taxonomy
Mặc định, mỗi sản phẩm trên Woocommerce có sẵn hai Taxonomy là Category (Danh Mục) và Tag (Thẻ). Để bổ sung tính năng thương hiệu (Product Brand), mình sẽ tạo thêm 1 Custom Taxonomy.
Tạo 1 Code Snippet mới và điền vào nội dung sau để tạo Product Brand Taxonomy
// Register Product Brand Taxonomy
function tb_product_brand_taxonomy() {
$labels = array(
'name' => _x( 'Product Brands', 'Taxonomy General Name', 'tb_product_brand' ),
'singular_name' => _x( 'Product Brand', 'Taxonomy Singular Name', 'tb_product_brand' ),
'menu_name' => __( 'Product Brands', 'tb_product_brand' ),
'all_items' => __( 'All Brands', 'tb_product_brand' ),
'parent_item' => __( 'Parent Brand', 'tb_product_brand' ),
'parent_item_colon' => __( 'Parent Brand:', 'tb_product_brand' ),
'new_item_name' => __( 'New Item Brand', 'tb_product_brand' ),
'add_new_item' => __( 'Add New Brand', 'tb_product_brand' ),
'edit_item' => __( 'Edit Brand', 'tb_product_brand' ),
'update_item' => __( 'Update Brand', 'tb_product_brand' ),
'view_item' => __( 'View Brand', 'tb_product_brand' ),
'separate_items_with_commas' => __( 'Separate brands with commas', 'tb_product_brand' ),
'add_or_remove_items' => __( 'Add or remove brands', 'tb_product_brand' ),
'choose_from_most_used' => __( 'Choose from the most used', 'tb_product_brand' ),
'popular_items' => __( 'Popular Brands', 'tb_product_brand' ),
'search_items' => __( 'Search Brand', 'tb_product_brand' ),
'not_found' => __( 'Not Found', 'tb_product_brand' ),
'no_terms' => __( 'No brands', 'tb_product_brand' ),
'items_list' => __( 'Brandlist', 'tb_product_brand' ),
'items_list_navigation' => __( 'Brand list navigation', 'tb_product_brand' ),
);
$rewrite = array(
'slug' => 'brand',
'with_front' => true,
'hierarchical' => true,
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
'rewrite' => $rewrite,
'show_in_rest' => true,
);
register_taxonomy( 'tb_product_brand', array( 'product' ), $args );
}
add_action( 'init', 'tb_product_brand_taxonomy', 0 );
Code language: PHP (php)
Bấm Activate để lưu lại và kích hoạt đoạn mã này.
Mục Products đã có thêm 1 mục mới với tên gọi Products Brands.
3. Tạo Image field cho Product Brand
Mình sử dụng plugin Advanced Custom Fields để tạo thêm field Image cho Product Brand. Image field này dùng để tải lên hình ảnh logo của thương hiệu.
Tạo 1 Field Group mới với tên gọi Product Brand Fields. Tạo 1 image field với tên gọi Brand Logo
Phần Location, chọn Taxonomy is equal to Product Brand. Sau đó bấm Publish
Quay lại trang quản lý thương hiệu, mục Brand Logo đã hiện ra kèm theo 1 nút bấm Add Image để thêm hình ảnh cho Brand.
Mình cập nhật logo cho thương hiệu Gateron.
4. Tạo cột hiển thị Logo trong trang quản lý Product Brands
Quay lại trang Product Brands, mặc dù mình đã thêm logo cho Gateron và Lindy nhưng trang này không có cột nào hiển thị logo, gây khó khăn cho việc quản lý.
Mình sẽ thêm một cột mới trong trang quản lý Products Brands. Nhìn vô sẽ biết brand nào đã có logo, brand nào đang bị thiếu logo cần bổ sung.
//https://stackoverflow.com/questions/57937232/how-to-add-acf-image-field-to-wp-admin-table-column-of-custom-taxonomy
/**
* Add ACF thumbnail columns to Product Brand custom taxonomy
*/
function add_thumbnail_columns($columns) {
$columns['brand_logo'] = __('Logo');
$new = array();
foreach ($columns as $key => $value) {
if ($key=='name') // Put the Thumbnail column before the Name column
$new['brand_logo'] = 'Logo';
$new[$key] = $value;
}
return $new;
// Code end
}
add_filter('manage_edit-tb_product_brand_columns', 'add_thumbnail_columns');
/**
* Output ACF thumbnail content in Linen Category custom taxonomy columns
*/
function thumbnail_columns_content($content, $column_name, $term_id) {
if ('brand_logo' == $column_name) {
$term = get_term($term_id);
// $linen_thumbnail_var = get_field('thumbnail_id', $term);
$image_id = get_term_meta( $term->term_id, 'brand_logo', true );
$image_data = wp_get_attachment_image_src( $image_id, 'full' );
if ( $image_data != false ) {
$image = $image_data[0];
$content = '<img src="' . esc_url( $image ) . '" width = "60px" alt="'. $term->name .'"/>';
}
/*if ( $image_id ) {
$image = wp_get_attachment_image( $image_id, array('80', 'auto') );
if( $image ){
$content = $image;
}
}*/
//$content = '<img src="'.$linen_thumbnail_var['url'].'" width="60" />';
//$content = print_r($image_data);
}
return $content;
}
add_filter('manage_tb_product_brand_custom_column' , 'thumbnail_columns_content' , 10 , 3);
Code language: PHP (php)
Logo đã xuất hiện trong trang quản lý Product Brands
5. Thiết lập thương hiệu cho sản phẩm
Truy cập trang quản lý Products và thiết lập thương hiệu cho các sản phẩm tương ứng.
Sau đó, mình có thể truy cập vào trang thương hiệu, ví dụ: https://keeb.vn/brand/lindy
để xem tất cả các sản phẩm thuộc thương hiệu Lindy.
Nếu bị báo lỗi 404, bạn quay lại trang Admin, truy cập vào mục Setting – Permalinks và bấm Save Changes là được.
6. Hiển thị logo thương hiệu trên trang sản phẩm
Một số sản phẩm lúc này đã được thiết lập thương hiệu nhưng chỉ mới ở phần backend. Ngoài trang front-end, thông tin thương hiệu vẫn chưa hiện ra.
Bổ sung thêm đoạn code này để hiển thị logo thương hiệu trong trang sản phẩm và trang shop.
// Add Brand Logo to Single Product page and Product Archive
add_action('woocommerce_single_product_summary','tb_single_product_logo', 1);
add_action('woocommerce_after_shop_loop_item', 'tb_single_product_logo', 10 );
function tb_single_product_logo() {
$terms = get_the_terms( get_the_ID(), 'tb_product_brand');
//print_r($terms);
if(is_array($terms) || is_object($terms)){
echo '<div class="tb-brand-logo">';
foreach ((array) $terms as $term ) {
$thumbnail_id = get_term_meta($term->term_id, 'brand_logo', true ) ;
if ( $thumbnail_id ) {
$image = wp_get_attachment_image( $thumbnail_id, 'full', $icon = false , array( 'class' => 'brand-logo', 'alt' => $term->name ) );
if( $image ){
echo sprintf( '<a href="%s">%s</a>', get_term_link( $term ), $image );
}
}
}
echo '</div>';
}
}
Code language: PHP (php)
Quay lại kiểm tra, logo đã hiện ra trên trang sản phẩm và trang shop.
Tuy nhiên kích thước logo đang quá khổ, cần phải bổ sung CSS để nó gọn gàng hơn.
7. Chỉnh CSS cho logo hiển thị gọn gàng hơn
Bạn có thể thêm CSS vào file style.css
nằm trong thư mục theme đang dùng, hoặc sử dụng tính năng Custom CSS trong Customizer. Mình thì thích xài plugin riêng để quản lý Custom CSS, không bị phụ thuộc vào Theme.
Plugin mình khuyến khích dùng là plugin Simple Custom CSS & JS (miễn phí).
Tạo CSS Code mới với nội dung sau và lưu lại.
.tb-brand-logo {
margin-bottom: 10px;
}
.tb-brand-logo .brand-logo {
max-width: 100px;
}
Code language: CSS (css)
Quay lại kiểm tra, logo giờ đã nhìn gọn gàng hơn hẳn.
Vậy là xong. Website https://keeb.vn của mình giờ đã có thêm tính năng Product Brands đúng như nhu cầu sử dụng: gọn nhẹ, linh hoạt, không bị quá tải bởi css, js không dùng đến.
Chúc bạn thực hiện thành công!
hi anh, code rất hữu ích, em muốn get tất cả thương hiệu vào url https://keeb.vn/brand/ thì làm như thế nào ạ?
Anh không hiểu câu hỏi nhé.
em muốn tất cả các thương hiệu hiển thị như trang https://ycb.vn/brand/ ý anh, nhìn mê quá
Hướng dẫn đây em nhé: https://thuanbui.me/hien-thi-danh-sach-thuong-hieu-san-pham-product-brand-cho-woocommerce/
Phần code Tạo cột hiển thị Logo trong trang quản lý Product Brands thì thêm vào chỗ nào ạ. Em không thấy anh viết
Các code chỉnh sửa của WordPress bạn cần nhập vào file functions.php của theme, hoặc dùng plugin Code Snippet.
Chào bạn, bạn cho mình hỏi, mình sử dụng theme flatsome, Mình muốn thêm TOP content vào chỗ Taxonomy thương hiệu, để mình thêm 1 số nội dung vào phía trước của mỗi thương hiệu thì làm ntn bạn nhỉ. Cảm ơn bạn
Bạn có thể sử dụng Advanced Content Fields để tạo thêm ô nhập nội dung. Sau đó dùng action hooks của Flatsome theme để chèn nội dung vào đúng vị trị mong muốn: https://docs.uxthemes.com/article/385-hooks
em làm như anh hướng dẫn mà nó chủ hiện logo ở danh sách sản phẩm chứ nó không hiện ở Product page ạ.
Nó không hiện ra có thể vì theme bạn đang dùng nó dùng action hooks khác với theme Kadence mình đang dùng. Bạn cần chỉnh lại code của dòng add_action cho phù hợp với theme đang sử dụng.
Em sử dụng theme Flatsome thì sửa như thế nào ạ: https://docs.uxthemes.com/article/385-hooks#flatsome_product_title_tools
Bạn thử thay
woocommerce_single_product_summary
bằng
xem có được không. Mình không dùng Flatsome nên không chắc nhé.flatsome_product_title
Mình muốn hiển thị ảnh tương ứng với thương hiệu ở trang Tất cả sản phẩm thì làm sao nhỉ, qua giờ thử đủ cách thì nó lại tạo thêm cột ảnh riêng,
Mình không hiểu rõ ý của bạn lắm nên chưa biết tư vấn sao.
Sau khi thêm code này thì ở trang “Tất cả sản phẩm” sẽ có thêm một cột là “Thương hiệu” nhưng hiện tại chỉ có text+url dẫn đến trang edit thương hiệu
Mình muốn thêm ảnh thương hiệu từ field ACF đã tạo vào ngay đó
function add_brand_logo_column($columns) {
$columns[‘brand_logo’] = __(‘Ảnh Thương hiệu’, ‘tb_product_brand’);
return $columns;
}
add_filter(‘manage_product_posts_columns’, ‘add_brand_logo_column’);
function display_brand_logo_column($column, $post_id) {
if (‘brand_logo’ === $column) {
$terms = get_the_terms($post_id, ‘tb_product_brand’);
if ($terms && !is_wp_error($terms)) {
foreach ($terms as $term) {
$image_id = get_term_meta($term->term_id, ‘brand_logo’, true);
if ($image_id) {
$image = wp_get_attachment_image($image_id, ‘thumbnail’, false, array(‘class’ => ‘brand-logo’, ‘alt’ => $term->name));
echo sprintf(‘%s‘, get_edit_term_link($term->term_id), $image);
}
}
}
}
}
add_action(‘manage_product_posts_custom_column’, ‘display_brand_logo_column’, 10, 2);
Mình thêm code này thì nó lại tạo thêm một cột nữa nên thành ra dư
Bạn xem bài này nhé: https://thuanbui.me/woocommerce-hien-thi-cot-logo-thuong-hieu-trong-trang-liet-ke-san-pham-o-backend/
code của mình ở trên cũng giống bài này, mà ko ẩn đc cái cột cũ đi á, set admin collum = false với css cũng ko ẩn đc 😀 chả hiểu dính chỗ nào, để rảnh ngồi test lại thử, arigatou 😀
Hi, bạn cho mình hỏi, nếu mình không muốn hiển thị hình mà chỉ hiển thị tên thương hiệu ở Shop Page thì mình phải chỉnh thế nào? Cám ơn bạn đã chia sẻ cách làm brand hay thế này.
Bạn tham khảo code này nhé: https://bin.thuanbui.me/upload/mole-jaguar-goose
Cám ơn admin nhiều lắm