Site logo

Archived topic

How to align the price and the "add to cart button.

5 replies · Started by Alon on February 5, 2022

Viewing posts 1–6 of 6

Hey guys.
I'd like to align the price and the "add to cart button" in the same row (on the shop page).
Something like this ->

| add to cart | 69$

My website is RTL language so the price should be on the right and the button on the left.
Please help me with this one.

Thank you in advance.

Ohhh...
I knew i forgot something :O).

Give this CSS a try:

@media (min-width: 1024px) {
     .archive.woocommerce a.button.add_to_cart_button {
         position: absolute;
         bottom: 0;
         left: 0;
     }
}

@media (min-width: 768px) and (max-width: 1023px) {
     .archive.woocommerce a.button.add_to_cart_button {
        position: absolute;
        bottom: 0;
        left: 40px;
     }
}
@media (min-width: 769px) {
    .woocommerce ul.products li.product .price {
        margin-top: auto !important;
     }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        margin-bottom: 40px !important;
    }
    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

Thank you very much!
Like a charm.
Another great support for generatepress team.

You are welcome :)

This archived topic is closed to new replies.