How can I easily change the look of gallery thumbnails for WooCommerce in Pro?

Support
#1

Hello

I am currently in the process of developing a shopping cart website with pro.

I know that pro works with WooCommerce right out of the box, but my question is whether there is an easy way to style the gallery image thumbnails? In all the stacks the main image has the gallery images listed at the top right hand side of the image and they are very small, so easy to miss.

I know with the standard woocommerce theme the gallery image thumbnails are listed underneath the main image and I would love to achieve that with Pro / X theme. Otherwise if that’s too hard is there an easy way I can increase the size of the thumbnails as they sit at the top of the featured image?

I’ve included a screenshot to help show what I mean:

The current Pro image display with very small gallery thumbails in the top right:

The standard WooCommerce image display with gallery thumbnails underneath:

Thank you for any help you can provide!

#2

Hi Callum,

Thank you for the detailed explanation. There is no settings on Theme Options that will remove the adjustments added on stack for the woocommerce display. The only way is to edit it using custom CSS. We can help with basic changes although, resettings all of those design is outside the scope of our support. The following CSS can be added on Theme Options > Global CSS. This will increase the size of the thumbnail.

.flex-control-nav.flex-control-thumbs img {
    height: 4.5em; /*Adjust this to your preferred size*/
}

For further adjustments, the following might help:

#3

Thanks Lely

I will give that a crack and see how I go.

I’m debugging another issue now - when I view the shopping cart page on a smaller browser the product images and details completely disappear. I’ve deactivated all unnecessary plugins so I think it might be hiding them at certain breakpoints? Rather than hiding the images and details I would prefer they just shrink and stack on top of each other. Here’s some screenshots below:

Shopping Cart displaying properly before the breakpoint:

Shopping Cart not displaying after breakpoint:

#4

Hi Callum,

I checked your site and it seems like you’re using the latest version of WooCommerce i.e 3.8.1 however the latest supported version of WooCommerce with our theme is 3.7.1 (see https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195). This might be causing the issue. You can try downgrading the WooCommerce plugin and see if this resolves the issue. You can download the previous version from here https://wordpress.org/plugins/woocommerce/advanced/

In the mean time you can fix the issue by adding the following code in the Theme Options > CSS as well:

@media screen and (max-width: 767px) {
    .woocommerce .cart.shop_table .product-name {
        display: block;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

1 Like
#5

Thanks for all your help guys, the CSS worked well.

Sorry to keep bugging you, but I’m now just having a few issues with the shopping cart drop-down.

As you can see, when a product has any attributes the dropdown displays the text a bit funny and its misaligned. Is there any easy fix to have the text align correctly to the right of the image? There’s also a line break between each attribute which creates a lot of space - are we able to remove this line break?

As you can see, the error only occurs for products with attributes - the product below has no attributes and displays correctly.

The last thing is for the life of me I cant figure out how to remove the grey shadow from the ‘cart’ and ‘checkout’ buttons - sorry if it’s something easy I’ve missed, but I’ve tried removing all shadow from the buttons and making the shadow transparent and it still shows.

Thank you in advance.

#6

Hello Callum,

Thanks for updating in. To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)


/* Fix the product attributes */
.woocommerce-mini-cart-item.mini_cart_item .variation {
    clear: both;
    display: block;
    margin-top: 40px;
}

/* Removes the button shadow */
.woocommerce-mini-cart__buttons.buttons .x-anchor {
    border: none;
}

We would love to know if this has worked for you. Thank you.

#7

Thank you very much, that has worked well :slight_smile:

#8

You’re welcome, Callum. Glad we’re able to help.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.