How to stretch the images to be equal height on template for shop categories

andreasmu2009 · July 23

Hello,

I would like to ask how to stretch the images to be equal height on template for shop categories, i have checked all the settings there is not any way i can change the height of the images

Kind regards,

Andreas

andreasmu2009 · July 23

Also, how is it possible to remove the result count of products from the default template of product categories?

Phil · July 24

Hi,

1) Changing the image height require writing a custom CSS code. If you send a link to your website I can help you prepare that.

2) You can hide the count in the element settings:

Best regards

andreasmu2009 · July 28

Hello,

Thanks for the response, in the default template of product list i hide the count with this:

.woocommerce-loop-category__title .count {

display: none; /* Hides the count element */

}

By the way what selectors i need to use to css for having fixed height, if i create a new product list using templates from Bebuilder, because as i told above there is not such option given to the settings.

Best regards.

websitedude1985 · July 29

This should be a setting in the builder - theme is super flexible but I am finding basics like this missing also. Hopefully it will come in an update

Phil · July 29

https://forum.muffingroup.com/betheme/discussion/comment/257581#Comment_257581

Please attach a link to your website, and I will help you with this CSS.

https://forum.muffingroup.com/betheme/discussion/comment/257585#Comment_257585

Please leave all your suggestion in the following topic:

https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest

Best regards

andreasmu2009 · July 29

Hello,

Currently, i am using the default product list template and i have hidden the count of products with the CSS above, i would like to have equal height to the product list template. For me both options will be great either to create a new template for this page or use the existing one having some CSS modified.

Development URL examples:

https://dev.avourdiadis.gr/katigories-epiplon/epaggelmatika/xoros-grafeioy/grafeia/

https://dev.avourdiadis.gr/katigories-epiplon/epaggelmatika/aithoysa-anamonis/kanapedes/

Best regards,

Andreas

Phil · July 30

Try the following CSS code:

.woocommerce .products .product img{
 min-height: 350px;
 max-height: 350px;
 object-fit: cover;
}

Best regards

andreasmu2009 · August 1

Thanks that works great!

Do you have any recommendation on which resolution is good to upload the images for the shop?

Albert · August 2

Sorry but I don't. It all depends on dev anc customer's needs. In different cases, images sizes might be different.

How to stretch the images to be equal height on template for shop categories

Comments