NO BUG: WooCommerce Products Not Equally Sized

Bugs
1

Bricks Version: 1.6.1
Browser: Brave and Firefox
OS: Linux
URL: (WooCommerce Archive Page)
Breakpoint: Desktop

Possible bug here.

I’m having an issue where WooCommerce products are displayed with different sizes. The Products element is used, and 4 columns are specified for the desktop breakpoint. It appears that the first two products are being displayed correctly, and that the last two are shrunk to fit in the space remaining after the first two columns. I’ve just started working with CSS grids for the first time now with Bricks Builder, so perhaps there is something obvious I’m missing here, but I just can’t seem to find what CSS property, or lack thereof, is causing this.

What’s even more strange is the fact that I’ve tried exporting a similar template from a website where the product element displays correctly into this linked website, and upon opening Bricks up to edit the newly created template I run into the same problem. I’ve tried deactivating all plugins, besides WooCommerce, and nothing changes. I have not tried uninstalling and reinstalling Bricks Builder.

Example Image:

image
image1757×926 95.6 KB

2

From a visual it looks like the issue is the sizing of your images. You need to ensure your images are all loading to the same size, that should then look much better for you.

Example image field: {featured_image:woocommerce_thumbnail:link}

The second property in the field dictates the size of image you want, in my case I’m using “woocommerce_thumbnail” sizing.

2 Likes
3

Hi Joshua,
Thanks so much for your report!

As Dustin has already correctly said, it is solely due to the images you use. Either you prepare each image before uploading so that it has the same aspect ratio, or you select a cropped image such as the thumbnail.

Best regards,
timmse

4

@d19dotca @timmse

Sorry for the late response. That is what’s weird here. All of the images are using {featured_image:woocommerce_single:link}, which all show up with a width of 600px, as confirmed when inspecting the elements. The height is varied because, as you said, some images were not uploaded with the same dimensions (I agree that is not ideal). However, notice that the third and fourth columns are both displayed at approximately half the width of the first two. This shouldn’t be the case, and I’m at a loss as to why this is. These same images were displaying correctly three weeks ago; it wasn’t until I tried to make some changes to the WooCommerce Archive template that this started happening.

First image:

<a href="https://kamadogourmet.com/product/17-kamado-gourmet-black-pepper/" aria-label="View 17″ Kamado Gourmet – Black Pepper"><img width="600" height="600" src="https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-600x600.jpg" class="attachment-woocommerce_single size-woocommerce_single lazyautosizes lazyloaded" alt="" decoding="async" data-src="https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-600x600.jpg" data-srcset="https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-600x600.jpg 600w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-300x300.jpg 300w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-150x150.jpg 150w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-768x768.jpg 768w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-100x100.jpg 100w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway.jpg 800w" data-sizes="auto" sizes="345px" srcset="https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-600x600.jpg 600w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-300x300.jpg 300w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-150x150.jpg 150w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-768x768.jpg 768w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-100x100.jpg 100w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway.jpg 800w"><noscript><img width="600" height="600" src="https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-600x600.jpg" class="attachment-woocommerce_single size-woocommerce_single" alt="" decoding="async" srcset="https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-600x600.jpg 600w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-300x300.jpg 300w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-150x150.jpg 150w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-768x768.jpg 768w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway-100x100.jpg 100w, https://kamadogourmet.com/wp-content/uploads/2022/12/17-Kamado-Gourmet-Black-Pepper-on-Driveway.jpg 800w" sizes="(max-width: 600px) 100vw, 600px" data-eio="l" /></noscript></a>

Last Image:

<a href="https://kamadogourmet.com/product/ash-cleaning-tool/" aria-label="View Ash Cleaning Tool"><img width="600" height="600" src="https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-600x600.webp" class="attachment-woocommerce_single size-woocommerce_single lazyautosizes lazyloaded" alt="" decoding="async" data-src="https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-600x600.webp" data-srcset="https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-600x600.webp 600w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-300x300.webp 300w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-150x150.webp 150w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-768x768.webp 768w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-100x100.webp 100w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool.webp 800w" data-sizes="auto" sizes="193px" srcset="https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-600x600.webp 600w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-300x300.webp 300w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-150x150.webp 150w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-768x768.webp 768w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-100x100.webp 100w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool.webp 800w"><noscript><img width="600" height="600" src="https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-600x600.webp" class="attachment-woocommerce_single size-woocommerce_single" alt="" decoding="async" srcset="https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-600x600.webp 600w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-300x300.webp 300w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-150x150.webp 150w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-768x768.webp 768w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool-100x100.webp 100w, https://kamadogourmet.com/wp-content/uploads/2022/12/Ash-Cleaning-Tool.webp 800w" sizes="(max-width: 600px) 100vw, 600px" data-eio="l" /></noscript></a>

I was just thinking that perhaps the best solution is to revert the page back to how it was weeks ago. Perhaps this is just some random mishap that won’t come up again? I could try to restore the page from a database backup.

5

Update. Playing around with the products that are displayed, I’ve discovered that the issue occurs when any of two products are displayed in the WooCommerce Archive. By hiding them, the issue disappears. Let me illustrate.

image
image1597×933 214 KB

Without either of the Auber products.

image
image1632×937 90.3 KB

With one Auber product (bottom left column). Notice the column in which the Auber product appears is all the same width, while the other columns have shrunk to fit in the remaining available space.

image
image1625×933 91.4 KB

The other Auber product (bottom left column). Same thing.

We have already seen that when both Auber products are visible, the two columns they exist in (first and second columns) are enlarged, and the other two are shrunken to fit the available space.

I’ve tried reuploading the image and switching the product to the new version. I was also thinking that perhaps it had something to do with this image being webp (despite that other images on the Archive are webp, and they don’t have the same problem) and uploaded a jpg version of the image. Nothing seems to be making any difference. Also note that I have made sure to clear my browser cache of images, with no changes.

I’ve tried to reproduce this on a test website using one of the problem images, with no success.

6

Solved!

The issue is that the two products in question both have a long word in their title, and text breaks are only allowed between words.

For example, one problem product has the title: Auber WiFi Grill Thermometer/Temperature Control for Mesh Routers. When I shorten this to: Auber WiFi Grill Thermometer/Tempe Control for Mesh Routers, the product column it takes up gets smaller in size, closer to the other columns. When I use a space instead of a forward slash, the product column shows up the same size as all of the other columns.

image
image1917×965 220 KB

This problem can be resolved by using word-break: break-word; for the product titles. I believe this is preferable to having the columns grow or shrink because the title text can’t break with really long words. In addition, this will make the problem much easier to diagnose in the future.

image
image1918×967 427 KB

Try it yourself, add a product to a WooCommerce store with a long word in the title, like Foo Bar ASDFGHJKLQWERTYUIOP Baz. The long title won’t fit inside of the column and the column will grow to accommodate the text. Again, I believe using word-break: break-word; for the product titles is preferable to having the columns grow or shrink because of the title text.

1 Like
7

On second thought, perhaps word-break: break-word; should be applied to all H elements by default.

Edit: Perhaps this should be a feature request?

8

Hey Joshua,
It’s great that you found out yourself what the problem is! That’s how you learn the most :slight_smile:

We are adding word-wrap:break-word; to every element, which is sufficient in most cases. Therefore, I would rather refrain from introducing word-break as default, as it will probably lead to undesirable side effects.

Best regards,
timmse

2 Likes
9

Is it possible to add this information about long words messing up column widths in any documentation? Also, as a side thought, is there any plans to have a wiki-like documentation platform for Bricks in the future?

10

Hey Joshua,
You are the first to report the problem, so it doesn’t seem to apply to all users. Maybe we can introduce a kind of “quick tips” category in the Bricks Academy in the future, which contains such small but helpful tips:

We have already thought about a wiki-like platform for the academy/documentation, but have not yet concretized it. Let’s see what the future holds :slight_smile:

Best,
timmse