Return to previous page

Bought together single product page css issues

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

Farcela

Participant

January 18, 2023 at 23:08
Hi,

I’ve the following issues with bought together feature:
1) Adding border to bought together wrapper but no border appears in single product page:
https://prnt.sc/cDVcd4MOK6FV

2) Differences in height of products on bought together list:
https://prnt.sc/Oto6SW-3DpJ7
I’ve found a piece of code on other 8theme topic, but this code only fix the differences in height at shop page. Can you modify the code so it will also work on bought together 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;
}
```
Regards.
#344340 Copied Theme version: .9.0.2
3 Answers
Rose Tyler

Support staff

January 19, 2023 at 09:04
Hello, Farcela,

1/ It seems that we missed a few more options for border styles and border colors to add for that element. We will add them in the next theme update and already uploaded them in core files on your web-site -> https://prnt.sc/5YC9taUe8d3V

2/ There is no good coding solution for that case. You may align items by center using next code snippet:
```
.bought-together-products .swiper-wrapper {
    align-items: center;
}
```
Let us know if it helped or if you have any further questions or concerns. We are always here to help.

Kind Regards,
8theme team
#344360 Copied
Farcela

Participant

January 19, 2023 at 10:56

Hi Rose,

1/ Thanks for the update!

2/ Unfortunately the code didn’t work.. even after adding !important to it. Do you know why?

Thanks.
regards

#344371 Copied

Rose Tyler

Support staff

January 19, 2023 at 11:36

Hello, Farcela,

Sorry for the mistake, there should be align-items: center; instead if align-items: stretch;
It is already fixed in the answer above.

Kind Regards,
8theme team

#344375 Copied
Tagged: bought together, issues, single-product page, themes, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)