Product Page and Product Images

The WooCommerce Customizer includes a couple different display settings for the Product Page and Product images. On this page you’ll learn how to:

  • Configure the Sticky Add-to-Cart and Product Pagination features for single product pages.
  • Configure product thumbnail sizes and cropping.

Product Page

↑ Back to top

The WooCommerce Customizer lets you choose how to display product pages. Navigate to Appearance > Customize > WooCommerce > Product Page and you’ll find two display options for the product page:

Sticky Add-to-Cart and Product Pagination are the two options you can activate in the Product Page menu in the Customizer.
  • Sticky Add-to-Cart – this is a small content bar at the top of the browser window that includes relevant product information and an add-to-cart button. It slides into view once the standard add-to-cart button has scrolled out of view.
An example of what the Sticky Add-to-Cart content bar looks like with Storefront theme active.

Sticky Add-to-Cart: A banner appears at the top of the product page when scrolling, allowing you to add the item to your cart without needing to scroll back.
  • Product Pagination – This option displays the next and previous product links on product pages by displaying a thumbnail image. Hovering on the thumbnail reveals the product name/title.
Example of what product pagination looks like when activated.
Product pagination displays the next product and previous product in your shop’s list as thumbnails on the right and left side of the single product page.

Product Images

↑ Back to top

The next menu item in the customizer is Product Images. Here you set the the size and cropping of Catalog and Thumbnail images.

Product Image Types

↑ Back to top

First, let’s go over the different types of images that appear on a WooCommerce store:

  • Catalog Images are medium-sized images on the Shop page, Category pages, and for Related products, Up-sells, and Cross-sells. The WooCommerce Customizer settings described below set the size and cropping for these images.
  • Thumbnail Images are the smallest images used in the Cart, Widgets, and (optional) Gallery images underneath the Single Product Image on individual product details pages. The WooCommerce Customizer settings described below set the size and cropping for these images.
  • Single Product Image is the largest image and refers to the main/featured image. Product Image settings in WooCommerce Customizer do not apply to these. To add, edit, or delete the Single Product Image or Product Image Gallery, see Adding Product Images and Galleries.

Resize and Crop Thumbnail Images

↑ Back to top

Using the WooCommerce Customizer you can resize and crop thumbnail images. Follow the instructions below to choose thumbnail cropping options:

  1. Go to: Appearance > Customize > WooCommerce > Product Images.
Options to crop thumbnails: 1:1 Square, Custom (you choose), and Uncropped (retains original aspect ratio)
  1. Select one of the following cropping options:

1:1 Square Image

All images appear as 1:1 squares.

Custom – You enter the ratio for image cropping. In this example, the set ratio is 1:2. Notice that one image is not large enough to fit the selected ratio.

Un-cropped – Images appear as is, which can result in all being different unless you use photos that are uniform in size and resolution. The image to the right is an example of what this looks like.

  1. Test on different devices. Below is an example of different views, using the same settings.

Computer/laptop screen

Tablet Screen

Mobile Device

  1. Click Publish to finish.

Note: If you need to regenerate thumbnails on your site (troubleshooting, theme change, etc.), you can use the Regenerate Shop Thumbnails option at WooCommerce > Status > Tools:

Questions and support

↑ Back to top

Do you still have questions and need assistance? 

This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.

If you haven’t created a WordPress.org account to use the forums, here’s how.

  • If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
  • Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
  • Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.