Return to previous page

Vertically allign products on elementor archive

This topic has 2 replies, 2 voices, and was last updated 4 months, 2 weeks ago ago by Jack Richardson

TheOne

Participant

May 17, 2024 at 19:37

Hello,

I’ve build my archive page with elementor. Till now i had it build with theme options.
Bellow is the code that i used to vertically allign all products:


/* Allign products */
.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;
}

/* Allign product carousel */
.elementor-widget-etheme_product_carousel .swiper-container {
    display: flex;
    align-items: stretch;
}
.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;
		width: 100%;
}

/* For home page sliders allign*/
.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;
}

/* Allign cross-upsell products*/
.elementor-widget-etheme_product_grid .etheme-product-grid-item {
    display: flex;
    flex-wrap: wrap;
}

Now after setting up elementor archive my products on went broke again: check private.

What can i do?

#395695 Copied Theme version: 9.3.10

1 Answer

Jack Richardson

Support staff

May 20, 2024 at 07:18

Dear @TheOne,

I hope this message finds you well. We have noted that the new elements introduced require a different coding structure for vertical alignments within the theme. To accommodate these changes, we recommend implementing the following CSS snippet:

.etheme-product-grid-item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
}

.etheme-product-grid-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.etheme-product-grid-button {
    margin-top: auto;
    width: auto;
    align-self: center;
}

These adjustments should help achieve the desired layout. You can view the expected results via the following links:
– [Screenshot 1](https://prnt.sc/b9eG1jpv-QIC)
– [Screenshot 2](https://prnt.sc/FkhFwUFWP-mT)

We would appreciate your feedback on whether this solution meets your expectations. Thank you for your attention to this matter.

Best regards,
Jack Richardson
8Theme’s Team

#395909 Copied

Tagged: efficient product alignment wordpress, elementor archive vertical product alignment, improve woocommerce product display, optimize woocommerce elementor archive, product alignment on elementor archive, woocommerce themes vertical alignment, wordpress woocommerce elementor themes
Viewing 2 results - 1 through 2 (of 2 total)