Product grids with different sizes

Hi!

We’re curious on how we can achieve the result showing in the screenshot shown for the option “Product grids with different sizes”?

Kind regards,
Rickard.

Attachments:

You must be logged in to view attached files.

Hello,

As it is suggested in the information written below the option. You can read that to get better understanding:

“In this situation, some of the products will be twice bigger in width than others. Recommended to use with 6 columns grid only.”

So, if you want to use that option on your Site try to make sure that you have 6 Columns selected for the Products Grid under the Theme Settings and then you can achieve that like it is mentioned in the Screenshot.

Further, you can check the Theme Documentation guide on Image Size and Content Alignment too (if it is of any help to you): https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

Best Regards

Hi!

Yes, I understand that, but the preview-image shows the left-most product stretching into the next row, being almost a broken-grid layout.
So to clarify, the question is, how do we reproduce the screenshot for the shop?

Hello,

To reproduce the same look you need to activate that option, enable 6 columns for the shop grid, and activate “Masonry grid”. Note that your images should have identical sizes to make the grid look proper.

Kind Regards

It doesn’t work as shown in the screenshot from the theme-settings, please look at the included screenshots.

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide us with your admin access so we can log in and check this on your side.

Thank you in advance.

Please see the extra information for the credentials.

Hello,

As we can see, this option is active and works as designed now. Here is a demo that shows how is supposed to work https://woodmart.xtemos.com/shop-masonry/
But you have a custom CSS in your child theme that makes all products have a fixed height. That is why it looks different.

Kind Regards

Hi!

Understood, albeit we’re not fully getting it to work even with a clean demo-import of the theme.
You can take a look at this URL:
https://learndash.adaptonline.se/shop/?per_row=6&shop_view=grid

Also, is it possible to choose which product that do take up two columns, and is it possible to chose which position said product has?
We’re looking to have the very first product (row 1, col 1) to be taking up two columns and two rows, available upon our choosing.

You will find the credentials in the extra information-field.
Regards,
Rickard.

Hello,

Yes, it looks exactly the same as on our demo on this page. The only difference is your product hover style which shows additional information below the image.

Unfortunately, you can’t select which items to have double size.

Kind Regards

[Author]

Posts