19. Series Học WooCommerce: Cách sắp xếp thứ tự sản phẩm theo ý muốn

– Chuyên mục: Series Học WooCommerce

Trong bài viết này tôi sẽ hướng dẫn các bạn cách sắp xếp thứ tự sản phẩm theo ý muốn trong WooCommerce. Bài viết này nhằm trả lời comments của 01 bạn đã hỏi tôi về vấn đề này và tôi thấy rằng cũng có nhiều người thắc mắc vấn đề này nên tôi viết bài này để hướng dẫn chi tiết cho các bạn.

1. Chọn kiểu sắp xếp sản phẩm mặc định

Bạn vào WooCommerce >> Cài đặt >> Sản phẩm >> chọn tab hiển thị và bạn làm như hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo

Như hình trên bạn chọn Mặc định sắp xếp (tùy chỉnh thứ tự + tên) có nghĩa là nếu thứ tự ưu tiên bằng nhau thì nó sẽ sắp xếp theo tên ví dụ nếu thứ tự ưu tiên của sản phẩm A bằng thứ tự ưu tiên của sản phẩm B thì trên trang cửa hàng nó sẽ sắp xếp sản phẩm A trước sản phẩm B.

Bạn nhớ Lưu thay đổi

2. Thêm thứ tự ưu tiên cho các sản phẩm

Đầu tiên bạn chép code sau vào file functions.php trong theme của bạn. Lưu ý rằng khi theme cập nhật thì tất cả các code bạn chép sẽ bị xóa vì vậy bạn nên xem thêm bài viết này những điều cần biết về theme Storefront (mục 7 tùy biến Storefront), bài viết này hướng dẫn bạn thêm một plugin vào theme để khi bạn chỉnh sửa code của theme thông qua plugin này vì vậy khi bạn cập nhật theme sẽ không bị ảnh hưởng có nghĩa là các code mà bạn tùy biến theme sẽ không bị mất ( vì nó nằm trong plugin)

