Return to previous page

Add To Basket Buttons Align To Bottom - by Jane Salt

This topic has 6 replies, 3 voices, and was last updated 4 years, 3 months ago ago by Rose Tyler

Jane Salt

Participant

July 27, 2020 at 19:09

Hi there

I would like to align Add To Basket buttons to bottom.
At the moment, according to product title length and number of products categories, buttons can be in different vertical positions.
What code should I add to Custom CSS in order for it to work on both shop page and home page?

Thanks

Please, contact administrator
for this information.

#245613 Copied Theme version: 4.3.1 WooCommerce version: latest

5 Answers
Olga Barlow

Support staff

July 29, 2020 at 07:58
Hello,

Unfortunately, there is no such option. You may try to add the below custom to Theme Options
Custom CSS but keep in mind that if you align the add to cart then image won’t be aligned
```
.products-grid .products .product, .products-loop .product {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.products-grid .products {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
```
Also, I would suggest you go to Appearance > Customizer > WooCommerce > Product catalog and set 3 products per row. It would increase the width of the products and improve the layout a little bit.

Regards
#245763 Copied
Jane Salt

Participant

July 29, 2020 at 17:04

Hello Olga

Many thanks for this, it worked.

However, this code is changing alignment on shop page only, but not in the homepage (where we show featured products) or in the offer page (where we show sale products).

Could you please help with this too? We would like to apply this kind of alignment in every page where products are shown and not only in the catalogue.

Thanks,

#245913 Copied

Olga Barlow

Support staff

July 30, 2020 at 16:14

Hello,

Unfortunately, it’s not possible to apply those styles for products in the slider because of the slider HTML structure.
Our XStore theme https://themeforest.net/item/xstore-responsive-woocommerce-theme/15780546 allows this, but Legenda – nope.

Regards

#246024 Copied

Jane Salt

Participant

July 31, 2020 at 17:12

Hi Olga

Thanks for your quick reply.

What about our Offers page, where we use the [sale_products per_page="64" orderby="rand" order="rand"] shortcode? Is it possible to apply those styles there?

Thanks,

#246162 Copied
Rose Tyler

Support staff

August 1, 2020 at 07:46
Hi,
```
.products-grid .product {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
.product-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
```
Regards
#246212 Copied
Viewing 6 results - 1 through 6 (of 6 total)