Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Hiển thị tùy chọn xắp xếp sản phẩm trên website woocommerce

Hiển thị tùy chọn xắp xếp sản phẩm trên website woocommerce

Thứ Tư, 24/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

WooCommerce cung cấp đồ sộ các API bạn thỏa sức sáng tạo với website bán hàng của mình trên wordpress CMS. Tuy nhiên để sử dụng kho hướng dẫn code của Woo bạn phải mua bản WooCommerce trên trang http://www.woothemes.com/woocommerce/.
Những thành viên trên trang này mới có quyền xem tài liệu hướng dẫn chính thức của hãng phát hành.

Trong bài hôm nay, mình sẽ hướng dẫn cách tạo hộp lựa chọn xắp xếp hiển thị các sản phẩm trên fronted, giống như thế này.
product-order-woo

Mặc định woocommerce không hiển thị tùy chọn này, mình tìm trong admin cũng không thấy có options cho hiển thị thẻ select chứa danh sách các kiểu xắp xếp mà chỉ cố định một kiểu xắp xếp khi tải danh sách các sản phẩm trên trang web.
def-product-sorting-woo
Bên cạnh đó bạn còn có thể xắp lại thứ tự cho post type “product” theo ý muốn trong woocommerce bằng cách sử dụng plugin Post Type Order.

Thêm tùy chọn xắp xếp

Để tạo thêm hộp lựa chọn kiểu xắp xếp động trên website, với woocommerce sử dụng hook woocommerce_catalog_ordering, nhưng bạn phải định nghĩa mới hook này và chép vào nội dung sau đây:

function woocommerce_catalog_ordering() {
	if(!isset($_POST['orderby'])) $_POST['orderby']='title';	//default orderby title
		if (isset($_POST['orderby'])) $_SESSION['orderby'] = apply_filters('woocommerce_default_catalog_orderby', $_POST['orderby']);
		?>
		<form class="woocommerce_ordering" method="post">
				<select name="orderby" class="orderby">
						<?php
								$catalog_orderby = apply_filters('woocommerce_catalog_orderby', array(
										'title'         => __('Alphabetically', 'hwtheme'),
										'date'          => __('Most Recent', 'hwtheme'),
										'price'         => __('Price', 'hwtheme')
								));

								foreach ($catalog_orderby as $id => $name) :
										echo '<option value="'.$id.'" '.selected( $_SESSION['orderby'], $id, false ).'>'.$name.'</option>';

								endforeach;
						?>
				</select>
				<input type="submit" class="button" value="<?php _e('Order','hwtheme')?>"/>
		</form>
		<?php
}

Đoạn code trên tạo form xắp xếp với thẻ select. Bạn có thể xắp xếp sản phẩm theo tiêu đề (title), ngày tháng (date), giá (price). Thêm tên xắp xếp và chuỗi hiển thị trên select tag vào mảng tham số của filter woocommerce_catalog_orderby.
Xem thêm cách tạo custom fields cho sản phẩm trong woocommerce.

Mình đang sử dụng woocommerce version 2.1.9, thì không thấy có tính năng sort các phiên bản khác thì mình cũng không rõ. Nhưng nếu bản woocommerce hiện tại bạn đang dùng khiếm khuyết tính năng này thì cũng biết cách sử lý.

Nội dung của Hook woocommerce_catalog_ordering thực thi trong action woocommerce_pagination|woocommerce_before_shop_loop, bạn có thể đổi lại vị trí hiển thị cùng với các nội dung có trong action woocommerce_before_shop_loop.

remove_action('woocommerce_pagination','woocommerce_catalog_ordering',20);
remove_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering',20);
add_action( 'woocommerce_before_main_content', 'woocommerce_catalog_ordering', 20 );

Mình cũng không chắc woocommerce_catalog_ordering trước đó được quản lý bởi action nào, và để chắc chắn bạn xóa trong cả 2 hook như ở trên. Sau đó di chuyển sang action khác.
Chú ý: nếu chưa xóa form sort ở vị trí cũ, mà bạn thêm vào vị trí mới thì form sort đều hiển thị cả 2 vị trí.

//remove_action('woocommerce_pagination','woocommerce_catalog_ordering',20);
//remove_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering',20);
add_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering',20);

Kết quả:
product-sorting-form-woo1

Bạn cũng có thể khai báo thêm nhiều kiểu xắp xếp cho sản phẩm bởi hook woocommerce_catalog_orderby và woocommerce_default_catalog_orderby_options (dành cho phiên bản khác).

add_filter( 'woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby' );
add_filter('woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby');
//add new options to $sortby var passed into filter
function custom_woocommerce_catalog_orderby($sortby) {
    $sortby['designer_asc'] = "Sort by Designer A-Z";
    $sortby['designer_desc'] = "Sort by Designer Z-A";
    return $sortby;
}

Kết quả, có thêm kiểu xắp xếp mới:
product-sorting-form-woo2

Sử lý xắp xếp

Bằng cách thêm thuộc tính xắp xếp vào tham số queries cho hàm WP_Queries, get_posts.., chúng ta có filter woocommerce_get_catalog_ordering_args. Bạn có thể thêm các thuộc tính vào biến $args.

add_filter('woocommerce_get_catalog_ordering_args', 'custom_catalog_ordering_args');
//Function to handle choices
function custom_catalog_ordering_args($args) {
    $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
    // Changed the $_SESSION to $_GET
    if ($orderby_value == "designer_asc") {
        $args['meta_key'] = 'designer';
        $args['orderby'] = 'meta_value';
        $args['order'] = "ASC";
    } else if ($orderby_value == "designer_desc") {
        $args['meta_key'] = 'designer';
        $args['orderby'] = 'meta_value';
        $args['order'] = "DESC";
    }
	elseif($orderby_value=='title'){
        $args['orderby'] = 'title';
        $args['order'] = "DESC";
	}
    return $args;
}

Thay đổi tên trường của sản phẩm bạn muốn xắp xếp cho thuộc tính meta_key.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài liên quan:

  • Wordpress SEO cơ bản - Tăng xếp hạng tìm kiếm
    Wordpress SEO cơ bản - Tăng xếp hạng tìm kiếm
  • Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
    Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
  • Hướng dẫn tối ưu website WordPress toàn tập A-Z
    Hướng dẫn tối ưu website WordPress toàn tập A-Z
  • Toàn tập cài đặt WooCommerce và cấu hình
    Toàn tập cài đặt WooCommerce và cấu hình
  • Tạo thêm custom fields cho product trong woocommerce
    Tạo thêm custom fields cho product trong woocommerce
  • Phần mềm RIP giao diện website, Nhận RIP Theme Wordpress
    Phần mềm RIP giao diện website, Nhận RIP Theme Wordpress

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: sorting, web bán hàng, Woocommerce, xắp xếp

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. Huy says

    Thứ Năm, 23/04/2020 at 4:57 chiều

    Bạn ơi cho mình hỏi muốn hiển thị “đánh giá” bên dưới tiêu đề sản phẩm woocommerce thì làm như nào bạn?
    Hình minh họa : https://prnt.sc/pr8x93

    • Hoàng Quách says

      Thứ Bảy, 25/04/2020 at 6:58 chiều

      Bạn có thể di chuyển phần sao đánh giá bên dưới tiêu đề sản phẩm với đoạn code sau:

      add_action('woocommerce_after_shop_loop_item_title','change_loop_ratings_location', 2 );
      function change_loop_ratings_location(){
          remove_action('woocommerce_after_shop_loop_item_title','woocommerce_template_loop_rating', 5 );
          add_action('woocommerce_after_shop_loop_item_title','woocommerce_template_loop_rating', 15 );
      }
      

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: hoangweb24@gmail.com

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • Hosting Miễn Phí Trọn Đời

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2022 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.

plugin thanh toan
Link tải : https://wordpress.org/plugins/bck-tu-dong-xac-nhan-thanh-toan-chuyen-khoan-ngan-hang/