How to Display Featured Products on the WooCommerce Shop Page?

While WooCommerce allows you to mark certain products as featured, it can be highlighted in the frontend only with a shortcode . In this customization, we’ll show how to prioritize featured products by showing them at the top of the shop page using the default sorting dropdown. This helps you to curate the shopping experience by making sure that the featured products are the first thing customers see and followed by other products below.

Solution: Display Featured Products on the WooCommerce Shop Page

The code will adjust the existing “Default Sorting” to ensure that featured products are displayed first at the top of the shop pages when this option is selected.

add_filter( 'woocommerce_catalog_orderby', 'ts_woocommerce_catalog_orderby_custom' );
 
function ts_woocommerce_catalog_orderby_custom( $sortby ) {
    $sortby['featured'] = __( 'Default sorting', 'woocommerce' );
    unset( $sortby['menu_order'] );
    return $sortby;
}
 
// Make the custom one the default one
 
add_filter( 'woocommerce_default_catalog_orderby', 'ts_woocommerce_catalog_orderby_custom_default' );
 
function ts_woocommerce_catalog_orderby_custom_default() {
    return 'featured';
}
 
// Set sorting for new option
 
add_filter( 'woocommerce_get_catalog_ordering_args', 'ts_woocommerce_catalog_orderby_custom_args' );
 
function ts_woocommerce_catalog_orderby_custom_args( $args ) {
    $orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
    if ( 'featured' == $orderby_value ) {
        $args['orderby'] = 'menu_order title';
        $args['order'] = '';
        $args['meta_key'] = '';
    }
    return $args;
}
 
// Adjust order to allow for featured posts
 
add_filter( 'posts_orderby', 'ts_woocommerce_catalog_orderby_custom_featured_first', 10, 2 );
 
function ts_woocommerce_catalog_orderby_custom_featured_first( $order_by, $query ) {
    global $wpdb;
    if ( ! is_admin() ) {
        $orderby_value = ( isset( $_GET['orderby'] ) ? wc_clean( (string) $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ) );
        $orderby_value_array = explode( '-', $orderby_value );
        $orderby = esc_attr( $orderby_value_array[0] );
        $order = ( ! empty( $orderby_value_array[1] ) ? $orderby_value_array[1] : 'ASC' );
        $featured_product_ids = wc_get_featured_product_ids();
        if ( $orderby == "featured" && is_array( $featured_product_ids ) && ! empty( $featured_product_ids ) ) {
            if ( empty( $order_by ) ) {
                $order_by = "FIELD(" . $wpdb->posts . ".ID,'" . implode( "','", $featured_product_ids ) . "') DESC ";
            } else {
                $order_by = "FIELD(" . $wpdb->posts . ".ID,'" . implode( "','", $featured_product_ids ) . "') DESC, " . $order_by;
            }
        }  
    }
    return $order_by;
}

Output

When the customer visits the shop page and selects the default sorting dropdown, the featured products will be displayed first at the top of the product list. When other options such as price or popularity sorting is selected, the sorting behaves as per the selected options only. Let’s take a look at the products that are featured by the admin on the backend.

The output below shows that when the default sorting is selected the featured products are pinned to the top of the shop page.

Featured products are a great way to catch your customers’ attention. You can even use them for special promotions, like offering a ‘Buy One Get One Free’ deal for featured products only in WooCommerce. By making featured products stand out or pairing them with exclusive offers, you can encourage more people to check them out and boost your sales.