Get a fast, conversion-focused WooCommerce theme in 2024. Switch to Shoptimizer.

Home Documentation Shoptimizer Code Snippets Change CommerceKit Swatch Size

Change CommerceKit Swatch Size

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.

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.

$50
Off

Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!