Reorganize how Products are being displayed

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Reorganize how Products are being displayed

Post by Agalassi1792 »

Hello,

So I am wondering if there is an easy way to reorder how products appear on the Store page. Right now, it looks to me as if they are being ordered by their Product ID... but, for instance, can they instead be ordered by Event Date (for stores that only sell tickets to events)? Or Alphabetically?

Let me know if there are other ways of organizing these products on this page, and how we would go about doing that.

Thank you!
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Reorganize how Products are being displayed

Post by Benjaminh326 »

Hello,

There are a few ways you can reorganize the products. First, you can go to Settings -> Store. In here, you can choose how the products are displayed (list of all products vs. categories; precedence vs. alphabetical). In the center, there are three options, List Layout, Category Grid Layout, and Product List Layout. List Layout will display all products in the order that is determined on the right-hand side (Precedence will display based on the product ID, while Alphabetical will display the products alphabetically). Also note: products are grouped up with other products in their category. The category order can be changed in Store -> Categories (you can drag & drop the categories into desired precedence here).

The second option (Category Grid Layout) will only display the product categories, and to see the products within, you have to click on the category. The categories are arranged based on Precedence or Alphabetical, depending on which option you chose. The products displayed once you click on the category will also be displayed in the same format.

The third option (Product List Layout) will display each category ordered by precedence as a list (no pictures) with a bulleted list underneath them of all the products in their respective categories. The products will be displayed in an order determined by precedence or alphabetical (depending on which you choose).

The second way you can organize is by putting all the products that you want displayed higher on the list in their own category. Then, you can put that specific category at the highest categorical precedence (Store -> Categories).

The last way to reorganize your products is to use CSS code while selecting the "List Layout" option. With this code, you can directly determine the order of the products. First, add this css to your page:

Code: Select all

    .product-container {
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row-wrap;
        flex-flow: row wrap;
    }
This will open the option for you to determine the order of your products on all major browsers. Now to order your products, you will have to target the products by using "product-list-<PRODUCT ID>". For example:

Code: Select all

    .product-list-1011 {
        order: 1;
    }
This will set the product with ID 1011 to the first postition. NOTE: If a product is not given an order number, it will be pushed up on the list. The ordered items will come AFTER the unordered items.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Reorganize how Products are being displayed

Post by Agalassi1792 »

Hi Ben,

Thank you for your detailed explanation! That does help.

Thanks for the CSS option - I think that will be the best way for me to do this for the time being.

Thanks again for all this!
Post Reply