Docs

[nrousseau74]

Hello !
I’m trying to figure out how to have a catalog page with aligned product images. I’ve read a few threads but still can’t do it.

URL: https://www.delpann.com/product-category/cleaning-polishing-products/10-4-cleaners/
WP: 4.5.3
X: 4.6.0
Cornerstone: 1.3.0
Woocommerce: 2.5.5

Thank you !

[Rupok]

Hi there,

It seems you are using some very long image that breaking the alignment. You should use same or almost similar dimension.
You can add this under Custom > CSS in the Customizer.

.woocommerce.archive .product-category.product img {
  max-height: 165px;
  width: 100%;
}

Hope this helps.

[nrousseau74]

Thank you for the answer.
I used this code

.woocommerce.archive .product-category.product img {
  height: 182px;
  width: auto;
}

and it worked for that particular page, but it doesn’t seem to work accross all the other pages… ??
Per example: https://www.delpann.com/product-category/universal-accessories/door-handle-covers/

– the products are not displaying one after the other (blank spaces between)
– the hover doesn’t show completely when a SKU is displayed
– the product name is not completely written.

[Rupok]

Hi there,

You can try adding this as well :

.woocommerce li.product .entry-featured img {
  height: 200px;
}

.woocommerce li.product.first {
  clear: none;
}

.woocommerce li.product.last {
  margin-right: 4%;
}

.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
  width: 21%;
}

But I think it would be better if you add same size image for them.

Thanks

[nrousseau74]

It works perfectly for the category page:
https://www.delpann.com/product-category/cleaning-polishing-products/10-4-cleaners/

but it does not fix width automatically in the products listing page… images are stretched:
https://www.delpann.com/product-category/cleaning-polishing-products/10-4-cleaners/remover-cleaner/

[Jade]

Hi there,

Please add this code:

.woocommerce li.product .entry-featured img {
    min-width: 1px !important;
}

Hope this helps.

[nrousseau74]

Worked to fix the image width, thanks.
But stiil have some spaces between products and some are not aligned,
as you can see here:
https://www.delpann.com/product-category/knobs-pedals/
??

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
    min-height: 182px !important;
}
.woocommerce li.product {
    margin: 0 !important;
}

Let us know how this goes!

[Author]

Posts