• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

According To Blue

Freelance WordPress Web Development

  • About
  • Blog
  • Resources
  • Contact

September 14, 2017 | by BLUE | Leave a Comment

WooCommerce Products Widget – How to Fix Blurry Images

I do love a good challenge! After working on multiple WooCommerce websites and coming across the same issue, I decided to find a solution. Why in the world were the images pulled through from the WooCommerce products widget so blurry? The images weren’t blurry on the product pages and they were the same size. If you’ve come across this as well, read on for a solution.

woocommerce products widget fix blurry images

Below is a step-by-step tutorial on how to fix blurry images within the WooCommerce products widget. If the images in your WooCommerce products widget are appearing blurry on the front end, but those same images aren’t blurry on the product pages, follow this tutorial to fix the blurry images.

NOTE: This tutorial includes making edits to several php files, so please be careful as editing php files can break your site if done incorrectly. I recommend you edit your php files via ftp in order to make any fixes if necessary.

Step 1: Once you have decided on how many images you will display in the WooCommerce products widget, you need to figure out the images’ actual size. Right click on one of the images and click ‘Inspect’. In the example below, you can see above the image that the size is a width of 300px and height of 406px.

woocommerce products widget

Step 2: Navigate to your wp-content folder either via FTP or via File Manager
Step 3: Navigate to the content-widget-product.php file (wp-content/plugins/woocommerce/templates/content-widget-product.php)

woocommerce products widget ftp

Step 4: Open content-widget-product.php

Step 5: Navigate to line 28 and change it to:

Step 5 continued: Note the addition of ‘array( 300, 406 )’ on line 28. 300 is the width and 406 is the height. Change these to whatever sizes you identified in Step 1.
Step 6: Save the file
Step 7: Return to your page and clear your cache – voila, the images should now be clear!

woocommerce products widget 1

Hopefully this was worthwhile. As with most things in the WordPress world, there are multiple ways to accomplish the same goal; this is one way. Feel free to drop any questions or comments in the comment box below and I’ll be happy to help.

Next Post

Filed Under: Code Tips & Tricks, Tutorials, Web Development, WooCommerce

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Hi, I'm Blue (and Julia)!

I'm a stay-at-home dog looking after my human, Julia. She's a freelance WordPress Developer. Julia used to work in a 9-5 job and it was okay, but she was gone AAAALL DAAAAY LOOOONG! Fortunately for me, she fell in love with web development and started her own business....WORKING FROM HOME! She loves her job so much, she decided to share her story and her knowledge with folks just like you.

Ready to Start
A Side Hustle?

10 Things You Need To Know Before Starting A Side Hustle

The ultimate preparation guide to help you own your side hustle and make it the most successful venture possible!

Awesome, thanks! Your FREE eBook is on it's way - be sure to check your email!

There was an error submitting your subscription. Please try again.

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

Yes! Send me the free ebook!

PAWpular Blog Posts

6 Simple Apps That Will Get Your Kids Interested In Code

5 Reasons Why Freelancing Is The Perfect Choice For Women Of All Lifestyles

Top Picks For WordPress Themes, Plugins & Hosting You Need To Know

6 Reasons Kids Need To Learn Code – The Skill Of A Lifetime

Too Young to Code? When is the Best Time to Teach Kids Code?

Learn to Code
Work from Anywhere

Are you ready to learn to code and and work from anywhere? Download this FREE step-by-step guide!

Learn to Code & Work from Anywhere

Learn to code   content upgrade

Check out this step-by-step guide to help you learn to code, get paid and work from anywhere!

Awesome, thanks! Your freebie is on it's way - be sure to check your email!

There was an error submitting your subscription. Please try again.

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

Send me the free pdf!

Categories

  • Code Tips & Tricks
  • Freelance
  • Genesis Framework
  • Hosting
  • Kids Learning Code
  • Tutorials
  • Web Development
  • WooCommerce
  • WordPress
Entrepreneur's Treasure Chest

Do you want a FREE list of 250+ Deals, Freebies, Books, and Special Offers that will literally save you hundreds of hours when setting up your business?

Yes, send me the Goods!

✕

The Entrepreneur's Treasure Chest

Yes, I want the FREE list of 250+ Deals, Freebies, Books, and Special Offers that will literally save me hundreds of hours when setting up my business?

Success! Now check your email for your FREE Entrepreneur's Treasure Chest!

There was an error submitting your subscription. Please try again.

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

Footer

Join The Bluesletter

Ready to learn how to break free from the 9-5? Subscribe to The Bluesletter and you'll also get the latest content and updates sent straight to your inbox.

PAWpular Biz Tools

Flywheel WordPress Hosting Genesis Framework for WordPress Genesis Framework for WordPress Genesis Framework for WordPress Genesis Framework for WordPress
These 5 Tools are at the Heart of Julia's Business!
Need more - check out the Resources page
  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Privacy PolicyTermsDisclaimerContact
Copyright ©2019 | JTDigitalMedia, LLC | All Rights Reserved | Made with by BLUE