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, 4 months ago ago by Rose Tyler

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

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

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
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
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
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
TheOne

Participant

May 26, 2023 at 14:56

Exactly like that. Thank you for the quick help.

#357798 Copied

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

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

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

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

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
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
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: add to cart, themes, vertically align, woocommerce, wordpress
Viewing 14 results - 1 through 14 (of 14 total)