[Resolved] Price vertical alignment

Home Forums Support [Resolved] Price vertical alignment

Home Forums Support Price vertical alignment

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1179834
    David

    Hi,

    I would like to align my products prices like in the pictures bellow:

    Wrong:
    wrong alignment

    Correct:

    correct

    This is WC products shortcode displayed on homepage and I also need to achieve the same on shop page.

    If possible, I prefer flex or “clean” way.

    Thank you!

    #1179850
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        margin-bottom: unset !important;
        flex: 1;
        display: flex !important;
        flex-direction: column;
    }
    
    .woocommerce ul.products li.product .price {
        margin-top: auto !important;
    }
    #1179917
    David

    It works. Thank you. ๐Ÿ™‚

    #1180369
    David
    Staff
    Customer Support
    #1481821
    Baltaru

    Hi there David!
    Can you please add something to this CSS in order to align the star ratings too?
    It works for me too, but the stars are misaligned.
    https://www.offroadmax.ro

    Thanks!

    #1481883
    David
    Staff
    Customer Support

    Hi there,

    remove this CSS rule:

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

    And add this instead:

    .woocommerce ul.products li.product .star-rating {
        margin-top: auto !important;
    }
    #1481902
    Baltaru

    You continue to amaze me with your support. ๐Ÿ™‚
    I simply came to believe that I pay too little for so much attention and for such quick and HELPFUL answers!

    Chapeau!

    #1483048
    David
    Staff
    Customer Support

    Awesome – glad to be of help

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