Woocommerce store page grid “read more products” not aligned

This topic has 7 replies, 2 voices, and was last updated 1 year, 10 months ago by Aizaz Imtiaz Awan.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 22, 2023 at 10:28 pm #437031

lpsdlv
Participant

Hello,
I have a problem where on woocommerce page the action buttons are not aligned for products that do not have a price and they say “Read more” instead of “add to cart” or “select options”. I think it might be a bug where the styling was not applied to this button type.

January 23, 2023 at 2:58 pm #437203

Aizaz Imtiaz Awan
Keymaster

Hello,

Please once try activating the Even product grid for desktop option under the Theme Settings in this regard and then check back the concern again.

The option can be found under the Dashboard > Theme Settings > Product archive > Products styles > Layout > there you can find the above said option: https://snipboard.io/Pejns6.jpg

You can read more about it here on the following link: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

Best Regards

January 23, 2023 at 3:06 pm #437208
lpsdlv
Participant
Hello,
It is already activated – https://i.imgur.com/Q2KrPma.png

As I already said there is a bug where the option doesnt work for products that doesn`t have a price set. Please check the screenshot in extra information.
- This reply was modified 1 year, 10 months ago by lpsdlv.
January 24, 2023 at 8:36 am #437342
Aizaz Imtiaz Awan
Keymaster
Hello,

Sorry for the inconvenience but this issue is happening on your Site due to the Product Image size difference. Some images on your Site are low in dimension in comparison to others which is why it is looking like this.

So, please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
```
.product-grid-item :is(.product-image-link,.hover-img) img {
    object-fit: contain !important;
    height: 12em !important;
    width: 12em !important;
}
```
Hope this helps !

Best Regards
January 24, 2023 at 12:20 pm #437379
lpsdlv
Participant
Hello,

This does make the situation better, but it still isnt fully fixed. The ”even product grid” option adds this css:
```
.products[class*="wd-stretch-cont"] :is(.price,.wrap-price,.product-rating-price) {
    margin-top: auto;
}
```
Which aligns the product price and button to the bottom. But I have products without a price which means that for those products the button isnt aligned.

I`ve added screenshots in private content.
January 24, 2023 at 4:23 pm #437444

Aizaz Imtiaz Awan
Keymaster

Hello,

Yes, the Price is the main difference here but the Even Product Grid option as you know works in general for all Products and usually for all Products the Prices are defined.

Now for the Products without the Prices defined, there aren’t any separate classes generated for them which we can easily target. So, in general the best solution here would be to have the Products title lines limit to one then you can have your all Products show fine with Even grid enabled.

To limit the Product title length to one line you need to go to Dashboard > Theme Settings > Product archive > Products styles > there under the Layout you can find the option of Product title lines limit > there you can select One Line: https://snipboard.io/37kF0W.jpg

Hope this works out for you !

Best Regards

January 25, 2023 at 11:58 am #437676
lpsdlv
Participant
I added .wd-add-btn to the css and it looks better
```
.products[class*="wd-stretch-cont"] :is(.price,.wrap-price,.product-rating-price, .wd-add-btn) {
    margin-top: auto;
}
```
January 25, 2023 at 1:18 pm #437696

Aizaz Imtiaz Awan
Keymaster

Hello,

You are Most Welcome.

We are glad that you managed to solve the problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.
Author

Posts