Display price low to high?

Am I missing something?

It seems there is no option to sort products within a category in price order. Really???

It seems I can only sort by default Name or my custom CMS Fields, but not sort by the price. This seems a very basic and common feature missing.

You could write a little script to sort those onload. Sorting using nested text for instance.

Hi @pepperclip

Thanks for the suggestion, are you able to provide an example script? I have limited code experience. #nocode

I really can’t understand why the Sort function only allows the Name to be sorted. Why on earth would Webflow not allow the Price to be sorted too?

I wrote this script to sort by A-Z and by price for my webflow e-commerce projects :

// home-made sorting
$(document).ready(function(){

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

function sortUsingNestedTextOpposite(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA > vB) ? -1 : (vA < vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sort-by-price-desc').data("sortKey", ".product-price");
$('#sort-by-price-asc').data("sortKey", ".product-price");
$('#sort-by-name-az').data("sortKey", ".product-card-name");
$('#sort-by-name-za').data("sortKey", ".product-card-name");

/* sort on button click */
$("#sort-by-price-asc, #sort-by-name-az").click(function() {
   sortUsingNestedText($('.product-container'), ".product-item", $(this).data("sortKey"));
});
$("#sort-by-price-desc, #sort-by-name-za").click(function() {
   sortUsingNestedTextOpposite($('.product-container'), ".product-item", $(this).data("sortKey"));
});

$("#sort-clear").click(function() {
   location.reload();
});

}); 
// End of sorting code

You need to change the class with the price (and the class with the name of product if you want A-Z sorting as well) and the id of the sorting triggers.

The code basically searches for text in product cards, orders it by value and re-displays it in the product container when the user clicks a button.

Hope this helps

3 Likes

Nice one thanks for sharing!

and no filter for price either. Mixitp or script I guess

I can’t believe @Webflow have STILL not enabled the ability to sort a list of products by price. This seems such a basic concept, and surely dead easy to implement, as there are plenty of other ‘sort by’ options.

I’d love to know the logic of not offering what seems a very obvious design feature.

2 Likes

Please vote for this on the Webflow Wishlist
https://wishlist.webflow.com/ideas/WEBFLOW-I-1872

Came here with the SAME thought. I’m using ecommerce for a membership subscription of 3 prices.
I cannot believe this basic feature is missing.

I recognize that with Webflow you are getting a much better designer than using something standard like Shopify which has nearly every ecommerce feature at the ready - but when you’re paying a premium price for both ecommerce hosting AND processing fees, stuff like this really grinds my gears.

4 years later…
It’s like begging apple to include a phone app in their iPhones.
Just have it.