Set Product thumbnails to have Fixed Height in Shop (WooCommerce)

Hi!

I am uploading two files from my freshly-made e-shop in WooCommerce by using WoodMart theme.

As you can see in the screenshots, if the Title of a product in Shop page requires two lines to be appeared, then it affects the Height of the thumbnail.

Therefore, and because this breaks the uniformity of the appearance, how can I set a fixed height (measured in lines-of-text or in pixels) in product thumbnails?

What I want to achieve is to allow always only 2 lines of text in Title. If a product has a short title, then the second line will be blank. If a product has two lines of title, then we are fine. If a product has more than two lines of title, then it should appear only the first two lines of the text as title and maybe in the end some dots “…”!

How can I achieve this with WoodMart?

Attachments:

You must be logged in to view attached files.

Hello,

You need to configure the tile to be broken into lines. Please find the option in the Theme Settings > Product Archive > Product Styles.

Please check this manual: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

If you have any questions please feel free to contact us.

Best Regards

[ingenuitor]

Hello, this idea does’t work in practice as many images are of different heights and no way too resolve this using the above method.

What we need is a simple css rule to control the height for the product grid block to be equal regardless of the image image used. You provided this before, but with updates that is now lost somehow, please advise and thank you.

I’m just not sure how to make that work here yet, but I do have it working on a hand coded css project for testing, not using the same platform. So it’s a little hard to compare, but this is what I have so far.

.products .product-grid-item IMG {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
}

Thanks

• This reply was modified 1 year, 9 months ago by ingenuitor.

This used to work, can you kindly advise and thank you?

/*store product grid items*/
.products .product-grid-item
{
	display: block;
	position: relative;
	width: 100%;
}
.products .product-grid-item .product-element-top
{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.products .product-grid-item IMG
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
}
.products .product-grid-item IMG
{
	display: block;
	width: 100%;
	max-height: 100%;
}

We even tried this and it’s not working, seems we do no have the right classes? Please advise and thank you.

.woocommerce ul.products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.woocommerce ul.products li.product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.woocommerce ul.products li.product a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
   flex-direction: column;
}
.woocommerce ul.products li.product a:first-child {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.woocommerce ul.products li.product .button {
  margin: 1rem auto;
  max-width: 200px;
  width: 100%;
}

Hello,

Please check this manual if you want to configure the image: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

If you have any questions please feel free to contact us.

Best Regards

Hello as I stated before this doesn’t work in practice, as we did try that method already, we have many images that are much taller and some that are shorter, what we are after is a perfect equal block for all cases.

This can be done with css, but the code that works on other themes as seen above does not work in this theme for some reason.

Can you please advise on this and thank you again.

Hello,

Please remove all the custom CSS and enable this option: https://monosnap.com/file/F1gaAm0RoNS7MUpJWDE2ktvSbpkJtM

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts