WooCommerce thumbnails different size

[stefaneklund]

Hey

WooCommerce thumbnails now have different sizes.
Example https://natrud.no/portlosninger/portbeslag-for-ytterporter/
Product: " 290 56.5K/N Singelportrull Nylon"

Even though these are adjusted to be 300px wide (Customizer -> WooCommerce -> Product Images -> Thumbnail width 300. Crop 1:1. Giving all the product thumbnails a square.
But with images that are less then 300px x 300px these images are not seen in a square.

I even used Regenerate Thumbnails plugin to see if that would help. I also found out that WooCommerce has its own build in Regenerate here:
WooCommerce > Status > Tools > Regenerate shop thumbnails > Click – Regenerate (Button on right)

Regenerating did not help.
I have read through other threads in the forum and also added code such as:

/* Adjust product thumbnails. */
.archive .product-category img {
    width: 300px !important;
	height: 300px !important;
}

li.product .entry-featured {
    overflow: hidden;
    margin-top: 0;
    z-index: 0;
    width: 300px !important;
    height: 300px !important;
}

The above code did not work.

I need a solution to where the minimum thumbnail size will show 300x300. Even though some images are smaller. I need the smaller images to show the correct thumbnail image size.

Thank you!

[ruenel]

Hello @stefaneklund,

Thanks for writing in!

You need to update your custom CSS code and set the height to auto.

li.product .entry-featured {
    overflow: hidden;
    margin-top: 0;
    z-index: 0;
    width: 300px!important;
    max-width: 100%;
    height: auto !important;
}

And by the way, please turn OFF the global container in your row settings so that the product items will align to the image above it like this:

Kindly let us know how it goes.

[stefaneklund]

Hello @ruenel Rue

I went ahead and adjusted the CSS with the code you mentioned.
Did a few hard refreshes with WP Rocket, but did not see any difference.
I assume when I get the below step fixed then that should hopefully help.

I did a search for global container in the docs but could not find any mention of global container.
How do I navigate to the global container?
I went to this page: https://natrud.no/portlosninger/portbeslag-for-ytterporter/
Then in the top admin bar clicked the X -> Edit page (side).
Clicked the area with the thumbnails. Classic Text, Columns and area outside. I also used the breadcrumbs and clicked the various areas. I am still not able to figure out where the global container is located.

Thank you!

[prakash_s]

Hello @stefaneklund,

I checked your given Page URL it seems that you have not added the custom CSS code under X/Pro—>Theme Option —>CSS. In case if you have already added this custom CSS code, I would suggest you purge all the cache and temporarily deactivate the cache plugin and then check it again. I would also recommend you must check your custom CSS code syntax error as well from CSSLINT.

For the Global Container, You need to go to the Cornerstone builder —>Section—>Row Please have a look at the given screenshot below.

In case if you are not able the see this Option at your end, you must check the “Advanced Mode”. Please make sure you have set the “Advanced Mode” as “ON”. To enable it, click on the hamburger menu icon----> Preferences—>Advanced Mode–>Set it as ON.

Hope it helps
Thanks

[stefaneklund]

Hi

We use a child theme. I add various CSS adjustments in the style.css of the child theme.

–

I went to https://natrud.no/portlosninger/portbeslag-for-ytterporter/ and clicked the X located in the top admin bar and selected Cornerstone. There I clicked the “290 kategori”. I clicked the Classic Section. Then in the sidebar settings area clicked Classic Row (v1) -> Inspect. I could not see the Global Container area, so I had to follow the instructions with clicking the Hamburger icon -> Preferences -> then turn on Advanced Mode. I clicked the back arrow button to go back to the Content area. I noticed that the Classic Row was still selected. I scrolled the sidebar settings to the bottom, but it is still different.

I am seeing you are showing Section and Row while the site I am dealing with has Classic Section and Classic Row.

How should I deal with this?

[ruenel]

Hello @stefaneklund,

Since you are using the classic section and classic rows, you should be seeing the "Column Container’ option in the classic row settings.

I went ahead and I already disable the column container. Check your page now.

[stefaneklund]

I clicked: https://natrud.no/portlosninger/portbeslag-for-ytterporter/ and then X, and then Edit Side (page). I am seeing the following.

The problem here is that the 290 56.5K/N Singelportrull Nylon is not the same thumbnail size as all the others. I need to adjust all the thumbnails that do not have the correct size.

On the frontend. Right clicking the Singelportrull Nylon image and opening it in a new tab. https://natrud.no/wp-content/uploads/2020/04/360346.jpg

Here is the same image in the Media Library.

The problem is that the client uploads smaller then 300x300px images. These images still need to be seen in the correct 300x300px format on the frontend. Keeping the same size square thumbnails.

[tristup]

Hi @stefaneklund,

To make the images in same width, I would suggest you to add the following custom CSS code into the Theme Options > CSS. I have tested the following code by adding through the browser debugger tool and found working.

.entry-product .entry-featured img
{
    width:166px;
    height: 166px;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[stefaneklund]

Thank you! That seems to work nicely!

[prakash_s]

Hello @stefaneklund,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks