How to determine the order of products in product group

Designer Launch
1

I’ve created a Product Group. I’ve added items to that group. I’ve added that component to a page. How do I change the order of the Products in that group?

Any help would be greatly appreciated.

2

@themacguru,
On the Admin Panel, go to Store => Products. On the right hand side under the “Add Product” button it says “Arrange Products”. Click that. On the modal that pops up, select the appropriate product group under the “Category” field. Then you simply drag and drop the products in the order desired. Be sure to click “Save” in between each group that you rearrange. Otherwise, your changes will not be saved.

4

Dude, do you make Rapidweaver?!

5

lol No, I do not make RapidWeaver. I did work for Realmac for awhile.

1 Like
6

I looked at the page, but I didn’t notice anything out of the ordinary. Have you already addressed whatever the issue was? Or am I overlooking something?

7

I thought I fixed it (what you saw) but it didn’t actually fix the issue. It created another similar one. There’s NO WAY every wine will have the same amount of letters in the title. If one or two have an extra line, it throws the whole thing off.

https://www.douxvin.com/Wines/Our-Latest-Offer/Paolo-Scavino-Pre-Order

B

8

I wondered if that’s what you were referring to. I have had the same issue. There’s not really a way to fix this issue. It is based on the way div elements are displayed. Each item is posted to the page inside a div element and browsers don’t line them up like table cells. A developer may be able to use a CSS Grid to fix this issue for you. However, that may be a rather extensive project and I’m not even sure if it will work with WineDirect, especially when it comes to the store pages.

9

You could easily get them to align with css. I would use flexbox to do it.

.v65-productGroup-products {display: flex; flex-wrap: wrap;}
.v65-productGroup-product {padding-bottom: 100px;}
.v65-productGroup-product .v65-product-addToCart {position: absolute; bottom: 10px; width: 100%;}

That will make all the product blocks the height of the tallest one in the row and will align the price and buy buttons to the bottom of each block. Pretty easy to implement, but if you’re not experienced in this stuff, I’d recommend hiring someone who is. Ping me if you’re interested.

10

Hi, Do you know why it is displaying 3 bottles, next line 1 bottle and then 2 bottles? We want three and three, but don’t see an option to do that?

TIA all…you are the best!

Lisa

11

Hi Lisa,

There is a website setting that forces the number of products per row in a Product Group. Yours was set to 4, but I’ve updated it to 3 for you. :slight_smile:

1 Like