Home › Forums › WoodMart support forum › Woocommerce store page grid “read more products” not aligned
Woocommerce store page grid “read more products” not aligned
- This topic has 7 replies, 2 voices, and was last updated 1 year, 9 months ago by Aizaz Imtiaz Awan.
-
AuthorPosts
-
January 22, 2023 at 10:28 pm #437031
lpsdlvParticipantHello,
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 AwanKeymasterHello,
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
lpsdlvParticipantHello,
It is already activated – https://i.imgur.com/Q2KrPma.pngAs 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, 9 months ago by lpsdlv.
January 24, 2023 at 8:36 am #437342
Aizaz Imtiaz AwanKeymasterHello,
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
lpsdlvParticipantHello,
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 AwanKeymasterHello,
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
lpsdlvParticipantI 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 AwanKeymasterHello,
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. -
AuthorPosts
Tagged: alignment, button, store, woocomerce
The topic ‘Woocommerce store page grid “read more products” not aligned’ is closed to new replies.
- You must be logged in to create new topics. Login / Register