[Resolved] Woocommerce product name/price aligment

[Marin]

Hi,

could you please help me with issue regarding keeping all product names and prices in the same line?

Picture to clear out my issue: https://ibb.co/yQrbjYR

Thanks

[David]

Hi there

try adding this CSS:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: unset;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin-top: auto !important;
}

[Marin]

It does not work unfortunatelly 🙁

Problem could be the fact that product images are not all the same. What do you think?

I have used this code in functions.php to have product photos contained into 300x200px

add_filter('woocommerce_get_image_size_thumbnail','add_thumbnail_size',1,10);
function add_thumbnail_size($size){

    $size['width'] = 300;
    $size['height'] = 200;
    $size['crop']   = 0; //0 - full, 1 - crop
    return $size;
}

[David]

Where did you add the CSS? I cannot see it on the site. Can you add it back in and let me know where.

[Marin]

Ah, ok…now I add it back…

[David]

Made a slight change to the CSS here

[Marin]

Thanks for your fantastic support!!
It is getting better definitely 🙂 we have one thing to fix and we’re done here…hope you could help here too:

https://ibb.co/jDGTRNj

Can we center product images? uncropped…

[David]

Add this CSS:

.woocommerce ul.products li.product .wc-product-image {
    margin: auto;
}

[Marin]

Solved!! 🙂

THANKS!!

[David]

You’re welcome

[Author]

Posts