How to Sort and Display WooCommerce Products

WooCommerce Sorting and displaying products is important for enhancing the customer experience and increasing website conversions. When customers are able to find what they are looking for quickly, they are more likely to buy and come back for more, thus improving the user experience.

The good news is that WooCommerce offers multiple ways to sort and display products, including default settings,Customization Options, plug-ins, etc.

This article will cover a variety of ways to sort and display WooCommerce products, including basic and advanced settings, as well as must-have plugins. The advantages and disadvantages of each method will then be explored, so you can choose the option that works best for you.

图片[1]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

Why sort and display WooCommerce products?

There are two main reasons for the purpose of sorting and displaying products:

  1. Convert prospects into buyers
    When products are sorted by specific criteria, customers are more likely to find the items they want, which increases the chances of making a purchase.
  2. Provide customers with a quality user experience
    Sorting makes the store more organized and easy to navigate, thus providing a better shopping experience for customers.

Reduce store clutter and more by controlling the sorting of products in your WooCommerce store. For example, products can be sorted based on their popularity, average sales, or specific categories such as men's and women's apparel.

图片[2]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

How to Sort and Display WooCommerce Products

Method 1: Sort Products by Default WooCommerce Options

WooCommerce includes built-in sorting options. The easiest way to sort products is to use these default methods, but they offer limited control and customization.

Using the Customizer

In the latest version of WooCommerce, the Default Product Sorting option is not found in Settings and it can only be accessed through the Customizer.

For older versions:

  • switch toWooCommerce Dashboard>set up>offeringsTab.

In the drop-down menu, you will see theDefault product sorting, focusing on different categories such as price and popularity.

For WooCommerce 3.3 and above:

  • In the WordPress admin dashboard go to theexterior condition>customizableThe
图片[3]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Find in the customizerWooCommerce section.
图片[4]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Select a sorting option from the drop-down menu(e.g., by price, popularity, average rating, newest, or alphabetical order).
图片[5]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Click "post" button to save.

I use it here.The subject is Astra. If you are using the default WordPress theme, you may need to go to theeditor (software)and selectWooCommerce Product Archive Templateto edit the product query loop.Our TutorialsAstra Theme Nanny TutorialIt might help you.

How to change the menu order for each product

If you want to sort the menu in thecustomizing the order of individual products.Follow the steps below:

  1. Click on any product on the"Edit."
  2. Scroll down toProduct Datawidgets
  3. strike (on the keyboard)"Advanced" optionsa checkpost
  4. adaptmenu sequencesetting to change the position of the product.

On the backend, this operation is performed by thewoocommerce_catalog_orderHook Management.

图片[6]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

Advantages and disadvantages of this approach

✓ Easy to set up

✓ No coding required

✓ Provide basic sorting options (e.g. by price, popularity, date)

✗ Limited Customization

✗ Not suitable for complex sorting needs

Method 2: How to Sort Products in WooCommerce (Manually)

With WooCommerce, it is also possible to manually arrange products. This is useful for creating customized product displays and highlighting important items. You can follow the steps below:

  • In the WordPress dashboard, go to"Product." > "All products"The
图片[7]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Click theSort.
图片[8]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Drag & Drop Productsto set the order of favorites.
图片[9]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

The custom order set here becomes the default display for customers browsing the store.

Manual categorization of individual products:

For better control of individual products:

  • Open the product in the editor and scroll down to theProduct DataPart.
图片[10]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • advancedUnder the tab, set themenu sequencevalue (the lower the number the higher the order in which products are displayed).
图片[11]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

The menu order setting is especially useful if you want to fine-tune the position with a simple drag-and-drop operation.

Advantages and disadvantages of this approach

✓ Complete control over the order in which products are displayed

✓ Simple drag-and-drop interface

✗ Large inventories are time consuming

✗ Periodic updates if product priorities change

Method 3: How to customize sorting by category or attribute

You can also group products by category or attribute, which helps your customers easily find items in a specific group. This works best when you have multiple product lines in your store.

Please take the following steps:

  • click (using a mouse or other pointing device)"Product."and then in the WooCommerce toolbar, select the"Category"
