Hello Support!
I would appreciate some help with a display issue with woo commerce product page on my site. I’ve made all the woo formats but it looks like Enfold may be overriding them. The problem is that the first product image in the grid displays correctly, but the images in the next two containers are cut off. It looks like the containers are not all the same size, but the images are the same height and width.
I also tried a couple of code fixes in CSS but that didn’t fix it either. This is the latest:
/* Force consistent image heights */
.woocommerce ul.products li.product a img {
height: 250px; /* Adjust height as needed */
object-fit: cover; /* Ensures image covers area without stretching */
}
/* Force equal product container heights */
.woocommerce ul.products li.product {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Thank you for looking into this for me!
Valerie
Hey Valerie,
Your woo shortcode to display the products was using cropped images
[products=3]
I added this to your child theme to use the uncropped images:
add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
return 'woocommerce_thumbnail';
}
Best regards,
Mike
Hi Mike,
It’s perfect. You’re the best! Thank you so much. Now I can launch my new eBook.
We can close this thread.
Warm regards,
Valerie
Hi,
Glad that we could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.
Best regards,
Mike
