Docs

[pioneer_ma]

Hello! One thing is driving me crazy for a long time) You see, when the product grid is generated inside the category, each product has own li-element. Then goes a div entry-product which contains two div-blocks: entry-featured and entry-wrap – one for the product image, other for it’s name and price. And that is ok, cause allows to align these elements separately, so the images are looking the same size with this code:

.entry-product .entry-featured {
	height: 230px; 
  width: 180px;
  display: inline-block;
  position: relative;
}

.entry-product .entry-featured img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Problem is that when showing categories grid everything is messed up. The structure of every element is different – just the li-element and everything goes in it. The shop got many products, above 16k, so regenerating the thumbs is going to take about 40-50 hours and dies somewhere in between(

Question is. Maybe there is a way to edit the woocommerce template that is used to generate the categories grid and make it structured like product one. I just can’t find one( Maybe there is another way to do it?

P.S. Tried to use the Essential grid, but it is not working on our VPS server somehow. Can’t find the reason why.

[pioneer_ma]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

li.product-category.product img {
    max-height: 100px;
    width: auto;
    margin: 0 auto;
    display: block;
}

Hope it helps 🙂

[pioneer_ma]

Worked lika a charm! Thanks!!

[Thai]

Glad we were able to help 🙂

If you need anything else please let us know.

[Author]

Posts