图片[12]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Add new categories or manage existing categories by assigning related products to each category.
图片[13]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • Show products by category:
    • leave for"Appearance." > "Menu."Add category links to the main navigation
    • utilizationCategory-specific short codesto gain more control.

Displays short codes for products by category:

[product-category="category-slug" orderby="date" order="asc"]

will" category-slug " is replaced with the actual category name.

Sort by attribute:

WooCommerce can also sort by attributes such as color, size or brand. The setup is as follows:

  1. switch to"Product." > "Properties."to create or manage properties.
  2. Product data on each product's edit pageThese attributes are assigned to each product in the section.
  3. expense or outlaya side-bar (in software)hit the nail on the headFilter widgets or use specific shortcodes to enable attribute-based functionality.

Advantages and disadvantages of this approach

✓ Classify products by specific categories or attributes (e.g., color, size)

✓ Ideal for stores with multiple product types

✗ Need to set the exact attributes for each product

✗ May become complex with many categories or attributes

Method 4: How to use WooCommerce shortcode to display products

Another way to sort and display products in your WooCommerce store is to use shortcodes. These shortcodes can be customized with default sorting parameters (e.g. by price, rating, date) and sort order - ascending or descending.

Below is a simple example of displaying the shortcode. The display can also be customized using other properties, including columns, limits, categories, etc.

[products limit="8" columns="4"]

Below are additional short codes for sorting and displaying products:

An example of a short code showing the best-selling product.

To add

Shortcode to display the best-selling products in your WooCommerce store, follow these steps:

  • Navigate to "web page" tab, then select "All Pages" in the WordPress admin panel (or, if you want to add it to a blog post, select "Posts", " All Posts").
  • Select the page or post where you want the best-selling product to be and click "compiler". I chose the home page.
图片[105]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

In the WordPress editor, click the + button to add a block.

图片[106]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

Search for "Shortcode" in the search bar.

图片[107]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

This is where you add the short code. Paste the following:

图片[108]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

limit: Determine how many of the most popular products are displayed.

💡columns: Specifies the number of columns used to display products.

  1. Now, press "post"Button.
  2. Browse the front end of the site to confirm that the most popular products are being promoted correctly.

Advantages and disadvantages of this approach

✓ Flexibility to display specific products or categories on any page

✓ Highly customizable short code parameters

✗ Page-level customization only

✗ May need to be styled for some themes

Method 5: How to use the plugin to sort and display

Using the WooCommerce plugin provides more advanced options and flexibility.

coercemountingfurthermoreactivate WooCommerce Sort Plugin, follow the steps below:

  • Go to yourWordPressDashboard.
  • click (using a mouse or other pointing device)plug-in (software component)>Add New PluginThe
图片[109]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好
  • look for sth.Desired plug-insThe
  • click (using a mouse or other pointing device)InstallationThe
图片[110]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

After installation, click"Activate."to activate the plug-in.

图片[111]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

In this tutorial, I installed the free plugin for WooCommerceExtra Product Sorting OptionsThe

Multiple settings will be found in the WooCommerce Customization Panel.

图片[112]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

More sorting options will be found on the store page.

图片[113]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

Method 6: How to Add Custom WooCommerce Product Sorting (Advanced)

If the available sort filters don't meet the needs of your website visitors, you can also create customized sorting options that will be displayed in a drop-down menu on the store page.

Doing so allows sorting based on custom fields or metadata such as location, point of sale, or other unique attributes.

Step 1: Add custom sorting options

  • Add the following code snippet to the theme's functions.php filein order to add new sorting options:
function add_custom_woocommerce_sort_option( $sort_options ) {
    $sort_options['custom_sort_order'] = 'Custom Sorting Order'; // Label for the sorting option
    return $sort_options;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'add_custom_woocommerce_sort_option' ); }
add_filter( 'woocommerce_catalog_orderby', 'add_custom_woocommerce_sort_option' ); }

Step 2: Define the sorting logic

  • Use the following code to implement custom sorting logic. Place the " your_custom_meta_key " is replaced with the actual meta key used for sorting:

function custom_product_sort ($ query) {

function custom_product_sort( $query ) {
    if ( ! is_admin() && $query->is_main_query() && is_shop() || is_product_category() ) { // Ensure this only affects the shop page and product categories
        if ( isset( $_GET['orderby'] ) && $_GET['orderby'] == 'custom_sort_order' ) {
            $query->set( 'meta_key', 'your_custom_meta_key' ); // Replace 'your_custom_meta_key' with your actual meta key
            $query->set( 'orderby', 'meta_value_num' ); // For numeric sorting; use 'meta_value' for text
            $query->set( 'order', 'DESC' ); // Set sorting order (ASC or DESC)
        }
    }
}
add_action( 'woocommerce_product_query', 'custom_product_sort' ); }

How to sort and display products using custom fields

You can adddollar valueto make the sort filter also containnumericrespond in singingText.

To make it easier to customize the filter, I'll add two sorting options:Sort by locationrespond in singingSort by point of saleThe

Attention:Place the following code in the child theme'sfunctions.php fileCenter.

// Step 1: Modify WooCommerce ordering arguments to support custom fields for sorting
function cw_add_postmeta_ordering_args( $args_sort_cw ) {
    $cw_orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) :
        apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ).

    switch( $cw_orderby_value ) {
        case 'points_awarded'.
            $args_sort_cw['orderby'] = 'meta_value_num';
            $args_sort_cw['order'] = 'DESC'; // Set the sorting order (ASC or DESC)
            $args_sort_cw['meta_key'] = 'points'; // Meta key for 'points'; $args_sort_cw['order'] = 'DESC'; // Set the sorting order (ASC or DESC)
            break; // Meta key for 'points'; // Meta key for 'points'.
        case 'location'.
            $args_sort_cw['orderby'] = 'meta_value';
            $args_sort_cw['order'] = 'ASC'; // Set the sorting order (ASC or DESC)
            $args_sort_cw['meta_key'] = 'location'; // Meta key for 'location'
            break; }
    }

    return $args_sort_cw;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'cw_add_postmeta_ordering_args' );

// Step 2: Add new sorting options to WooCommerce dropdown
function cw_add_new_postmeta_orderby( $sortby ) {
    $sortby['location'] = __( 'Sort By Location', 'woocommerce' );
    $sortby['points_awarded'] = __( 'Sort By Sale Point', 'woocommerce' );
    return $sortby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'cw_add_new_postmeta_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'cw_add_new_postmeta_orderby' ); }

After adding the above code, the sort filter will appear in theproduct pagein the dropdown menu. However, it shows up in the sort menu, but inside the article it also shows how to display these values on a single product page.

图片[114]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

How to display custom field values on product pages

Add the following code snippet to display fields such as location and point of sale on the product page. Similarly, any custom field can be displayed on the store page using the same meta values.

function cw_shop_display() {
    global $product.

    // Get custom meta fields for each product
    $location = get_post_meta( $product->get_id(), 'location', true ); $point_of_sale = get_post_meta( $product->get_id(), 'location', true )
    $points_of_sale = get_post_meta( $product->get_id(), 'points', true );

    if ( ! empty( $location ) ) {
        echo '<div class="product-meta"><span class="product-meta-label">Location.</span> ' . esc_html( $location ) . '</div>';
    }
    if ( ! empty( $point_of_sale ) ) {
        echo '<div class="product-meta"><span class="product-meta-label">Sale Points.</span> ' . esc_html( $point_of_sale ) . '</div>';
    }

    if ( $product-&gt;get_sku() ) {
        echo '<div class="product-meta">SKU: ' . esc_html( $product-&gt;get_sku() ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 );

Whenever a visitor selects a sort option, the corresponding value changes accordingly. The following screenshot shows theSort by locationThe

图片[115]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

By point of saleSorting is the same way.

图片[116]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

if you want toEdit individual products, you need to set a custom field for theValue.

图片[117]-根据博客内容帮我整理一个SEO标题,SEO关键词和SEO简短描述,关键词用逗号排列好

By doing so, you can effectively improve the product sorting and display features of your WooCommerce store, enhance your customers' shopping experience and increase conversion rates. You can choose the most suitable way to optimize product display and sorting according to your needs and store size.


Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by Banner1
THE END
If you like it, support it.
kudos54 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments