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.
<?php
/*
Plugin Name: WooCommerce Custom Sorting v1.3
Description: Adds a single sorting button with a dropdown menu for sorting products by price and name on the WooCommerce shop page.
Version: 1.3
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="name">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' );
// Add JavaScript for sorting products
function custom_sorting_dropdown_scripts() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
const sortDropdownButton = document.getElementById("sortDropdownButton");
const dropdownContent = document.getElementById("sortOptions");
if (!sortDropdownButton || !dropdownContent) {
console.error("Dropdown button or content not found.");
return;
}
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) {
console.error("Sort type not found.");
return;
}
let sortOrder = "asc";
let products = document.querySelectorAll('.woocommerce ul.products li.product');
if (!products.length) {
console.error("No products found.");
return;
}
let productsArray = Array.prototype.slice.call(products, 0);
if (sortType === "price") {
productsArray.sort(function(a, b) {
let priceAElement = a.querySelector('.woocommerce-Price-amount');
let priceBElement = b.querySelector('.woocommerce-Price-amount');
if (!priceAElement || !priceBElement) {
console.error("Price element not found in one of the products.");
return 0;
}
let priceA = parseFloat(priceAElement.innerText.replace(/[^0-9.-]+/g,""));
let priceB = parseFloat(priceBElement.innerText.replace(/[^0-9.-]+/g,""));
return sortOrder === "asc" ? priceA - priceB : priceB - priceA;
});
} else if (sortType === "name") {
productsArray.sort(function(a, b) {
let nameAElement = a.querySelector('.woocommerce-loop-product__title');
let nameBElement = b.querySelector('.woocommerce-loop-product__title');
if (!nameAElement || !nameBElement) {
console.error("Product title element not found in one of the products.");
return 0;
}
let nameA = nameAElement.innerText.toLowerCase();
let nameB = nameBElement.innerText.toLowerCase();
if (nameA < nameB) return sortOrder === "asc" ? -1 : 1;
if (nameA > nameB) return sortOrder === "asc" ? 1 : -1;
return 0;
});
}
let parent = document.querySelector('.woocommerce ul.products');
if (!parent) {
console.error("Products container not found.");
return;
}
// Clear the products container
parent.innerHTML = "";
// Add sorted products
productsArray.forEach(function(product) {
parent.appendChild(product);
});
});
});
});
</script>
<?php
}
add_action( 'wp_footer', 'custom_sorting_dropdown_scripts' );
I try add sorting with query, but this dont work, like if i even dont cklick on button.
lvlorgan1996 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.