[WooCommerce] Hiển thị thuộc tính sản phẩm sau giá

WooCommerce là nền tảng bán hàng bằng WordPress phổ biến nhất hiện nay, với sự hỗ trợ của WooCommerce API bạn có thể thay đổi cài đặt WooCommerce mặc định chẳng hạn chúng ta muốn tùy biến giá của sản phẩm trước khi hiển thị thông tin chi tiết về sản phẩm cho khách hàng trên website.

Hôm nay, mình sẽ hướng dẫn các bạn thêm thuộc tính cho sản phẩm và hiển thị nó dưới mỗi sản phẩm trong danh sách hiển trên cửa hàng WooCommerce.

Hiển thị thuộc tính sản phẩm

Bạn có thể dễ dàng thêm thuộc tính cho sản phẩm trong WooCommerce bằng cách truy cập /wp-admin/edit.php?post_type=product&page=product_attributes, sử dụng cùng một nguyên lý, WordPress cho phép bạn tạo mọi kiểu dữ liệu dựa trên Custom Post Type. WordPress taxonomies được sử dụng vào việc nhóm Posts và Post tùy chỉnh, nó giúp bạn bổ xung các thành phần cho đối tượng như một phương tiện để phân loại.

Ở đây, các taxonomy trong WooCommerce gồm thuộc tính sản phẩm (product_attributes), danh mục (product_cat), từ khóa (product_tag). Nhưng trong phạm vi bài này mình chỉ nói về cách sử dụng thuộc tính sản phẩm, tất nhiên bạn cũng có thể thêm trường tùy biến cho thuộc tính sản phẩm nếu muốn.

Xem thêm bài hướng dẫn tạo thêm custom fields cho product trong woocommerce

WooCommerce không có tùy chọn cho bạn bật hiển thị thuộc tính cho mỗi sản phẩm trong quản trị WordPress, chúng ta sẽ sử dụng hook woocommerce_after_shop_loop_item_titles và thêm hàm sử lý cho sản phẩm lặp hiện tại. Chèn đoạn code sau vào file functions.php của giao diện WordPress hiện tại.

add_action('woocommerce_after_shop_loop_item_title', 'woo_after_shop_loop_item_title',6);
function woo_after_shop_loop_item_title() {
	global $product, $post;
	$attribute_taxonomies = wc_get_attribute_taxonomies();
	$html='<ul class="prod-attrs">';

	if ( $attribute_taxonomies ) :
		foreach ($attribute_taxonomies as $tax) :
		if (taxonomy_exists(wc_attribute_taxonomy_name($tax->attribute_name))) :
			$tt = wp_get_post_terms($post->ID, wc_attribute_taxonomy_name($tax->attribute_name), 'orderby=name&hide_empty=0' );
			if(count($tt)):
			$html.= ('<li>'. $tax->attribute_label. ': ');
			foreach($tt as $t) {
				if($t->name ) $html.= $t->name.', ';
				#break;
			}
			$html = trim($html, ', ').'</li>';
			endif;
		endif;
	endforeach;
	endif;
	$html.='</ul>';
	
	echo $html;
}

Lưu ý thứ tự hàm gán vào hook woocommerce_after_shop_loop_item_title sẽ quyết định vị trí hiển thị của chuỗi tạo bởi mỗi hàm. WooCommerce sử dung 2 hàm để hiển thị giá sản phẩm và bẩu chọn rating trong template content-product.php ở vị trí 5-10

Như có thể thấy, mình thêm vào vị trí 6, và thuộc tính sản phẩm sẽ hiển thị trên website giữa 2 nội dung: giá sản phẩm và sao bình chọn. Bạn có thể thay đổi giá trị này tùy ý nơi bạn sẽ muốn hiển thị.

Tuy nhiên đoạn code trên hiển thị tất cả các thuộc tính có sử dụng cho sản phẩm nhưng không theo thứ tự xắp xếp với mỗi sản phẩm bạn thay đổi. Để thay đổi thứ tự ưu tiên bạn thiết lập trong trang sửa sản phẩm, bạn sửa lại đoạn code trên thành như sau:

function sksort(&$array, $subkey="id", $sort_ascending=false, $parseVal=null) {
    if(!$parseVal) $parseVal = function($val){return $val;};
    if (count($array))
        $temp_array[key($array)] = array_shift($array);
    else $temp_array=[];

    foreach($array as $key => $val){
        $offset = 0;
        $found = false;
        foreach($temp_array as $tmp_key => $tmp_val)
        {
            if(!$found and isset($val[$subkey]) && isset($tmp_val[$subkey]) && strtolower(call_user_func($parseVal,$val[$subkey])) > strtolower(call_user_func($parseVal,$tmp_val[$subkey])))
            {
                $temp_array = array_merge(    (array)array_slice($temp_array,0,$offset),
                                            array($key => $val),
                                            array_slice($temp_array,$offset)
                                          );
                $found = true;
            }
            $offset++;
        }
        if(!$found) $temp_array = array_merge($temp_array, array($key => $val));
    }

    if ($sort_ascending && isset($temp_array)) $array = array_reverse($temp_array);

    else $array = $temp_array;
}

add_action('woocommerce_after_shop_loop_item_title', 'woo_after_shop_loop_item_title',6);
function woo_after_shop_loop_item_title() {
	global $product, $post;
	$attribute_taxonomies = wc_get_attribute_taxonomies();
	$atts = get_post_meta( $product->id , '_product_attributes' );$atts=$atts[0];
	$html='<ul class="prod-attrs">';
	sksort($atts, 'position', true);

	if ( $attribute_taxonomies ) :
		foreach ($attribute_taxonomies as $tax) :
		if (taxonomy_exists(wc_attribute_taxonomy_name($tax->attribute_name))) :
			$attributes['pa_'.$tax->attribute_name] = $tax->attribute_label;
			
		endif;
		endforeach;
	endif;
	
	foreach($atts as $i=>$item) {	
		$tt = wp_get_post_terms($post->ID, ($item['name']), 'orderby=name&hide_empty=0' );
		if(count($tt) && isset($attributes[$item['name']])):
		$html.= '<li>'. $attributes[$item['name']]. ': ';
		foreach($tt as $t) {
			if($t->name ) $html.= $t->name.', ';
		}
		$html = trim($html, ', ').'</li>';
		endif;
	}
	$html.='</ul>';
	
	echo $html;
}

Một giải thích một chút, hàm sksort giúp bạn xắp xếp mảng thuộc tính bởi key ‘position’ theo thứ tự từ nhỏ đến lớn sẽ tương ứng với vị trí bạn thiết lập của các thuộc tính sản phẩm trong quản trị.

Kết quả:

Chúc bạn thành công.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook