How to: Edit Product Images for an eCommerce Site, Change the Size of WooCommerce Cart Thumbnails and More
Editing product images for an eCommerce site can be a frustrating task. It can be especially annoying if you have a large product catalog with varying shapes and sizes. In this tutorial, I'll show you the process that I use when editing product images so that they appear as uniform as possible on every page of the eCommerce site.
In addition to general product image editing, I'll show you how to do a couple more specific things that are related to WooCommerce images. Specifically, you'll see how easy it is to adjust the size of the WooCommerce Cart page product thumbnail images by using the “Custom CSS” text box in the WordPress admin. You'll also learn how to increase the size of the homepage “Featured Products” and “Recent Products” images for the WooStore theme so let's get started.
Use a Product Template Image to Make your eCommerce Site look Uniform
From my experience, using a product template image is the best way to ensure that images appear uniform on your eCommerce site. The product image template can be any dimensions you choose and each original product image should be edited to fit within the template. Use the same image template for all of your products.
Photoshop is the image editing program used in the tutorial video below. There are many alternatives to Photoshop so if you don't have it, no worries. Give Gimp a try. It's an open source (free) image manipulation program that will work great for editing eCommerce product images. Just Google “gimp download” and you'll have all the tools you need to do this.
Watch our video below to learn how to edit product images for an eCommerce site…
Increase Size of WooCommerce Cart Page Product Thumbnail Images
Need to adjust the size of the product thumbnail images that appear on the WooCommerce Cart page? If so, changing the size of the Shopping Cart page product thumbnail images is as easy as doing the following…
In the WordPress admin go to WooStore > Theme Options > General Settings > Display Options > copy and paste the CSS below into the “Custom CSS” text box > change “32px” to any number > Save All Changes
Important Note: WooStore is the theme used in our tutorial video. The same CSS should work with other WooCommerce specific themes such as; Mystile, Artificer, Shelflife, Emporium, Argentum, Peddlar, Superstore, Coquette and Wootique.
Watch our video below to learn how easy it is to change the size of the WooCommerce Cart page product thumbnail images…
Increase Size of WooStore “Featured Products” and “Recent Products” Images
Adjusting the size of the WooStore theme “Featured Products” and “Recent Products” homepage thumbnail images is really easy. To change the size of the Featured Product images log into the WordPress admin and go to…
WooStore > Theme Options > General Settings > Display Options > copy and paste the CSS below into the “Custom CSS” text box > change “180px” to any number to change the size of the Featured Products > Save All Changes
To make the Recent Products thumbnail images larger or smaller use the CSS below…
Just change “175px” to any number to change the size of the Recent Products.
Important Note: The featured products and recent products CSS above was only used with the WooStore theme. It has not been tested with other themes but feel free to do so.
Our video below will show you how to change the size of the “Featured Products” and “Recent Products” images on the homepage of the WooStore theme…
Thanks for taking time to read this tutorial on eCommerce product images. If you need help adjusting image sizes for themes other than WooStore, let me know by posting a comment
below in the Upload WP Community Forums. For more information on Woocommerce product images check out our tutorial on… WooStore Product Setup.