Return to previous page

Better product grid styling options (align)

This topic has 8 replies, 3 voices, and was last updated 3 weeks, 6 days ago ago by Jack Richardson

Tommy

Participant

October 23, 2024 at 20:10

Hello,

i see in support/comment section you wrote this:

This https://prnt.sc/VZ7deSoNiPFk can be changed to https://prnt.sc/WuiRzI5QLyem

Before the buttons looking messy. But after you changed it to one line now the images jumping around. Any chance to have the images also in one line please?

BR
Tommy

#420209 Copied

7 Answers
Luca Rossi

Support staff

October 24, 2024 at 12:22
Hi @Tommy,

Please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.content-product .product-content-image img,
.etheme-product-grid-image img {
    max-height: 300px;
    min-height: 300px;
    object-fit: cover;
    width: auto;
}
.content-product .product-title,
.etheme-product-grid-title {
    min-height: 50px;
}
```
Hope it helps!
#420317 Copied
Tommy

Participant

October 24, 2024 at 13:50

Hello,

i already was able to fix it via custom css.
But why you developed product grid that looking so strange please?

I never have seen a theme grid that stepping up and down without breaking the design before. 🙂

Do you plan to fix it in next theme update please?

BR
Tommy

#420338 Copied

Tommy

Participant

October 24, 2024 at 13:58

Hello,

second question:
added your custom css to global css section.
For some tabs its working, for example in “indoor plants”. Check also attached screenshot.

But in tab “Outdoor plants” we still have steps/stages in design. Screenshot: https://ibb.co/h21sZ8s

Before we was using another theme and that handle all products side by side with equal height design.

Link in private content area.

BR
Tommy

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#420341 Copied

Luca Rossi

Support staff

October 25, 2024 at 06:45

Dear Tommy,

We hope this message finds you well.

We have noticed that some products on your site do not have reviews or variation swatches (such as color, size, etc.), which may result in inconsistent product heights.

To ensure a uniform appearance for all products, we kindly recommend switching the product layout to the “Overlay content on image” option. You can view an example of this layout here: [https://prnt.sc/V-knG0lPvgTv](https://prnt.sc/V-knG0lPvgTv).

This adjustment will help maintain a consistent size for all product displays.

Thank you for your attention to this matter. Should you have any questions or need further assistance, please don’t hesitate to reach out.

Best regards,
The 8Theme Team

#420386 Copied

Tommy

Participant

October 25, 2024 at 07:26

Hello,

why we have to find “workarounds” at the same time other simple themes and premium themes find solutions like equal height option for all product widgets. Your theme shared in end of 2024 the equal height option. But only for 1 product widget and not for all.

It does not make sense to have one product section in equal height and the other one looking messy. What is the logic of this development from you and what is the logic for the visitor in our website if they see this? 🙁

Your solution is:
Now we need to have different product designs?! to solve that issue? We solve one issue and make another one: different product grid designs. Did you see a real online store with different product grid designs in one single page? 🙁

Please add equal height option also for this widget. Yesterday two other clients which also purchased a licence asking me the same: why we have stair effect and how to solve?

And second point:

We have noticed that some products on your site do not have reviews or variation swatches (such as color, size, etc.), which may result in inconsistent product heights.

That not only depends to reviews and variation swatch elements in grid.

Please open this site:
(privat content)
And select the outdoor plants tab. Check also attached screenshot:
https://ibb.co/T2bQQbk

You can see there is no review and no variration swatch and its still looking like a beginner website which have messy stair effect. 😉

I never seen this in professional store because most of all have equal height for better consistency in design.

1. How to solve?
2. Why you do not all equal height option to all product widgets and adding it only to one simple product widget? Its not better to have this in all widgets which have product grid?
3. Your solution is not usefull in real business case: How visitor will see the price and title and all other information? They need to hover each product one by one to see most simple information of a product.
4. This messy effect in product grid with tabs is not based on this issue:
“We have noticed that some products on your site do not have reviews or variation swatches (such as color, size, etc.), which may result in inconsistent product heights.”
Its based on this problem: you have no equal height in product grid with tab. 😉 You adding equal height to one product grid only in last update, but not in other product grids. 🙁 And this is the real problem. Why?

BR
Tommy

(We will share this terrible issue in our ticket system to all clients which purchased this licence. We stopping them to review negative in themeforest, because i told them there is an solution for this simple need. But now we see there is no solution, only more terrible workarounds that need to hover each product to see basics like product title, price …)

Please contact administrator
for this information.

#420399 Copied

Tommy

Participant

October 26, 2024 at 09:51

And third issue:
Why your “equal height” option to not make the images into same size like in other themes? Why we still need to use again and again custom css to fix so simple needs?

You shared custom css to fix jumping images which we never had with same product images before.

Its feeling we jump into theme with a lot of functions but most of them have no deep dive. Do you plan to improve this equal height option please?

Finally:
Users who do not ask about custom css will have a product grid that looking like this, also if equal height is enabled:
https://ibb.co/zbH9hNR

We work on very professional projects and need a theme that works like a theme shoud look and work in deep details in 2024. But rihgt now we stuck again in simple basics of the last years like equal height option. 🙁

BR
Tommy

#420556 Copied

Jack Richardson

Support staff

October 28, 2024 at 15:04

Dear @Tommy,

I hope this message finds you well.

You can configure the image sizes directly within the WooCommerce settings by navigating to Customizer -> https://woocommerce.com/document/woocommerce-customizer/product-page-and-images/#product-images. Additionally, in many Elementor product widgets, there are options available to select the image size, allowing you to easily apply the sizes you have previously configured in your WooCommerce settings.

As you mentioned that you are not new to website development, you may already be aware that after uploading new images, it is necessary to regenerate thumbnails. This can be done using plugins that offer this functionality. One of the most popular options is the https://wordpress.org/plugins/force-regenerate-thumbnails/ plugin.

Should you have any further questions or need assistance, please feel free to reach out.

Best regards,
Jack Richardson
The 8Theme Team

#420720 Copied
Viewing 8 results - 1 through 8 (of 8 total)