Sorting of products in my Woocommerce product archive

Hi

I am in the process of building a (for me) slightly advanced online store using Woocommerce. Early on, I decided to make this as dynamic as possible to have control over all designs at all levels (templates).

I made a custom loop using Ele Custom Skin. This custom loop helps me gain control over the individual elements in the product archive, ie I can bypass default templates that actually restrict my ability to design the layout exactly as I want.

Furthermore, I produced a template for each of the product categories. I chose to use “posts” to set up the product archive. The settings were as follows:

Appearance: custom
Default template: “Default Product loop”

The next step was to customize the Query…

Source: Products,
Include by: Term,
Term: Product categories: Party tent

…and using this, the product archive worked perfectly. But I got a problem afterwards that I did not think about. Hope there is an OK solution to that.

When I use “Posts” to render out all the products in the product archive, I see that I do not have the options to sort the products, neither by price nor alphabetically (as you get by using the default template). It could have been nice to have access to 2 options: 1) Backend sorting / filtering where I have control … and 2) Frontend sorting / filtering where the user can sort at their own discretion.

Since I have used this special approach, it also created some challenges, of which the sorting function is the most serious.

I do not want to go back to the default because I then lose the flexibility in terms of design that I get by making this custom.

I have attached a series of screenshots to explain the situation visually.

Details:

Wordpress version: 5.6.1
Elementor version: 3.0.14 (Basic) and 3.0.8 (Pro)

Default product loop (settings):

– Featured Image
– Link: Custom URL –> Post URL

– Edit Post Title (Elementor Widget)
– Post Title
– Link: Post URL

Edit Word Processor (Elementor Widget to show the summary info about the product)
– Post Summary

Edit Word Processor (Elementor Widget to show the price info about the product)
– Product Price

– Button: A button to show the Single Product (Going to The Single Product template)
– A button to Buy the product (Custom “add To Cart” widget)

Default Product Archive

The products (layout) is rendering out by using The Posts widget

Layout settings:
– Custom
– Default template: Default Product Loop

Query settings:
Source: Produkter (English: Products)
Include –> Include By: Term
Term: Produktkategorier: Partytelt (English: Products Categories: Party Tents)

As you can see, I have placed the product archive inside a section (using widget: Posts). At the top of the section, I want a sorting / filtering function where the user can sort by price and/or alphabetically.

Note: A product can be displayed in several categories. In this case, a motorhome tent, for example, can also be used to store a boat and will be listed in both product archive pages. I select 2 or more categories in the creation of the individual product and thus it can be listed in all selected categories. However, I hope this does not complicate the product sorting in the single product archive if there is any solution to this.

Here are my screenshots:

https://imgur.com/a/pYLehmy

Screenshot 01 – Default Product Loop (using Ele Custom Skin). Used to produce the perfect layout for The Product Archives
Screenshot 02 – Default Product Archive
Screenshot 03 – Default Product Archive- THIS IS WHAT I WANT!
Screenshot 04 – Example to show that I can list different product categories in the same Default Product Archive.

Appreciate very much if someone can help me solve this ??

Kind Regards

The page I need help with: [log in to see the link]