Woocommerce store page grid “read more products” not aligned

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.

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

[lpsdlv]

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.

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

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.

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

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;
}

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