Home Forums WoodMart support forum Blank space between product name and product price

Blank space between product name and product price

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #707656

    isaacrubya
    Participant

    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.

    #707788

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

    #707854

    isaacrubya
    Participant

    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.
    #707923

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

Viewing 4 posts - 1 through 4 (of 4 total)