By default, the CommerceKit swatch image size is 100×100 – this is rendered as 60×60 on screen to ensure that it looks sharp on retina devices. If you want to change this, it’s a two-step process.
1. Add the following custom function
You’ll need to add this to your child theme’s functions.php file, or via the Code Snippets plugin. This will make the image swatch size 300×300.
|
1 2 3 4 5 6 7 8 9 |
add_action( 'init', 'remove_commercekit_swatch_size', 0 ); function remove_commercekit_swatch_size(){ remove_action( 'init', 'commercekit_as_add_image_size' ); } add_action('after_setup_theme', 'add_new_commercekit_swatch_size', 11); function add_new_commercekit_swatch_size() { add_image_size( 'cgkit_image_swatch', 300, 300, true ); } |
2. Regenerate thumbnails
You’ll need to also regenerate your existing images to reflect this new image size. Install and run the Regenerate thumbnails plugin to do so.
Before running the regenerate thumbnails action, you should see that the cgkit_image_swatch size has now been updated to 300 x 300.
3. Custom CSS (optional)
If you want to adjust the product page swatch thumbnails to be slightly larger, you can include the following CSS within your child theme, or via the customizer.
|
1 2 3 4 |
.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image button { width: 100px; height: 100px; } |
