WooCommerce

You want the size of the images in pixels that you upload to your site to match the size you set for the images that are displayed on the site. You want to make the images you upload to be the right size, just like Goldilocks. Too small and the system will blow up the images to larger size and they will look blurry. Make them unnecessarily big and you are uploading bigger file sizes that the system will use. So it will reduce their size, but the bigger file size will be a drag on the system making it slower than it need be.

Image Types in WooCommerce

WooCommerce uses different types of images for your products:

• Main Image (Single Product Image): This is the large image on the product page.
• Catalogue Image (Thumbnail): Displayed on the shop page, category pages, and product listings.
• Product Gallery Thumbnails: Displayed below the main product image on individual product pages.

Check Your Theme Requirements

Your WordPress theme often determines the best image dimensions. Some themes will have recommended image sizes to ensure proper layout and presentation. You may find these recommendations in your theme documentation. And if your theme uses the Customiser then you can check these under Appearance > Customize > WooCommerce > Product Images.

Standard WooCommerce Image Dimensions

If your theme doesn’t provide specific recommendations, you can use the default WooCommerce image dimensions as a starting point:

• Main Image: 800 x 800 px or larger for high-quality zooming effects.
• Catalog Image (Thumbnail): 300 x 300 px or similar for shop and archive pages.
• Product Gallery Thumbnails: 100 x 100 px or similar.

Set Image Dimensions in WooCommerce

To configure image sizes in WooCommerce:

Go to WooCommerce > Settings in your WordPress dashboard.
Click on the Products tab, then go to the Display section.
Scroll to Product Images and adjust the image sizes.

The Main image width is the main product image on single product pages.
Thumbnail width is used for product gallery images and product thumbnails.
Thumbnail cropping allows you to select cropping options or leave uncropped.

Test Responsiveness

Once you’ve set the dimensions, check how your images look on different devices:

Make sure the images are sharp and fill the space correctly om desktop.
Ensure the images resize appropriately for mobile smaller screens and remain clear.

Regenerate Thumbnails

If you adjust image dimensions after uploading images, you will need to regenerate thumbnails to apply the changes across your site. You can use a plugin to regenerate thumbnails.

Tips

Make all product images the same size to give a consistent layout. This can be a problem if some of your images are in landscape orientation and some in portrait orientation. If you use square dimensions then images are going to be cropped. If you do not crop and choose a portrait layout (say 800 x 1200), then landscape images are going to be 800 across and will not fill the depth of 1200. If you really must have some images in portrait orientation and some in landscape then here’s a recommendation. Use a square layout and place both portrait and landscape images against a plain background. The downside is that the images will be smaller on the page than if one or the other format is chosen but at least they will all be the same size and not cropped.

The Issue was that a customer bought a product and paid via Stripe. When I log into my Stripe dashboard on the Stripe website I can see it is paid.

On my Woo dashboard it says the order status is ‘Cancelled’ and when I hover over that word I see a message that says “Unpaid order cancelled – time limit reached. Order status changed from Pending payment to Cancelled.”

I don’t have any kind of plugin that would allow a customer to cancel and order, so what my WooCommerce dashboard says may not reflect what the customer expects. In other words the customer placed the order and paid, and expects the goods but the Woo dashboard on the WooCommerce site says the order was cancelled.

What is going on?

Homing In On The Issue

As a first step, are webhooks are configured correctly on the site at WooCommerce > Settings > Payments > All payment methods > Stripe > Manage > Settings?

This is what the page looks like, and all three should be green.

The webhook endpoint needs to be added to your Stripe account.

The signing secret webhook can be found in your Stripe dashboard on the Stripe website.

And then go back to your site and click Stripe account settings (see first screenshot here) and add the key and refresh and they should all show green.

In my case the secret key was not set. I don’t know how that happened because previous orders went through OK.

Debug For Future Issues With Stripe and WooCommerce

Go to WooCommerce > Settings > Payments > Stripe > Manage > Settings > Scroll down to the bottom and expand Advanced Settings. There is a setting there to set debug to true. Do that and they you are able to check future logs in WooCommerce > Status > Logs.

Thanks to the Woo Happiness Engineer who talked me through this.

For SEO for e-commerce sites, category pages are more important than product pages. One important SEO ranking factor is the amount of relevant text describing the category. The problem is that if you write text it will appear above the product images, and if you write more than a couple of lines of text it will push the product images way down the page.

What you want is to have the text appear below the grid of product images, and this is how to accomplish it.

Mr WordPress has a YouTube video in which he describes adding a line of php to accomplish that.

I am using a child theme on one of my e-commerce sites, and I have a functions.php file within that child theme. So I added the php there. If you are using a parent theme then you can put your code in a snippets plugin.

Here’s the code

remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 ); 
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );

An Alternative

If you are not comfortable doing this then I found a plugin in the WP repository that may do the job. It’s named Move Category description under products for WooCommerce. You should be able to find it from that description.

The thing I don’t like about it is that the shortcode you add at the beginning and end of the text you want to move, has the word ‘mcdusaltasotto’ baked in.

I just downloaded the plugin and I see that it consists of two files and a readme file. In the file named salta-sotto.php, the word mcdusaltasotto is on line 33 and I assume you can change this to whatever word you like. Most simple text editors will open the file. If you are on a Mac then the free COTEditor Plain-Text Editor for macOS is about as simple as it gets.

That said, I have not used this plugin so I can’t advise beyond this.

In WooCommerce> Settings > Products > Inventory page, you can choose how long the system will hold stock for unpaid orders. When the limit you set is reached, the pending order will be cancelled. Or you can leave the field blank to disable it. That is generally not a good idea, because you might find customers put products in the basket and leave – and soon you will have no available stock to sell.

But what happens if you have a variety of methods of payment, for example credit card or cheque or ban transfer? You can’t set a limit of, say, 60 minutes, because that won’t allow enough time for a bank transfer or for a cheque to arrive.

The WooCommerce Cancel Abandoned Order plugin allows you to set specific time limits to hold stock for different kinds of payment.

In the Shipping Destination section of the back end in a WooCommerce web site, there are three options in WooCommerce / Settings / Shipping / Shipping Options. The options are:

• Default to customer shipping address
• Default to customer billing address
• Force shipping to the customer billing address

Assuming you want to allow a customer ask for delivery to an address other than the billing address, how do you decide between the first two options? Do you set the default to the customer shipping address or their billing address?

The answer is this: If you set it to the shipping address, then on the checkout page the box next to the text that reads ‘Deliver to a different address?’ will be checked and the fields will be open and visible. If you set it to the billing address then the box will not be checked and the customer would have to check the box to get the fields for the delivery address to open and become visible.

If the majority of customers want delivery to their billing address, choose the ‘Default to customer billing address’ option.

By default, you will see a Description tab in the individual product pages, If you enable product reviews in WooCommerce then you will see a second tab for Reviews. If you set up a variable product you will also see a tab for Additional information.

If you want to set up more custom tabs, there is a plugin Custom Product Tabs for WooCommerce in the WordPress repository, with a pro version that gives more options. Addify make a Custom Products tab manager sold as an extension on WooCommerce.com that offers various layouts.