Product Grid: Image Size and Content Alignment

When products have featured images of different sizes, the product grid items may have varying heights, causing inner content (title, price, Add to Cart button) to appear misaligned. While using images of equal size and proportion is ideal, it’s not always feasible for large catalogs. Omniverse provides multiple settings to improve product grid alignment.

---

Configure Product Image Sizes #

1. Go to Appearance → Customize → WooCommerce → Product Images.
2. Set sizes for:
   • Main image width – Used on single product pages (uncropped). Example: 600px in demo sites.
   • Thumbnail width – Used in product catalog/grid. Example: 350px in demo sites.
3. Configure thumbnail cropping:
   • 1:1 – Crops images into a square.
   • Custom – Crops images to a specific aspect ratio (e.g., 4:3) or manually enter an aspect ratio.
   • Uncropped – Displays images in the original uploaded aspect ratio.

Note: No fixed size is required. Images should be large enough to display nicely on your website. Demo image sizes for reference:

• Product main image: 800 × 1200 px
• Blog post: 1024 × 720 px
• Page title background: 1200 × 400 px

---

Adjust Image Sizes for Grid Layout #

• Consider your website container width and number of columns in the grid.
  Example: Container width = 1200px, 4-column grid → product element width ≈ 300px.
• Set the thumbnail width accordingly in WooCommerce to improve page speed.
• For different grids across the website (Elementor/WPBakery widgets), you can specify different product image sizes for each grid.
• Alternatively, calculate based on the widest product item in the grid.

---

Limit Product Title Length #

• Varying title lengths can shift content alignment.
• To fix this, set title line limits in:
  Theme Settings → Product Archive → Product Style → Product Title Lines Limit
  Options: One line, Two lines, or No limit.

---

Enable Even Product Grid #

• If products have different elements (title, price, rating, brand, etc.), enable the Even Product Grid option to align all product blocks.
• Location: Theme Settings → Product Archives → Product Styles → Even Product Grid