// Thêm cột thứ tự vào trang sản phẩm
add_filter( 'manage_product_posts_columns', 'product_columns_2' );
function product_columns_2( $existing_columns ) {
		if ( empty( $existing_columns ) && ! is_array( $existing_columns ) ) {
			$existing_columns = array();
		}

		unset( $existing_columns['title'], $existing_columns['comments'], $existing_columns['date'], $existing_columns['product_tag'] );
		
		$columns          = array();
		$columns['ordering']         = 'Thứ tự ưu tiên';

		return array_merge( $columns, $existing_columns );

}
//show ordering
add_action( 'manage_product_posts_custom_column',  'render_product_columns_2' , 3);
function render_product_columns_2( $column ) {
	global $post, $the_product;

	if ( empty( $the_product ) || $the_product->id != $post->ID ) {
		$the_product = wc_get_product( $post );
	}

	switch ( $column ) {
		case 'ordering' :
		?>
			<input type="text" style="width:55px; text-align:center;" value="<?php echo  get_post_meta($post->ID,'_product_ordering',true); ?>" name="ordering[]"  />
			<?php
			break;
		
		default :
			break;
	}
}
// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
  
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields() {
  
  global $woocommerce, $post;
   
  echo '<div class="options_group">';
  // Text Field
woocommerce_wp_text_input( 
    array( 
        'id'          => '_product_ordering', 
        'label'       => __( 'Thứ tự ưu tiên trong trang quản lý', 'woocommerce' ), 
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( '', 'woocommerce' ) ,
		//'value' => 0
    )
);

  echo '</div>';
}
function woo_add_custom_general_fields_save( $post_id ){
     
      
    // Text Field
    $woocommerce_text_field = $_POST['_product_ordering'];
    if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, '_product_ordering', esc_attr( $woocommerce_text_field ) );
	
         
}
function my_enqueue($hook) {

    wp_enqueue_script( 'smn-ordering', get_template_directory_uri() . '/js/ordering.js' );
	wp_localize_script( 'smn-ordering', 'ordering_ob', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
add_action('wp_ajax_ordering','ordering_function');
add_action('wp_ajax_nopriv_ordering','ordering_function');
function ordering_function(){
	$post_ids = explode(",",$_POST['post_ids']);
	$orderings = explode(",",$_POST['orderings']);
	for($i=0;$i<count($post_ids);$i++):
		update_post_meta($post_ids[$i], "_product_ordering", $orderings[$i]);
	endfor;
	echo "data";
	die();
}

khi chép code trên vào bạn nhớ bấm nút Cập nhật tập tin

Sau đó bạn chép code dưới vào file custom.js Lưu ý rằng code chép vào trực tiếp vào theme sẽ bị mất khi bạn cập nhật theme

// Thêm thứ tự sản phẩm trong WooCommerce
jQuery(function($){
	//alert('sdfsd;');
	$(".saveorderingdddd").click(function(){
		var post=document.getElementsByName('post[]');
		var post_ids ='';

		for(key=0; key < post.length; key++)  {
			if(key == 0){
				post_ids =post[key].value;
			}else{
				post_ids = post_ids+","+post[key].value;
			}
		
			//your code goes here
		}
		var order=document.getElementsByName('ordering[]');
		var orderings ='';

		for(key=0; key < order.length; key++)  {
			if(key == 0){
				orderings =order[key].value;
			}else{
				orderings = orderings +","+order[key].value;
			}
		
			//your code goes here
		}
		$.ajax({
            type: 'POST',
            url: ordering_ob.ajaxurl,
            data:{action: 'ordering',post_ids:post_ids,orderings:orderings},
            success: function(data){
				console.log(data);
                if(data == "data"){
					 location.reload();
				}
            }
        });
		
		return false;
	});
});

Sau khi chép code vào bạn nhớ bấm nút Cập nhật tập tin

Bây giờ bạn vào trang sản phẩm sẽ thấy như hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo-1

Như hình trên bạn thấy sẽ có thêm một cột là thứ tự ưu tiên. Bạn thêm cột này vào để bạn dễ quản lý sản phẩm mà bạn chèn ưu tiên vào.

Điều bạn cần làm bây giờ là thêm thứ tự ưu tiên vào tất cả các sản phẩm hiện có của bạn

Để làm được điều này, bạn rê chuột vào sản phẩm và bấm vào nút Chỉnh sửa bạn sẽ được như hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo-2

Như hình trên bạn thấy trong mục Sản phẩm đơn giản bạn chọn tab Chung và bạn sẽ thấy nó có thêm một hàng tên là Thứ tự ưu tiên trong trang quản lý. Ví dụ ở đây tôi thêm thứ tự ưu tiên là 1.

Bây giờ bạn chuyển sang tab Nâng cao và bạn làm theo hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo-3

Tại đây trong mục Menu đơn hàng tôi cũng thêm là 1 như ví dụ trên.

Ở đây tôi giải thích thêm rằng
Thứ tự ưu tiên trong trang quản lý để bạn dễ dàng quản lý trang sản phẩm của bạn (trang này chỉ có bạn nhìn thấy).
Menu đơn hàng để bạn tùy chỉnh vị trí đơn hàng. Nếu bạn để trống thì mặc định nó sẽ hiển thị số 0 nghĩa là nó sẽ ưu tiên hàng đầu và nếu nhiều sản phẩm đều có ưu tiên là số 0 thì nó sẽ sắp xếp ưu tiên theo tên sản phẩm ví dụ sản phẩm A sẽ được xếp trước sản phẩm B ở trang Cửa hàng mà khách hàng của bạn nhìn thấy.

Sau khi bạn đã thêm thứ tự ưu tiên cho tất cả các sản phẩm của bạn thì tại trang Cửa hàng bạn sẽ thấy như hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo-4

và tại trang quản lý sản phẩm bạn sẽ thấy như hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo-5

Như hình trên các bạn thấy các sản phẩm được sắp xếp theo ngày, nếu bạn muốn sắp xếp lại theo thứ tự ưu tiên thì bạn chép code dưới vào file functions.php trong theme của bạn.

Lưu ý rằng trước khi chép code dưới bạn phải chắc chắn rằng các sản phẩm của bạn đã được thêm thứ tự ưu tiên (trong menu đơn hàng và kể cả thứ tự ưu tiên trong trang quản lý)

//Sắp xếp sản phẩm theo thứ tự ưu tiên trong trang quản lý sản phẩm
add_filter( 'parse_query', 'fb_custom_post_sort' );
function fb_custom_post_sort($query) {

    if ( ! is_admin() )
        return $query;

    global $current_screen;
    if ( isset( $current_screen ) && 'product' === $current_screen->post_type ) {
        $query->query_vars['orderby']  = 'meta_value_num';
        $query->query_vars['meta_key'] = '_product_ordering';
        $query->query_vars['order']    = 'ASC';
    }
}

Sau khi chép code bạn nhớ bấm nút Cập nhật tập tin

Bây giờ bạn vào lại trang quản lý sản phẩm bạn sẽ thấy như hình dưới

cach-sap-xep-theo-thu-tu-san-pham-trong-woo-6

3. Lời cuối bài

Tới đây đã kết thúc bài hướng dẫn về [Học WooCommerce] Cách sắp xếp thứ tự sản phẩm theo ý muốn. Bài viết này nhằm trả lời bạn đã comment yêu cầu tôi hướng dẫn và cũng để chia sẻ cho những bạn chưa biết. Nếu bạn nào có cách nào hay hơn thì có thể comment bên dưới để tôi hoàn thiện bài viết này. Nếu bạn nào còn thắc mắc gì hãy comment bên dưới tôi sẽ trả lời trong thời gian nhanh nhất.

0 comments… add one

Leave a Comment

Do NOT follow this link or you will be banned from the site!