[Frankie SParticipant]

Problem: When selecting product variations (i.e. different colors) on the main product page, the picture that is displayed to coincide with the color selected is very blurry (as if it’s sized small and resized larger). I selected the proper attribute, variation, and picture that I’d like to show up when the customer selects the product (attribute) of their choice. The pictures are 862x862px and are the same pictures I use for featured images and product images. They don’t show up blurry anywhere else except for when you select a specific color or style from the drop down box on the product page. Then, once that picture shows, it’s blurry. Any ideas?

Thank you,

Frankie

[Nabeel AModerator]

Hey Frankie,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Frankie SParticipant]

My apologies.

The URL is http://shopwatercloud.com

Click on “Shop” in the navbar > Then click on “H1 Genie by Horizon”

If you click all of the thumbnails, the pictures show in high quality, clear as day. However, if you select a color attribute right before adding to cart, the picture displayed of the color selected is extremely blurry. Doesn’t matter the color you select, the picture that follows is always blurry. This occurs on every product page with a drop down box of attributes.

Thank you for your time.

Regards,
Frankie

[Nabeel AModerator]

Hey Frankie,

I am unable to find “H1 Genie by Horizon” Can you please provide us the direct link of the product so we can take a look?

[Frankie SParticipant]

That’s strange. I have no idea why it’s not showing. Here is the direct link:

http://shopwatercloud.com/shop/horizon-ecig/h1-genie-by-horizon/

[Frankie SParticipant]

Also, do you have any ideas as to why the product didn’t show on the shop page?

[ZeshanMember]

Hi Frankie,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[Frankie SParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hey Frankie,

The images used in the drop down are resized to 250x250px and then they are displayed as 500x500px that’s why they look so blurry. Here is a sample of your one image http://shopwatercloud.com/wp-content/uploads/2014/09/Horizon-H1-Genie-pink-250×250.jpg. This is being controlled by WooCommerce Settings, you can change it. Go to Dashboard > WooCommerce > Settings > Products Under Product Image Sizes change the settings of Single Product Image from 250x250px to 500x500px. Save your changes.

Solution for Fixing 406 Error
Backup your .htaccess file if you have one in the ‘wp-admin’ directory. Then make a ‘.htaccess’ file with the following content and upload it to ‘wp-admin’ directory.

<IfModule mod_security.c>
SecFilterEngine Off
SecFilterScanPOST Off
</IfModule>
You can use any text editor such as Notepad to create this file.

Let us know how this goes!

[Frankie SParticipant]

I will try this today and let you know how it goes. Thank you for your help.

Regards,
Frankie

[Frankie SParticipant]

I have a .htaccess file in my public_html directory, not in my wp-admin folder. Does this pose a problem? I have created another .htaccess with the prescribed code, and placed it in wp-admin. I left the original .htaccess untouched in the public_html. I will update you with results. Thank you.

Frankie

[Kosher KMember]

No Problem,

Let us know how it goes

Cheers

[Frankie SParticipant]

No dice. The images are still displayed blurry, and I still keep getting logged out frequently with the same Error 406.

Any ideas?

-Frankie

[Paul RModerator]

Hi Frankie,

To fix the blurry images.

You can add this under Custom > CSS in the Customizer.

.single.single-product.woocommerce a.x-img>img {
    width:auto;
}

Regarding Error 406

Please put the code in .htaccess that is in the root not in wp-admin

Hope that helps

[Frankie SParticipant]

I have added the custom css, and the code to the .htaccess in my public_html directory. Thus far there have been no changes on the front end. I wish I could offer some more assistance into the matter but I am at a standstill. This is in part delaying the re-launch of our website. Could you please offer more suggestions? Thank you.

Sincerest regards,
Frankie

[Author]

Posts