[Resolved] Woocommerce product alignment

Home Forums Support Woocommerce product alignment

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #128819
    richpags

    Hey,

    I was just wondering if there is a way to easily align featured products products.

    At the moment moment a few of my product featured pictures don’t line up correctly.

    Check out the link bellow.

    Cheers
    Richie

    http://reelmovieposters.com.au/product-category/daybills

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #128844
    bdbrown

    Hi Richard. The images are different heights because the original images are different heights. When the images are scaled in width to fit the container they are scaled in height proportionately. You could try adding the following css:

    .woocommerce ul.products li.product a img {
      height: 340px;
    }
    

    Change the 340px to whatever you need.

    Adding css reference:
    https://generatepress.com/knowledgebase/adding-css/

    #128845
    bdbrown

    Duplicate post; content deleted.

    #128847
    richpags

    Thanks for that bdbrown,

    Yeah I thought the same thing about the different heights so I made the change to one of the posters to be the same height as another. Same result.

    I added in the code you provided which helped.
    I’ve got different poster sizes in different categories so that code has now made my Aus 1 Sheets display like the daybills.

    Richie

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #128857
    richpags

    Another question,

    I’ve got different types of posters which have different measurements.

    Just wondering if the product featured image size can be custom depending on the poster category?

    For eg, check out my UK quads page.

    Cheers
    Richie

    http://reelmovieposters.com.au/product-category/birtish-quads

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #128859
    Tom
    Lead Developer
    Lead Developer

    The images on the first page look pretty good to me? Didn’t see any misalignment.

    As for your second question – I’m not sure if that’s possible. You may want to ask the devs over at WooCommerce – they might have a solution for you 🙂

    #128861
    richpags

    Cheers Tom,

    Yep I’m pretty happy with the alignments now.

    I’ll have to see what I can find re the different poster dimensions issue.

    Thanks
    Richie

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #128862
    Tom
    Lead Developer
    Lead Developer

    Cool – let me know what you find out/if you need any help 🙂

    #128866
    richpags

    Sweet,

    mmm I just removed the code bdbrown suggested which fixed my alignment issue, and the UK quad is displaying better now!!

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #128867
    Tom
    Lead Developer
    Lead Developer

    Ah, without that code, the heights on your homepage are all a little different.

    If you set a height, then you’ll run into some distortion of images if the aspect ratio is off a bit (like the UK squad).

    Your best bet if you want consistent results is to upload images that are all the exact same size.

    #128868
    richpags

    Cool Tom,

    Yeah uploading images that are all the same size will be a problem as different poster types are have different sizes.

    I think I can live with it the way it is now.
    I’ll see if I can align the “Cart” buttons.

    Thanks
    Richie

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #128941
    Tom
    Lead Developer
    Lead Developer

    Ah fair enough 🙂

    Looking at the code, they don’t give you much to work with to align the title and add to cart to the bottom.

    However, they may be able to give you some pointers over in their support forum.

    Thanks!

    #129102
    richpags

    Cool Tom,

    I reckon I’d take the slight misalignment of the “add to cart” buttons over the distorted featured images.

    Cheers
    Richie

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.