[Plugin: WooCommerce] Adding a new image size

Hey everyone,

I want to a WooCommerce theme which has two image sizes on the catalog page. Bigger images for products that should be featured and smaller images for every other product. On every page there should be two big images and around 20 smaller, normal images.

Now what I thought would be handy was adding a custom image size setting in the backend. I did that using the following code. It gets displayed correctly and the value gets saved correctly in the database. However, the input field does not have the correct value.

add_filter('woocommerce_product_settings', 'add_product_thumbnail_size');

/**
 * Add another setting for product thumbnail sizes
 * @param $settings
 * @return mixed
 */
function add_product_thumbnail_size( $settings ) {

	$settings[] = array(

			'title'    => __( 'Catalog Images Big', 'woocommerce' ),
			'desc'     => __( 'This size is usually used in product listings for big images', 'woocommerce' ),
			'id'       => 'shop_catalogbig_image_size',
			'css'      => '',
			'type'     => 'image_width',
			'default'  => array(
				'width'  => '678',
				'height' => '300',
				'crop'   => 1
			),
			'desc_tip' =>  true,

	);

	return $settings;
}

Is there maybe another, better way to achieve multiple image sizes? The big images should have the same height as the small images but should be twice as wide. That’s why I thought having just one image size and resizing them with html or css would not look good, because either the big or the small image would look distorted. So instead I wanted to create a new image size so it gets cropped correctly.