Woo Commerce looks weird!

Support
#1

Hi
I’ve a staging site set up and I’ve just added one product.
The images are tiny though and not like any other Woo site I’ve set up. Any idea what is going on?

Thank you!
http://milk.nakedwebsite.co.uk/product/emma-jane-seamless-nursing-bra-361/

#2

Hi Lisa,

It looks like the width of some images file are less than the container width that is why it is showing like small.

Just like this image: http://milk.nakedwebsite.co.uk/wp-content/uploads/2017/08/Emma-Jane-361-Black2.jpg

The actual size of the image is is 215x290 which is smaller than the other images.

#3

I’ve removed the small images so it just has 2 that are 1000 wide and I am still getting tiny thumbnails.

#4

Hi Lisa,

My apologies for the confusion. Are you referring to the thumbnail images shown on the top right of the main image?

It is currently showing that small because of the default CSS from the theme. You can change the size by adding the custom CSS:

.flex-control-nav.flex-control-thumbs img {
         height: 4.5em !important;
}

Hope this helps.

#5

thank you. I tried that and they don’t look much better. I notice it is doing the same on another site, where it used to be nice big thumbnails underneath the main image http://www.cartoonkate.co.uk/product/breastfeeding-is-the-food-of-love-t-shirts/

I’m happy to change the demo stack I started with on the milk site, would that help? I’ll need to fix it on cartoonkate too.

#6

Hi There,

Please go to Woocommerce > Settings > Products Tab > Display Tab : Product Images: Catalog Images: Adjust the values and then regenerate thumbnails. The details of the change regarding Woocommerce was discussed on our chagelog here.

Hope this helps.

#7

Thank you, no change though.
I want it to look like it used to - like your demo here - http://demo.theme.co/shop-renew/product/bucky/

I’ve set the images to be
Cat 600
Single 900
Thumbs 400

and I am still getting dinky little images at the top right of the main image, not underneath.

#8

Hi,

To achieve that, you can add the code below in `X > Launch > Options > CSS

.single-product .flex-control-nav {
    float: left;
    position: static;
}

.single-product .woocommerce-product-gallery__image>a>img {
    width:100%;
    padding: 6px;
    border: 2px solid #e5e5e5;
}

.single-product  .flex-control-nav.flex-control-thumbs {
    padding-left:0;
}

Hope that helps.

#9

thank you, that is much better but now the thumbnails are much too low. How can I get it to look how the demo looks please.

#10

actually, it looked fine when I was in the customiser, the underline went and the thumbnails shot back into position underneath the main image.
Now I look at it to check in Chrome and I see no difference. I have cleared browser data.
I checked again in Firefox and the underline is back and the thumbnails are the same as before.

#11

Hi, there please kindly use the CSS code below instead of the previous one. Add the code below to X > Launch > Options > CSS:

.single-product .flex-control-nav.flex-control-thumbs {
    float: none;
    position: relative;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 60px;
}

.flex-control-nav.flex-control-thumbs li {
margin: 10px;
}

.woocommerce-product-gallery__trigger img {
    visibility: hidden;
}

.woocommerce-product-gallery__trigger:before {
    font-family: "FontAwesome";
    content: "\f065";
    color: white;
}

The reason that you see the gallery rendering differently is that Woocommerce changed the way it renders galleries and now it shows that way.

The link of demo page you gave us is using the old version of the Woocommerce.

Thank you.

#12

thank you. I’ve set the height to 260 which is more like what I want. How do I get rid of the grey colour on the thumbnail mouseover? I’m going to regen the thumbnails again and see if I can get rid of that fuzziness.

#13

Hello There,

You are having this issue because of the changes of WooCommerce 3.0 that we have also added in the theme. If you want to have the old and same look as what we have in our demo sites, please add the following code in your child theme’s functions.php

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 100 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

The code will remove the WooCommerce 3.0 gallery zoom and gallery slider feature. For more information about resizing image issue with WooCommerce 3.0, you can check this thread: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

The custom css given should be remove if you have applied the php code in your child theme’s functions.php because all of those custom css given is used to address the styling of the Gallery Slider.

Hope this helps.