Different Sized Pictures On Woocommerce Shop Page

Add this line to your custom CSS:
#products-grid span.category_grid_box {max-height:131px;}

Hi Superkot. Thanks for your help!

I was getting discouraged, because nobody was offering any solution to my problem and I don’t really know what I’m doing. Your help is very much appreciated.

I hate to sound like a real pain, but I don’t know how to add that line of code into the site. Could I be so presumptuous as to ask for a step-by-step ‘handholding’ that would lead me through the process? I just got two books from Amazon on CSS and HTML, but it’s going to be a long learning curve, before I get to the place where I’ll be brave enough to do anything like that.

Paste the line at:
Dashboard > Appearance > Customise > Additional CSS

Hi Lorro. Thanks for joining in to help me; I’m really grateful for you guys.

Okay, I followed your prescribed path: Dashboard > Appearance > Customize…but then there was no “Additional CSS”; instead there was a whole, long list of choices. The only thing in that list which appeared to be close to “Additional CSS” was “Custom Code.” But when I click on that, I get three black boxes, labeled “Custom CSS,” “Header Javascript Code,” and “Footer Javascript Code.” Again, just guessing, but it appears that maybe “Custom CSS” is probably what you mean with “Additional CSS”; dunno though. If it is, indeed, what you meant, then where do I paste in the code “#products-grid span.category_grid_box {max-height:131px;}”? That black box labeled “Custom CSS” has 27 lines of code in it. If that is really where I need to go, do I just paste the new code at the very end of it, in line 27, which is blank?

Thanks again for your help!

The choice in the customiser is called exactly “Additional CSS” and its usually the last choice in the list. This is part of WordPress core code. From your description, it sounds like your theme or one of your plugins has removed the option and provided “Custom Code” instead. Paste the new line at the end of Custom CSS.

Copy and paste all 28 lines of Custom CSS here to validate it:
https://jigsaw.w3.org/css-validator/#validate_by_input

If the CSS doesn’t work, it won’t crash your site. You will be able to come back and tweak or remove it. But if it doesn’t work, leave it in so forum members can debug it.

Hi Lorro.

Thanks for that. I copied & pasted the code which Superkot gave me, where you suggested, then refreshed the site, but those images still appear larger than the rest.

I also copied and pasted the newly-altered 28 lines of code into that site which you told me about and it verified the code is okay, so I guess there is nothing wrong with that part, anyway.

Thank you for sticking with me, in trying to figure this out.

Open that page when logged in, click on “Customize” on the black top bar and then proceed to whatever option you have available (Custom CSS), then paste the line in there. The changes will reflect immediately, but normally you’ll have to save it for the effect to stay. If nothing happens, make screenshot of your page with that field opened & line pasted and show us.

Hi Superkot.

Thanks, again, for your help.

Okay, I did all of that, and here’s the screenshot. I hope that I can past it here:

Arrrgh! It won’t let me paste the screenshot. How do I do that?

I just copied all of the code in that customizer box, including the code which you sent me. I don’t know if it will help. Here it is:

.site-header.sticky {
/*-webkit-box-shadow: 0px 10px 128px -36px rgba(0,0,0,0.9); -moz-box-shadow: 0px 10px 128px -36px rgba(0,0,0,0.9); box-shadow: 0px 10px 128px -36px rgba(0,0,0,0.9);*/ -webkit-box-shadow: 0px 4px 63px -32px rgba(0,0,0,0.9); -moz-box-shadow: 0px 4px 63px -32px rgba(0,0,0,0.9); box-shadow: 0px 4px 63px -32px rgba(0,0,0,0.9); } nav.show-for-large-up.main-navigation.default-navigation.align_left { margin-top: 7px; margin-bottom: 7px; }

.vc-box-shadow {
-moz-box-shadow: -2px 2px 81px -27px rgba(0,0,0,0.29);
-webkit-box-shadow: -2px 2px 81px -27px rgba(0,0,0,0.29);
box-shadow: -2px 2px 81px -27px rgba(0,0,0,0.29);
}

.upper a {
text-transform: uppercase !important;
font-weight: bold !important;
font-family: NeueEinstellung;
margin-top: 35px !important;
font-size: 13px !important;
}

@media only screen and (min-width: 1024px) {
.site-header {
padding-bottom: 0px !important;
}
}
.site-branding {
margin-right: 15px;
}
}
#products-grid span.category_grid_box {max-height:131px;}

Please delete 1 of the closing curly brackets immediately before #products-etc. I would have expected the syntax checker to pick that up.

That’s it!! That did it.

Computers are so unforgiving; one little curly bracket can mess things up.

I can’t tell you how much I really appreciate you guys helping me with that. It doesn’t seem like a big thing, just having a couple of little pictures being a bit larger than the others, but it certainly wouldn’t have looked very professional for an online store’s website.

You and Superkot are good ones.