The space on the page is for 3 products put the code is producing 4 products per row, so there is a line break after each 4th product.
If you want 3 products per row, some themes have a setting for this. Look through your theme options.
If not, there is a code snippet you can try to set 3:
https://docs.woocommerce.com/document/change-number-of-products-per-row/
This snippet goes in functions.php for your child theme or you can use this plugin for the code:
https://wordpress.org/plugins/my-custom-functions/
Thread Starter
msm360
(@msm360)
Thanks for the info. I was able to fix it with the following css.
.row-count-4 .product-category {
width: 290px !important;
}
Thread Starter
msm360
(@msm360)
Another Grid issue we seems to be having is cropping. For some reasons the product pictures are not uniformly cropped and display at various sizes.
(example: http://gelatofino.com/product-category/3layercake/)
Is there a way to force all product pics to have the same crop dimensions and fill accordingly?
.products-grid .product img {
height:320px
}
The 320 value is a compromise between stretching some and squashing others.
Thread Starter
msm360
(@msm360)
works great for the product grids and slider!
Unfortunately it stretches out the products pics here (below slide): http://gelatofino.com/
here: http://gelatofino.com/product-category/sorbet/
and here: http://gelatofino.com/product-category/gelato/
You’ll need to add another selector to restrict the effect to that category. You can get the category selector class from the body tag. For the three layer cake its term-77, so
.term-77 .products-grid .product img {
height:320px
}
You can have different styles for different categories if you need to.
Thread Starter
msm360
(@msm360)
I defined the terms for all the pages. worked great. Thanks!
the only thing I can’t seem to restrict is the Featured Products Slider on the bottom of the home page. http://www.gelatofino.com/
.home .vc_general img {
height:320px
}
