Join Patrick Rauland for an in-depth discussion in this video Change image sizes, part of WordPress: Customizing WooCommerce Themes.
- [Instructor] One of the easiest things you can do to customize a theme is for you to make sure that your theme has a photo area that matches the type of product you sell. So if you're selling tall skinny products, you should have a tall skinny space for a product photo on your product page. With the H+ Sports brand, we mostly have nutritional supplements and mineral water. Both of these come in boring bottles. They're just packaging, and I don't want to use a lot of screen real estate showing off packaging. I'm going to shrink these images so that in a future video we can fit a bit more content in on the right side here, which is actually useful to the customer.
So in the WordPress admin, under WooCommerce Settings, I'm going to go to Products, and then Display. If I scroll down here, we can change the size of the Single Product Image. Right now it's 600 by 600, and shrunk a little bit by WordPress or by the theme. I'm going to change this to 250 by 250 to make it quite a bit smaller and then click Save changes. If I go back to my site now, you'll notice that the product image is a lot smaller.
This is a perfectly fine place to stop, but if you want to take it a step further, that image is being reduced with CSS, which takes a little bit of processing time in your browser. If possible, it's usually better to crop the images at the size at which they'll be rendered. Editing photos is resource-intensive, so WordPress doesn't do it on the fly. WordPress only crops images when they're uploaded, so if you make changes to how images are display, like we just did, you'll have to reupload all your photos, or the much easier option is to use a plugin.
In the WordPress admin, I'm going to go to Plugins, Add New, and then search for regenerate thumbnails. Install, Activate. Once it's activated, I'm going to go to Tools, Regen Thumbnails, and I'm going to click Regenerate Thumbnails. We have 75 images on this site, so it could take a few minutes, and we're all done. If we go back to the product page, these images should naturally be 200 by 250 pixels, which they are, and that's how you resize images.
This course covers the fundamentals of building custom WooCommerce themes. Learn about using WooCommerce hooks, template overrides, PHP, and CSS to style the different store pages, and add custom imagery and icons to fit your branding. Author Patrick Rauland also introduces UX design techniques that encourage customers to buy, such as highlighting savings and adding social media icons for sharing.
- Selecting a base theme
- Matching theme colors
- Overriding and updating WooCommerce templates
- Using hooks
- Modifying your product page: images, tabs, icons, and more
- Modifying the shop page, including customer savings
- Modifying the checkout page
- A/B testing your changes