How to fix the Woo Commerce Blurry Product Images Problem

The WooCommerce Blurry Images Problem

DISCLAIMER: You SHOULD NOT edit theme or plug in files unless you know what you are doing. Whenever possible you should use child themes and custom CSS files, and back up your files. This fix as worked for me so I figured I would repost it.

First of all, when I opened woocommerce.css it wasn’t aligned and was a big jumble of code so I placed the suggested code in my theme’s custom CSS area. I placed it right in at the very bottom of my style.css.

So what I did was take the simple img CSS of both width and height of the the single product images, and related product and catalog images and set them to “auto” like this:

ul.products li.product a img { width:auto !important; height: auto !important; }

 

and…


.related ul.products li.product img, .related ul li.product img,
.upsells.products ul.products li.product img, .upsells.products ul li.product img { width: auto !important; height: auto !important; }

I also added the !important declaration to override the css style that is currently being called in the woocommerce.css

Sucesss!

It worked! All of my product images are now normal. Yeah, I need to make some adjustments since one image is displayed in several different sizes, but at least they don’t look like they were uploaded back on the 90’s.

Hope this helps you and if so, share it with others so that they don’t spend a week on this like I did.

InDesign Help / Hang, freeze | Open, create file | InDesign

Issue

When you open an existing document or create one, InDesign hangs, freezes, or endlessly displays the progress bar.

Solutions

Solution 1: Clear the SING Datastore folder.

  • Quit InDesign (force quit, if necessary).
  • Move the following folder to the desktop:
    Mac OS: [Startup Disk]/Library/Applications Support/Adobe/SING/Mark II/Datastore
    Windows 7/Vista: C:\ProgramData\Adobe\SING\Mark II\Datastore
    Windows XP: C:\Documents and Settings\All Users\Application Data\Adobe\SING\Mark II\Datastore

  • Relaunch InDesign.
  • Attempt to reproduce the problem.

If the problem is not resolved, then proceed to Solution 2.

Solution 2: Remove the SING component.

Note: Users who do not receive .indd files from users of the CJK versions of InDesign can function fine without the SING component.

  • Quit InDesign (force quit, if necessary).
  • Move the following folder to the desktop:

    Mac OS: [Startup Disk]/Library/Applications Support/Adobe/SING/Mark II

    Windows: C:\Program Files\Common Files\Adobe\SING\Mark II

  • Relaunch InDesign.
  • Attempt to reproduce the problem.

If the problem is not resolved with the solutions above, see Troubleshoot system errors, freezes (Mac OS 10.x) or Troubleshoot system errors, freezes (Windows).

Mysql with phpmyadmin replace temporary address

Found this the other day. Great website with queries to run on a wordpress database to replace temporary web address once a website is made live.

UPDATE wp_posts SET post_content = REPLACE (post_content, 'http://oldlink.com', 'http://newlink.com');

How to add captions to thumbnails with NextGen Gallery

Found this tip, figured I would share. This allows to use the alt tag as the caption, and title text/description as title for lightbox, thickbox.

[NGG uses the first field (alt) as the image alt tag, the other field (Title Text / Description) is used as the link and image title tag]

If you want to use the “Title Text / Description” text as the thumbnail “title” then use answer A, if you want to use the “Alt” text as the thumbnail “title”, use answer B.

Answer A:
1. Go to “/wp-content/plugins/nextgen-gallery/view/” and rename the file “gallery.php” for something else (ie: gallery.old) and rename the file “gallery-caption.php” to “gallery.php”
2. Save and upload

Answer B:
1. Go to “/wp-content/plugins/nextgen-gallery/view/” and open gallery.php
2. Look for:
<!-- Thumbnails --> <?php foreach ( $images as $image ) : ?> <div id="ngg-image-<?php echo $image->pid ?>" <?php echo $image->style ?> > <div > <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > <?php if ( !$image->hidden ) { ?> <img title="<?php echo $image->description ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> /> <?php } ?> </a> </div> </div>
3. Change it to:
<!-- Thumbnails --> <?php foreach ( $images as $image ) : ?> <div id="ngg-image-<?php echo $image->pid ?>" <?php echo $image->style ?> > <div > <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > <?php if ( !$image->hidden ) { ?> <img title="<?php echo $image->description ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> /> <?php } ?> </a> <span><?php echo $image->alttext ?></span> </div> </div>
(just need to add the <span> line, the third line from the bottom)
4. Save and upload.

Hope this help you.

Deleting comments with mysql

Ever get stuck with thousands of unwanted comments on your wordpress site? Here is how to delete them!

With phpmyadmin it is actually pretty simple:
FIRST: make a backup of your database.
The go into phpmyadmin, select your wordpress database, and click the sql tab, and enter the following query:
SELECT *FROM wp_comments WHERE comment_approved =”0″
that should select all 282125 records. If you get that number, then do the following query:
delete from wp_comments WHERE comment_approved =”0″

That should delete all pending comments.

New Website Launch

After a lot of research, testing and tuning, finally launched the new site today for Innovative Graphics. Its built on a responsive web design platform for wordpress. So take a look at the site on your iPad, iPhone, smartphone or your desktop — it fits most browser windows.