How to fix blurry photos in WooCommerce

How to fix blurry photos in WooCommerce

Many people who have bought some of my WordPress themes ask me How to fix blurry photos in WooCommerce so I´ve decided to make a really fast instructional tutorial.

If you’re having issues with your WooCommerce product images being too small, blurry or too big, this may be because of the image you’ve uploaded do not match your WooCommerce product image settings.

  1. First of all you should enter site admin panel and navigate to WooCommerce > Settings.
  2. Under the Products tab you should see the Display option, which defines the product images dimensions Width X Height in pixels. We need to change them.
  3. Catalog Image is for your images on the shop page and for widgets.
    Single Product Image is for your images on the single product pages.
    Product Thumbnail is for your smaller product thumbnails.

The photos you upload to products will be resized to match the values you have input here. If your settings are 100×100 and you upload a 300×600 image it will be resized to 100×200. You can also choose to ‘hard crop’ your images which will force them to be the size specified in these settings, regardless of the raw image you upload, but will be cropped rather than distorted in scale.

4. The minimum suggest width for images is 600px. If you do not want the image cropped, leave the height field blank.

5. Once you have made your changes to the image dimensions, click ‘Save Changes’.

6. If you change the image dimensions after you have uploaded product images, you will need to download and run the Regenerate Thumbnails plugin just once Regenerate Thumbnails – this is to ensure that all affected images are resized to match the new dimensions.

 

The end!

That concludes my tutorial for fixing the blurry product images on your WooCommerce shop.

 

How to add an image link in your WordPress sidebar + FREE banners

How to add an image link in your WordPress sidebar + FREE banners

Recently one of my customers asked me How to add an image link in your WordPress sidebar. By default, WordPress has only a text widget so you need adding HTML code manually. But, no worries, if you don’t know HTML, I will show you an easy trick to get around that.

This is really useful if you want put a logo, sponsors and internal links to your website.

 

How to add an image link in your WordPress sidebar

  • In your dashboard, create a new post or page and  and add an image from your library or computer.

how-to-add-an-image-link-in-your-wordpress-sidebar-01-lovely-confetti-tutorial

  • Once you have uploaded and inserted your image, click on the image and then click on the pencil icon (see below).

how-to-add-an-image-link-in-your-wordpress-sidebar-02-lovely-confetti-tutorial

  • A new window will pop up with information about your image. Now you can select Link to – custom URL and enter your URL.  If you want your image to open in a new window, set the target”open link in a new tab”.

how-to-add-an-image-link-in-your-wordpress-sidebar-03-lovely-confetti-tutorial

  • Tab over to the text mode and copy all HTML code.

how-to-add-an-image-link-in-your-wordpress-sidebar-04-lovely-confetti-tutorial

3. Go to Appearance > Widgets and drag-drop a text widget to your sidebar where you want to display the image, add a title text if you like and paste code.

how-to-add-an-image-link-in-your-wordpress-sidebar-03-lovely-confetti-tutorial

  • Delete that post or  save it as a draft for easier editing in case you decide to change things up again in the future.
  • Now visit your site and click on the linked image to verify that the link works as expected.

how-to-add-an-image-link-in-your-wordpress-sidebar-06-lovely-confetti-tutorial

  • You can add more images, delete the spaces between the photos and copy/paste code like my example.

FREE BANNER IMAGES FOR YOUR WORDPRESS SIDEBAR:

And as a bonus, you can download these free banners images in .png and .psd format if you want edit text, colors and images!

free-banners-free-library-how-to-add-an-image-link-to-wordpress-sidebar-lovely-confetti-tutorials

Join our mailing list to get access to our free resource library and download these free bannes instantly!

Get these FREE image banners

How to add a pin it button to your WordPress site + Free button images

How to add a pin it button to your WordPress site + Free button images

In this this posts I show you How to add a Pin it button to your WordPress site. I love Pinterest, I believe It’s a great tool for promoting and driving traffic to your blog.

I confess spend hours there just scanning and pinning. It´s perfect if you are planning your ideal wardrobe or styling for an event, your next living room remodel, or finding a delicious dish to take along to a party, your next DIY project,…

If you’re looking for an easy way to pin images in your blog posts and pages, there is an awesome plugin called jQuery Pin It Button For Images,  that will help you with that. I love this plugin because it allows:

  • Upload your own Pin it button.
  • Choose position where you want show up “pin it” button.
  • Choose if you want to show the “Pin it” button on home page, single posts, single pages or category pages.
  • Disable showing the button on certain posts and pages.
  • Choose level of transparency when you hover over images.

HOW TO ADD A PIN IT BUTTON TO YOUR WORDPRESS SITE:

Install jQuery Pin It Button For Images Plugin

  1. In your WordPress dashboard, hover over Plugins.
  2. Choose “Add new”.
  3. Type “jQuery Pin It Button For Images” in the box and press “Search Plugins”.
  4. Once you have located the plugin, click Install Now.

How to add a pin it button to your WordPress site - Tutorial - 01 - Lovely Confetti WordPress Themes

Configure jQuery Pin It Button For Images Plugin

Selection:

  1. Go to dashboard > Settings and select “jQuery Pin it button images options” and click on the tab Selection at the top of the page.
  2. Choose if you want to show the “Pin it” button on home page, single posts, single pages or category pages.
  3. Save changes.

Visual:

  1. Go to Visual at the top of the page to access the second page of settings.
  2. Asign transparency value, for example 0.5.
  3. Check the box “Use custom image” and then upload your custom Pin it button using the button below.

5. Now you can choose the pin it button position where you want it (Top left, Top right, Bottom left, Botton right or middle) and adjust margins. (I usually choose top left and 20px for margins).

6. Else It´s possible optimize your pin it button for retina displays. In this case, make sure you upload a “Pin it” button that is twice the size you want it to display.

7. Now, save changes.

 

FREE PIN IT BUTTON IMAGES FOR YOUR SITE:

And as a bonus, you can download my free “Pin it” button images for you! If you like these, subscribe to my free library and download the zip files (.png and .psd) so you can change colors in Photoshop to match your brand and use them on your site.

free-pin-it-buttons

Get this Free Pin it buttons

Sign Up for my Latest News

Leave me your email to receive new entries, tips, and specially offers only for you! . Don´t miss any update!

Pin It on Pinterest