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

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài [WooCommerce] Hiển thị thuộc tính sản phẩm sau giá

WooCommerce là nền tảng bán sản phẩm bằng WordPress thông dụng nhất hiện nay, với sự bổ 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 mặt hàng trước khi hiển thị tin tức chi tiết về sản phẩm cho khách hàng trên website.

Hôm nay, mình sẽ chỉ 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 mặt hàng 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ũng đều có thể dễ dàng thêm tính chất cho mặt hàng 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 theo 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ư 1 phương tiện để phân loại.

Ở đây, các taxonomy trong WooCommerce gồm tính chất 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 đến cách sử dụng tính chất sản phẩm, tất nhiên bạn cũng đều có thể thêm trường tùy biến cho tính chất mặt hàng nếu muốn.

Xem thêm bài chỉ 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 mặt hàng 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=' 
    '; 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.= ('
  • '. $tax-> attribute_label. ': '); foreach($tt as $t) { if($t-> name ) $html.= $t-> name.', '; #break; } $html = trim($html, ', ').'
  • '; endif; endif; endforeach; endif; $html.='
'; 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á mặt hàng và bẩu chọn rating trong template content-product.php ở địa thế 5-10

Như cũng đều có thể thấy, mình thêm nữa vị trí 6, và tính chất sản phẩm sẽ hiện trên website giữa 2 nội dung: giá sản phẩm và sao bình chọn. Bạn cũng có thể 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 tính chất có sử dụng cho mặt hàng nhưng không theo thứ tự xắp xếp với mỗi mặt hàng 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=' 
    '; 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.= '
  • '. $attributes[$item['name']]. ': '; foreach($tt as $t) { if($t-> name ) $html.= $t-> name.', '; } $html = trim($html, ', ').'
  • '; endif; } $html.='
'; echo $html; }

Một lý giải 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 địa thế bạn thiết lập của các thuộc tính mặt hàng trong quản trị.

Kết quả:
hiển thị thuộc tính sản phẩm

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

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết [WooCommerce] Hiển thị thuộc tính sản phẩm sau giá được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang