In WooCommerce store, however on archive pages, such as categories and tag pages, You face an issue of product thumbnails being different heights. if your product images are different heights, your product names and prices will be out of alignment with other surrounding products.
You can solve it by adding a few lines of code to your functions.php file and a little CSS.
Justo go to your Theme Functions file and add the following code. Then the image will be wrapped with a div tag that has a class “archive-img-wrapper”. You can change the class name to whatever you want.
// Add the div to wrap the image on the archive pages add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "";'), 5, 2); add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "";'), 12, 2);
For Sub Category Thumbnails?
// If there is sub categories on the archive page add a wrap around their images as well add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "";'), 5, 2 ); add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "";' ), 12, 2 );
Now set a height to your div by adding height to the class name in your CSS file.
For Example
.archive-img-wrapper { height: 200px; } .sub-archive-img-wrapper { height: 300px; }
It is not necessary to use different classes for the subcategory thumbnail image, but by using different class you can have extra control if you want to set a different height or any other CSS
The post WooCommerce: Add A Wrapper Around Thumbnail Images On Archives appeared first on Wasim Sama.