Change Main Gallery Image Size

Changing the default image size requires a few steps. There is a PHP function and some custom CSS that you will need to add. Both should be added to your WordPress theme. The CSS edits can also be added in the Custom CSS in the Cart66 Settings tab in WordPress admin. 

Here is the filter you need to add to your functions.php file:

function cc_add_gallery_image_sizes() {
    add_image_size( 'cc-gallery-thumb', 60 ); // 30 pixels wide is default - change this
    add_image_size( 'cc-gallery-full', 400 ); // 250 pixels wide is default - change this
}

add_action( 'admin_init', 'cc_add_gallery_image_sizes' );

The next step is to add some CSS to your theme and edit the height of a few elements. In the example below I am changing the widths to 400px:

.cc-product-grid-image-container {  min-height: 400px;}
ul.cc-product-list li {display: block;float: left;width: 400px;min-height: 400px;margin: 0px 15px 35px 15px;padding: 0px 10px 0px 10px;}
.cc-product-grid-image-container {min-height: 400px;}

Lastly, you may need to  regenerate your thumbnails using this plugin.

You don't have to change the size to change the design. Another idea would be to just use a custom layout and not use the Cart66 version of the gallery.  Customizing The Product Page Layout is really easy using WordPress.

Still need help? Contact Us Contact Us