I writing the site. In my homepage on site broked sorting on widget "Products". Its like shop on shortcode. In this widget broked sorting on ("pagination" and "allow order") setting, and after one programist do sorting his hands, sorting with "Query" and "query by" broked too. I do this button for add sorting for this widget. In this moment this button work only in normal shop woocommerce with sorting "query". <?php /* Plugin Name: WooCommerce Custom Sorting v1.6 Description: Adds a single sorting button with a dropdown menu for sorting products by price and name on the WooCommerce shop page. Version: 1.6 Author: blvckfamily */ if ( ! defined( 'ABSPATH' ) ) { exit; // Prevent direct access } // Add the sorting button with a dropdown menu before the products function add_custom_sorting_dropdown() { if ( is_shop() || is_product_category() ) { // Check if this is the shop page or a product category page echo ' <div class="custom-sorting-dropdown"> <button id="sortDropdownButton">Sort <span>▾</span></button> <div id="sortOptions" class="dropdown-content"> <a href="#" data-sort="price">By Price</a> <a href="#" data-sort="title">By Name</a> </div> </div>'; } } add_action( 'woocommerce_before_shop_loop', 'add_custom_sorting_dropdown', 10 ); // Add styles for the sorting button with dropdown menu function custom_sorting_dropdown_styles() { echo ' <style> .custom-sorting-dropdown { position: relative; display: inline-block; margin-bottom: 20px; } #sortDropdownButton { background-color: #0071a1; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } #sortDropdownButton:hover { background-color: #005a87; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } .custom-sorting-dropdown:hover .dropdown-content { display: block; } </style>'; } add_action( 'wp_head', 'custom_sorting_dropdown_styles' ); // Modify the WooCommerce product query based on the selected sorting option function custom_default_catalog_ordering_desc( $q, $query ) { if ( isset( $_GET['sortby'] ) ) { $_SESSION['orderby'] = sanitize_text_field( $_GET['sortby'] ); } $current_order = isset( $_SESSION['orderby'] ) ? $_SESSION['orderby'] : 'menu_order title'; switch ( $current_order ) { case 'price': $q->set( 'meta_key', '_price' ); $q->set( 'orderby', 'meta_value_num' ); $q->set( 'order', 'asc' ); break; case 'title': $q->set( 'orderby', 'title' ); $q->set( 'order', 'asc' ); break; default: $q->set( 'orderby', 'menu_order title' ); $q->set( 'order', 'desc' ); break; } } add_action( 'woocommerce_product_query', 'custom_default_catalog_ordering_desc', 10, 2 ); // JavaScript to handle dropdown selection and reload the page with the selected sorting option function custom_sorting_dropdown_scripts() { ?> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".dropdown-content a").forEach(function(item) { item.addEventListener("click", function(event) { event.preventDefault(); event.stopPropagation(); // Stops the event from propagating let sortType = this.getAttribute("data-sort"); if (sortType) { let url = new URL(window.location.href); url.searchParams.set('sortby', sortType); window.location.href = url.href; // Reload the page with the selected sorting option } }); }); }); </script> <?php } add_action( 'wp_footer', 'custom_sorting_dropdown_scripts' ); I'm trying to add a sort by query, it works, but I need to add a button to the home page, I need this button to work with the "products" widget.