Woocommerce

Add New Catalog Ordering Argument On Shop Page

You can add a custom ordering option for the catalog page. Here we have the steps to add a custom ordering option in the catalog page.

WooCommerce has 5 standard sorting options:

Sorting can be used in arranging the catalog page products.

Add the below code to function.php or in the custom plugin file to add a new sorting option on the catalog page.

add_filter( "woocommerce_catalog_orderby", "demo_woocommerce_catalog_orderby", 20 );
function demo_woocommerce_catalog_orderby( $orderby ) {
  $orderby["a_to_z"] = __('A to Z', 'woocommerce');
  $orderby["z_to_a"] = __('Z to A', 'woocommerce');
return $orderby;
}

//new sort arg
add_filter( 'woocommerce_get_catalog_ordering_args', 'demo_woocommerce_get_catalog_ordering_args', 20 );
function demo_woocommerce_get_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' ) );
  if ( 'a_to_z' == $orderby_value ) {
    $args['orderby'] = 'name';
    $args['order'] = 'ASC';
  }
  if ( 'z_to_a' == $orderby_value ) {
    $args['orderby'] = 'name';
    $args['order'] = 'DESC';
  }
return $args;
}

Two new ordering arguments “Z to A” and “A to Z” is added to the dropdown.

Now select Z to A to sort the product in DESC alphabetical order.

Now select A to Z to sort the product in ASC alphabetical order.

Het Patel

I'm a Professional WordPress Developer with 5+ years of web design and development experience including custom websites for small & enterprise businesses. I also have acquired fame and popularity in API Integration & Development and am responsible for producing high-quality solutions for the company customers, Bringing a deep understanding of Modern HTML, JavaScript, and CSS, Plugin Customization, Theme Customization, Theme Creation, creating websites from scratch, and the software development life cycle, And strong ability to execute and implement standard software architecture patterns.

Share
Published by
Het Patel

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago