Change Product Category Image Dimensions

[jessebrito]

Hello,

I would like to display my website’s product categories on the shop page as a single column (1 listing/column per row) with a full-width image background like this. Products shown in the category archives page will be displayed in a regular three-column layout.

Can I change the dimensions of the product category image? If not, can I disable the image but apply it as a background image on li.product-category?

Please let me know. Thank you!

[jessebrito]

Hey, I have the following code:

/* Change product category's thumbnails */
add_filter( 'woocommerce_get_image_size_thumbnail', 'resize_category_catalog_thumbnail');
function resize_category_catalog_thumbnail( array $size = array() ) {
 if (is_product_category()) {
  $size = array(
   'width' => 1200,
   'height' => 300,
   'crop' => 1
 );
 return $size;
 }
}

On inspection, this seem to update some categories, but they do not follow the specifications. New category thumbnails shown are 1200px in width but not 300px in height. It also does not update older category thumbnails from 300 x 300 to the new dimensions. I tried to regenerate thumbnails and didn’t work.

Any help? Thank you!

[friech]

Hi @jessebrito,

Thank you for writing in, to make the category page display a one full-width, please navigate to Theme Options > WooCommerce and change the Shop Columns to one, but the background thing will require a template customization though, regretfully we can not provide support for customization, you can follow this link.

@jessebrito

Can I change the dimensions of the product category image?

Please navigate to Appearance > Customize > WooCommerce > Product Images

If the images did not regenerate automatically, please use the Force Regenerate Thumbnails plugin.

Hope it helps,
Cheers!

[jessebrito]

Hello,

Because I want to keep my products in a three-column layout on subsequent archives (like category archives) pages, I did not change the Theme Options > WooCommerce settings.

Instead, I added the following CSS for the single-column product categories:

---

body.shop_archive div.woocommerce ul.products li.product-category { width: 100% !important; } body.shop_archive div.woocommerce ul.products li.product-category a img { max-width: 1200px !important; width: 100% !important; height: 150px !important; object-fit: cover !important; } body.shop_archive div.woocommerce ul.products li.product-category a h2.woocommerce-loop-category__title { margin: 40px; position: absolute; bottom: 0; color: #fff; font-size: 31px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2rem; } body.shop_archive div.woocommerce ul.products li.product-category a h2.woocommerce-loop-category__title mark.count { display: none !important; }

I added the class shop_archive to the body by using the following code in my child theme’s functions.php:

/* Add class to body for category archives */
add_filter( 'body_class', 'woo_cat_taxonomy_in_body_class' );
function woo_cat_taxonomy_in_body_class($classes) {
  if (is_product_category()) {
    // Apply a general class for all product categories
    $classes[] = 'product_cat';
  } else if (is_shop()) {
    $classes[] = 'shop_archive';
  }
  return $classes;
}

---

I also found you can change the columns with the following code in functions.php:

/* Change columns displayed per row depending on page types */
add_filter('loop_shop_columns', 'loop_columns', 999);
if(!function_exists('loop_columns')) {
  function loop_columns() {
    if (is_product_category()) {
      return 3;
    } else {
      return 1;
    }
  }
}

---

Hope this code can help someone else. Thank you!

[jade]

Hey Jesse,

Thanks for sharing these codes and glad to hear it’s sorted.

Cheers!