Woocommerce product alignment

[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

[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/

[bdbrown]

Duplicate post; content deleted.

[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

[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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Author]

Posts