- WooCommerce Cookbook
- Patrick Rauland
- 506字
- 2021-07-23 19:35:07
Changing image sizes in WooCommerce
If your products fit nicely into perfectly square images and they look good as they are in your theme, then you can probably skip this recipe. For some themes or some types of products, though, it's really beneficial to change how WooCommerce crops your images. If you're selling ties, for example, it's probably worth telling WooCommerce to crop them so they're long and skinny.
Getting ready
It's best if you have already created a couple of products and look at them to compare how the Featured Image and the Product Gallery look on their product pages. If you see gaps around the images, you may be able to increase the product image size and take advantage of that space.
How to do it…
Changing image sizes can be done in two parts. The first part will change the settings, and this will affect all future uploads. The second part will install a plugin that will force your website to recrop every image, which will affect all past uploads. Let's have a look at the following steps that depict these two parts:
- From the WordPress admin, go to WooCommerce | Settings.
- Click on the Products tab.
- Click on the Display tab and then scroll down to Product Image Sizes.
- Enter your new sizes.
- Catalog Images controls the size on the shop page and category pages.
- Single Product Image controls the size of the featured image on the product page.
- Product Thumbnails controls the size of the gallery thumbnails on the product page.
- When you're done, click on the Save changes button at the bottom of the page.
Now that you have the new images set, any future uploads will use those settings. We'll have to install a free plugin to resize all of the existing images. Let's have a look at the following steps that illustrate the step-by-step installation of this plugin:
- Add a new plugin under Plugins | Add New.
- Run a search for, and install and activate, the Regenerate Thumbnails plugin.
- Click on Tools | Regen. Thumbnails.
- Click on Regenerate All Thumbnails and wait for your site to process all of the images.
You should now be able to go back to any of your product pages and see the new image size. In my case, I made the main featured image tall and skinny by setting Single Product Image to 150 x 300.
We are now done with changing the image sizes for your products.
Tip
You might be able to see a little bit of distortion in my image. That's because I uploaded an image that's too small. WooCommerce blew it up to fit the dimensions I specified. If you don't want to have blurry images, the best piece of advice is to upload high-quality large images. You can also follow this video tutorial at http://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/. If you want to learn more about the different ways you can crop images and what the different types of cropping are, there is a great article on WPExplorer at http://www.wpexplorer.com/wordpress-image-crop-sizes/.
- 從零開始：數字圖像處理的編程基礎與應用
- Microsoft Dynamics 365 Extensions Cookbook
- FreeSWITCH 1.6 Cookbook
- Python Network Programming Cookbook（Second Edition）
- Python自然語言處理（微課版）
- Mastering Yii
- Protocol-Oriented Programming with Swift
- ASP.NET Core 2 Fundamentals
- Python圖形化編程（微課版）
- 打開Go語言之門：入門、實戰與進階
- QGIS 2 Cookbook
- 微信小程序開發實戰：設計·運營·變現（圖解案例版）
- Laravel Design Patterns and Best Practices
- Learning Shiny
- Mastering Responsive Web Design