Increase Woocommerce thumbnail pictures for my store

Support
#1

Hi there,

My website is the outdoorarmory.com and the specific link that I have an issue with is this: https://theoutdoorarmory.com/msr/

How do I increase the thumbnail size? I am looking at 3 products per column instead of 4. An example I am looking at is this one: https://www.msrgear.com/tents

I can provide password and username on the back end, no worries.

Please help!

Dave, The Outdoor Armory

#2

Hello Dave,

You can set your shop page columns in Appearances > Customize > Woocommerce > Shop Columns.

Hope that’ll help.

Thanks.

#3

Hi Bappi,

As you can see on the screenshot attached, I got my Shop Columns on “Three” but I still got four columns for my site.

I can give you log-in credentials to check for the issue.

#4

Hi There,

Is that a Woocommerce shortcode to output a four columns product?

e.g.
[products columns="4" orderby="popularity" on_sale="true" ]

If so, please change the columns attribute value to 3.

If that does not work either, please provide us login credentials in a “secure note” so we can take a closer look.

But first, please do the suggestion I’d provided on your other thread (updating the X theme) and see if that resolves the issue.

Thanks,

#5

Hi Friech,

Thank you so much for the feedback. All OK now.

I tried it in this link: https://theoutdoorarmory.com/m-essentials/

However, I want to change the dimensions of the thumbnail. I am looking at 460 pixels x 300 pixels.

How do I do that?

Please help.

Thanks,
Dave

#6

Hi there,

Our theme follows the settings you set in the Woocommerce regarding the thumbnail sizes. Kindly read this article regarding the details of the thumbnails and how to set it correctly:

https://theme.co/changelog/#theme-x-5-1-1

For more information regarding the thumbnails of the Wooocmmerce kindly consult with their documentation:

Thank you.

#7

Hi Christopher,

Thank you so much for the help! Really appreciate.

One last thing. I’ve changed the sizes of the product images to 460 x 300 here in this link https://theoutdoorarmory.com/m-essentials/

My only issue now is that I need to also change the size of the boxes (borders) where the images are located.

Please see below screen capture of the my issue. I want the box/border to be the same ratio as 460 x 300. I hope you get what I mean.

Please help.

#8

Hi There,

Please add the following code to Theme Options CSS

.woocommerce li.product .entry-featured img {

    max-height: none;
}

Hope it helps!

#9

Hi Joao,

Thanks for the reply, but unfortunately it still doesn’t work, as seen on the photo below.

I can give you log-in credentials to check it for yourself. Please see secure note below.

Thanks,
Dave

#10

Hello there,

Please add the CSS code below to X > Launch > Options > CSS.

.woocommerce li.product .entry-featured img {

    max-height: none !important;
}

Hope that’ll do it.

Thanks.

#11

Hello Bappi, unfortunately it’s still not working. Please check the secure note I posted previously so you can log-in and dive in on the situation.

Please help.

Thanks,
Dave

#12

Hi Dave,

I can see the height is just fine now. The images are being scaled to 348X227 as 3 460px wide cannot be in a row.

If image height is still the issue on your end, please clear your cache and try again.

#13

Hi Bappi,

I’ve already cleared cache but issue is still there. Do you have screen cap from your side that shows correct height?

Thanks,
Dave

#14

Hi Dave,

If I understand you correctly, what you are trying to do is to have border around the entire product info and not just the image?

Just like here https://www.msrgear.com/tents ?

If that is what you are trying to achieve, you can add the code below in your Custom CSS

.woocommerce li.product .entry-featured {
    border:0;
    padding:0;
}

.woocommerce li.product .entry-product {
    border: 1px solid rgba(0,0,0,0.075);
    padding:10px;
}

I was able to come up with that code using google chrome inspect element.

Hope that helps

#15

Hi Paul,

Thanks for the reply. What I am trying to do is to extend the vertical border so that the image will be seen. Please see below image what I am trying to do.

As you can see on the https://www.msrgear.com/tents , the entire product is image is seen. And the image padding is rectangular.

#16

Hi Dave,

Thank you for clarifying.

The image itself has been crop.

https://theoutdoorarmory.com/wp-content/uploads/2017/01/McNett-Essentials-WetsuitDrysuit-Shampoo-8oz-1-Final-1-460x300.png

Please set your desired image size here

Then run regenerate plugin to generate the new size images.

Hope that helps.

#17

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