Woo commerce thumbnails

Support
#1

Hi,

Does anyone have any idea why my thumbnails are appearing weirdly in comparison to what they should look like in the Integrity demo?

http://dragonhockey.co.uk/product/c200-series-100-carbon-hockey-stick/

Andy

#2

Hi Andy,

Thanks for writing in! What’s the WooCommerce version that you’re using ? Please make sure to use X compatible WooCommerce version recommended here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195).

You can download a desired version from the following link (https://wordpress.org/plugins/woocommerce/advanced/).

Thanks!

#3

Hi,

I went into the pro xtheme section and just clicked install from there. Should i install woocommerce by going via the plugin section? the version in the plugin section is showing 3.2.5

#4

Hi There,

Can you please try downloading the X compatible version which is (v3.1.1) from the link provided above and see if that resolves your issue.

Thanks!

#5

Hi,

I’ve done that and it still looks the same. (using 3.1.1)

#6

Hi There,

If you’re using any caching plugins, make sure to purge all cache and disable them temporarily. Also try disabling your 3rd party plugins and test this issue again.

If that doesn’t help, would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

Thanks!

#8

Still not working i’m afraid

#9

Any ideas?

#10

I just had a look on mobile, and i think it may be displaying the mobile version of the thumbnails, but on desktop. I have no idea how that’s happened as it’s a fresh install on a new site. Your thoughts would be appreciated.

#11

Hello There,

Thanks for updating in! I would you to review this thread:

It would explain to you all the changes in the product images which is also why the demo and your site has a different look. To resolve your issue, please install a child theme and insert this line in your child theme’s functions.php file

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

Hope this helps. Please let us know how it goes.

#12

Hi,

I think that has helped. I’m now trying to make changes to the CSS to put borders around the product images (to look like the demo), but my child CSS isn’t responding to my changes (I’ve also tried putting them in the xtheme CSS) . any ideas?

This is the page:

http://dragonhockey.co.uk/product/c200-series-100-carbon-hockey-stick/

This is the code i’m using:

.woocommerce div.product .images figure {
margin: 0;
padding: 5px;
line-height: 1.7;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,0.15);
background-color: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
transition: border 0.3s ease,box-shadow 0.3s ease;
}

.woocommerce div.product .images figure [data-thumb]:nth-child(n+2) {
display: block;
float: left;
width: 22%;
margin: 4% 4% 0 0;
line-height: 1.7;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,0.15);
background-color: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
transition: border 0.3s ease,box-shadow 0.3s ease;
}

Andy

#13

Hi there,

I don’t see your CSS from your site’s source code, plus, it doesn’t have child theme style.css even though the child theme is active. Something is wrong with your current setup.

How do I log in to your site? It turns white when I access the login page.

Thanks!

#14

Hmmm… i might have done something wrong with the child theme then. I’ve just deactivated the child and activated the normal theme. You should be able to login using the details above.

#15

Hi there,

I suggest that you add the CSS 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;
}

This will change the image and the gallery of the single product page to look like the demos we have which use the old version of Woocommerce.

Thank you.

#16

That doesn’t seem to have done anything i’m afraid. Do you mind checking?

#17

Hi there,

It seems that you are using the Pro theme. I went to Pro > Launch > Theme Options > CSS and added the code there:

Now your page in question looks like this:

Thank you.

#18

Thanks for the quick response (and for helping). Looks like we’re getting there.

I’d like to put some borders and drop shadows around the main image and thumbnails so it looks like the demo. Any ideas how to do that?

Like this:
http://demo.theme.co/shop-integrity/product/happy-ninja/

#19

Hi There,

Please also add this custom CSS:

.woocommerce-product-gallery__image.flex-active-slide img,
.single-product .flex-control-nav.flex-control-thumbs img {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
}
.single-product .flex-control-nav.flex-control-thumbs li {
    background-color: #fff;
}

Let us know how it goes!

#20

Brilliant. Thank you.

#21

You’re welcome.