Archived topic
How to align the price and the "add to cart button.
5 replies · Started by Alon on February 5, 2022
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.
Hi Alon,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
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 :)