Return to previous page

Add to cart button align vertically in archive and module

This topic has 14 replies, 2 voices, and was last updated 1 years, 6 months ago ago by Rose Tyler

  • Avatar: TheOne
    TheOne
    Participant
    May 26, 2023 at 11:12

    Hello,

    I can’t get to vertically align add to cart buttons (archive, seperate grid – home). I used the following code:

    .content-product .product-title {
    min-height: 47px;
}

    and 

    .content-product .product-title a {
min-height: 3.3em;
}

    but nothing seems to work. It does move the price from the title but that needs to be static. only the buttons should allign at the bottom.

    Please, contact administrator
    for this information.
    #357780 Copied Theme version: 9.1.6 WooCommerce version: 7.7.0
    13 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 26, 2023 at 12:08

    Hello TheOne,

    Thank you for contacting us and for using XStore.

    Please provide some screenshots for a better understanding of the desired result.
    You can use Lightshot screenshot or Gyazo tool to make screenshots and share the links here, or you can use a file-sharing service such as WeTransfer https://wetransfer.com/ to upload ready photos there and provide us with URLs.

    Also, please set an administration role for the user, so we can get access to theme options.

    Kind Regards,
    8theme team

    #357786 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 26, 2023 at 13:17

    Hello,

    The desired look is in private are (link to prnt.sc). All i want to do is allign the add to cart red buttons on the same line (in the picture between light blue lines). It worked on other xstore installations but not on this one.

    User has admin access.

    Please contact administrator
    for this information.
    #357789 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 26, 2023 at 13:23

    Hello TheOne,

    Please try to use the next custom CSS code:

    .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}
.content-product .product-image-wrapper {
    margin-bottom: 10px;
}

    Kind Regards,
    8theme team

    #357790 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 26, 2023 at 14:26

    Yes, this works, but i was wondering if i can have the space between the description and the button and not like it’s now – from the product image and title?

    #357792 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 26, 2023 at 14:40

    Hello TheOne,

    Add this code also:

    .products-grid .product-excerpt {
    min-height: 42px;
}

    Kind Regards,
    8theme team

    #357795 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 26, 2023 at 14:56

    Exactly like that. Thank you for the quick help.

    #357798 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 26, 2023 at 15:03

    Hello TheOne,

    You are always welcome. We kindly ask you to rate our theme, as it will motivate our team to move forward and create even cooler things. Please follow this link to rate https://themeforest.net/downloads

    Kind Regards,
    8theme team

    #357800 Copied
    Avatar: TheOne
    TheOne
    Participant
    July 7, 2023 at 11:03

    Hello,

    Can you please also provide the code for alligning the .swiper-slide (product carousel) that i have on my home page?

    #361458 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 7, 2023 at 12:16

    Hello TheOne,

    Private Content

    Kind Regards,
    8theme team

    Please contact administrator
    for this information.
    #361465 Copied
    Avatar: TheOne
    TheOne
    Participant
    July 7, 2023 at 14:19

    Link of the page in private (for another xstore installation).

    Please contact administrator
    for this information.
    #361482 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 7, 2023 at 16:17

    Hello TheOne,

    Thank you for your response.

    Please describe the desired result you want to get on the mentioned site.

    Kind Regards,
    8theme team

    #361509 Copied
    Avatar: TheOne
    TheOne
    Participant
    July 7, 2023 at 16:31

    I want to vertically allign the product title and price like we discussed few posts above. I want to apply the bellow code to my product sliders on my home page and “you may also like” and “recently viewed” products on single product page:

    .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}
.content-product .product-image-wrapper {
    margin-bottom: 10px;
}
.products-grid .product-excerpt {
    min-height: 42px;
}
    #361512 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 9, 2023 at 07:05

    Hello TheOne,

    Thank you for your response.

    In this case you may use the next custom CSS code:

    .elementor-widget-etheme_product_carousel .swiper-container {
    display: flex;
    align-items: stretch;
}
.elementor-widget-etheme_product_carousel .swiper-slide  .product {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.elementor-widget-etheme_product_carousel .swiper-slide .etheme-product-grid-content {
    align-self: flex-end;
}

    – for home page sliders (and others new Product Carousel widgets)

    .products-slider .content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.products-slider.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.products-slider .swiper-wrapper {
    height: auto;
}

    – for Cross-sell/Ups-sells
    and

    .elementor-widget-etheme_product_grid .etheme-product-grid-item {
    display: flex;
    flex-wrap: wrap;
}

    Recently viewed (and others new Product Grid widgets).

    We hope this answer is helpful.

    Kind Regards,
    8theme team

    #361560 Copied

  • Tagged: , , , ,

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

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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Handmade Store – WordPress WooCommerce Theme
lazy-placeholder
Books Store – WordPress WooCommerce Theme
lazy-placeholder
Bike Store – WordPress WooCommerce Theme
lazy-placeholder
WooPress – WooCommerce WordPress Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Home Decor Store – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Plants Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WordPress WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce Theme

See All Templates

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