Feature Request


Voters 5

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
5

Change product image layout

  • Done
Avatar
 Niddy

Hi

Just wondering if it’s possible to change the product image layout.

At the moment, products display the lead image followed by the other product images, as a thumbnail below or to the side.

I’m wondering if it’s possible to get rid of the thumbs and instead have a main product image but as a carousel, showing any additional images.

Here’s a good working example if you look on mobile it’ll make more sense – www.next.co.uk/style/st355113/595230#595230

And an image to show you the same – i.imgur.com/jeEHRMV_d.webp?maxwidth=640&shape=thumb&fidelity=medium

Is this achievable with either WPBakery or Elementor, assuming your theme hasn’t created such a product option?

Thumbnails are so 1990’s. Time to change into full image carousel for best standards.

I’m happy to try doing it on a product but not sure how we’d call the thumbs into the slider hence asking your views on it.

Please advise. Thanks.

  • 22-11-2022 -
A

Activity Newest / Oldest

Avatar

Jack Richardson

Status changed to: Done

Avatar

Jack Richardson

Hello @Niddy,

Thanks for the information !
As you know we implement first most voted requests so we should wait untill your request will become more popular among others
Thanks for understanding !

P.S. I will provide you the asap solution below before your request become popular and it will be added as option :)

You may reach the result you asked us by adding next Custom CSS to Theme Settings -> Theme Custom CSS -> Global CSS
`
@media only screen and (max-width: 768px) {
.swiper-control-bottom {
position: absolute;
bottom: 0;
overflow: visible;
width: 100%;
}

.swiper-control-bottom .swiper-slide {
width: 12px !important;
height: 12px !important;
border-radius: 50%;
margin: 0 5px 10px !important;
box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 30%);
}

.swiper-control-bottom .swiper-slide {
background-color: #f7f7f7;
}
.swiper-control-bottom .swiper-slide img {
visibility: hidden;
opacity: 0;
}

.swiper-control-bottom .swiper-wrapper {
transform: none !important;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: -10px;
}
}
`
Result: gyazo.com/67c09b1ee0b385013a1857710ed9c279

Regards, Jack Richardson

  • Avatar
Avatar

Niddy

Awesome thank you - however it is not on that website lol - I changed the code to make them into pills - and changed the active colour too - as shown:


/* Product Hide Thumbs to >767 and use Pills Styling Start */
@media only screen and (max-width: 768px) {
.swiper-control-bottom {
position: absolute;
bottom: 0;
overflow: visible;
width: 100%!important;
}

.swiper-control-bottom .swiper-slide {
width: 30px !important;
height: 12px !important;
border-radius: 12px;
margin: 0 5px 10px !important;
box-shadow: 0 0 4px 1px rgb(0 0 0 / 30%);
}

.swiper-control-bottom .swiper-slide {
background-color: #f7f7f7;
}
.swiper-control-bottom .swiper-slide img {
visibility: hidden;
opacity: 0 !important;
}

.swiper-control-bottom .swiper-wrapper {
transform: none !important;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: -10px;
}
.swiper-container.swiper-control-bottom.second-initialized li.thumbnail-item.active-thumbnail {
background: #0054AE;
}
}
/* Product Hide Thumbs to >767 and use Pills Styling End */

  • Avatar
Avatar

Jack Richardson

Good idea !
Each one likes the specific colors and styles but I gave you a skeleton of the solution and you used it in the right way you liked !
Regards, Jack Richardson