Blank space between product name and product price

Whenever I upload a new product, a blank space appears between the product’s name and the price of that particular price. In the attached image, there is a side by side comparison of default theme demo product (left) and the product I uploaded (right). You can clearly see the white black space on my product.

Hello,

You are using a Custom Single Product layout, which is built with the WoodMart WooCommerce builder.

To fix it, go to Layouts > Edit your Single Product layout with Elementor. Then, edit the Product Title and Price widgets and adjust their margin and padding to remove the extra space.

Here is our documentation about layout builder: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards,

This information does not help at all. My problem is not how a single product appears when you click on it, rather, my problem is how the products appear on the shop page, recently viewed, related products sections et cetera. notice that my products have a blank white space between the product attribute and price attribute i.e. before you click on the product to view it. Now this particular problem cannot be edited on elementor. I have tried and realized that I can only change the padding of the product name and product price widgets on the PRODUCT PAGE (that means, once you click to view the product on its own page) but that is not where my issue is. my problem seems like it needs a custom code snippet to fix it. I have attached another file showing this blank space with red arrows. the other products on the attached image that I have not labelled do not have this problem because they are the default theme demo products. Its only my uploaded products that seem to have this problem. If there’s anything I’m missing on this particular issue, perhaps you could elaborate further for me. The issue only appears on desktop.

Attachments:

You must be logged in to view attached files.

Hello,

I’ve checked your site, and the spacing you’re seeing on the shop is not coming from Elementor, but from the product grid layout itself.

After reviewing it, the issue appears to be caused by inconsistent product image dimensions. When an image is smaller or has a different aspect ratio, it keeps the container height consistent, which results in visible white space. That’s why the demo products look fine while your uploaded ones show extra space.

Make sure all product images use the same size and aspect ratio (for example: 800×800).

Please check this manual and upload the same size of the product images: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

The only way to make the view awesome is to upload images of the same size and proportion.
WooCommerce allows some settings that you can find under Appearance >> Customize >> WooCommerce >> Product Images.

You can define the “height” of the shop thumbnails by setting up the width : height aspect ratio in the “Thumbnail cropping” section:

Custom: In Custom, you can select the aspect ratio of the image.

Here are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).

Uncropped: The height of the image will be untouched. Images will be displayed using the aspect ratio in which they were uploaded: https://ibb.co/6mR6DbD

Best Regards,

[Author]

Posts