Add To Basket Buttons Align To Bottom - by Jane Salt

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

  • Avatar: Jane Salt
    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.
    5 Answers
    Avatar: Olga Barlow
    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

    Avatar: Jane Salt
    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,

    Avatar: Olga Barlow
    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

    Avatar: Jane Salt
    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,

    Avatar: Rose Tyler
    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

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.