如何在自定义WooCommerce主题中添加按价格/修改时间排序的选择框?
给WooCommerce自定义主题添加商品排序选择框
要实现访客按修改时间或价格排序商品,你需要通过WooCommerce的过滤器添加自定义排序选项,并处理对应的查询逻辑,具体步骤如下:
1. 添加自定义排序选项到下拉菜单
使用woocommerce_catalog_orderby过滤器,将「按修改时间排序」等选项添加到默认排序下拉框中。如果需要区分升序/降序,可以添加多个选项:
add_filter( 'woocommerce_catalog_orderby', 'add_custom_sort_options' ); function add_custom_sort_options( $sortby_options ) { // 添加按修改时间排序的选项 $sortby_options['modified_desc'] = '按修改时间从新到旧'; $sortby_options['modified_asc'] = '按修改时间从旧到新'; // 价格排序默认已有,若需自定义文本可替换默认选项 // $sortby_options['price'] = '按价格从低到高'; // $sortby_options['price-desc'] = '按价格从高到低'; return $sortby_options; }
2. 处理自定义排序的查询逻辑
通过woocommerce_get_catalog_ordering_args过滤器,让WooCommerce根据用户选择的排序参数调整商品查询:
add_filter( 'woocommerce_get_catalog_ordering_args', 'handle_custom_sort_queries' ); function handle_custom_sort_queries( $query_args ) { $selected_orderby = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) : get_option( 'woocommerce_default_catalog_orderby' ); // 处理修改时间排序逻辑 if ( 'modified_desc' === $selected_orderby ) { $query_args['orderby'] = 'modified'; $query_args['order'] = 'DESC'; } elseif ( 'modified_asc' === $selected_orderby ) { $query_args['orderby'] = 'modified'; $query_args['order'] = 'ASC'; } // 价格排序默认已由WooCommerce处理,若需自定义逻辑可在此添加 // if ( 'price' === $selected_orderby ) { // $query_args['orderby'] = 'meta_value_num'; // $query_args['meta_key'] = '_price'; // $query_args['order'] = 'ASC'; // } return $query_args; }
3. 在主题中渲染排序选择框
如果你的自定义主题还没有输出排序下拉框,需要在商品列表页面(如archive-product.php或WooCommerce模板文件woocommerce/loop/orderby.php)添加以下代码:
<?php if ( woocommerce_products_will_display() ) : ?> <form class="woocommerce-ordering" method="get"> <select name="orderby" class="orderby" aria-label="<?php esc_attr_e( '商品排序', 'your-theme-textdomain' ); ?>"> <?php $current_orderby = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) : get_option( 'woocommerce_default_catalog_orderby' ); foreach ( wc_get_catalog_ordering_options() as $id => $label ) : ?> <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $current_orderby, $id ); ?>> <?php echo esc_html( $label ); ?> </option> <?php endforeach; ?> </select> <?php wc_query_string_form_fields( null, array( 'orderby', 'submit', 'paged', 'product-page' ) ); ?> <input type="hidden" name="paged" value="1" /> </form> <?php endif; ?>
注意事项
- 上述PHP代码可添加到主题的
functions.php文件中,或封装为独立的自定义插件。 - 模板文件建议使用WooCommerce的模板覆盖机制:复制WooCommerce默认模板
woocommerce/loop/orderby.php到主题的woocommerce/loop目录下修改,避免WooCommerce更新时被覆盖。 - 若需支持多语言,将文本替换为主题的翻译函数,例如
__( '按修改时间从新到旧', 'your-theme-textdomain' ),替换your-theme-textdomain为你的主题文本域。
内容的提问来源于stack exchange,提问作者Lucas Cave
相关产品推荐
相关产品推荐

