Customize Related Products and Upsells (sizing and out of stock messaging)

Hello,

When in a regular product grid, the out of stock products say Out of Stock when you hover over them (in addition to saying “Read More” instead of “Add to Cart”).

WooCommerce doesn’t display out of stock text/label on the archive page or related products. This is likely added on by your theme or another plugin that’s active on your site. Here is a screenshot of how out of stock products look like with only WooCommerce and the Storefront (default) theme activated: https://snipboard.io/lSBogn.jpg

That said, you’ll want to first find out where the out of stock text is coming from by disabling/enabling plugins one by one. Once identified, reach out to the plugin developer to see if there is a way to also display that text for related products.

If this type of customization isn’t possible, I might follow this thread to simply hide out of stock items: https://wordpress.org/support/topic/hide-out-of-stock-products-from-related-products-2/

This is a good alternative too! If you decide to hide out of stock products from Related products with custom code, be sure to add your code to your child theme’s functions.php file or via a plugin like Code Snippets plugin:
https://woocommerce.com/document/customizing-woocommerce-best-practices/#section-4

all of the Related Products and Upsells images are cropped to be square. However, some of our products are rectangular and are getting cut off.

Product image size can be set from Appearance > Customize > WooCommerce > Product Images. This article can give you a good explanation on changing product image size: https://www.businessbloomer.com/woocommerce-single-product-image/

You’re welcome! I’m glad you found our suggestions helpful! 🙂

If you have a moment, we’d love if you could leave us a review:
https://wordpress.org/support/plugin/woocommerce/reviews/

Thank you!