Display Product Image Gallery Thumbnails on the LEFT SIDE with Elementor And Woocommerce

 

Code:-

/* Functionality: Custom thumbnail size in product image gallery

 * Date:  2021-03-10

 * Author: zayed

 */

/* DESKTOP */

.woocommerce .flex-control-thumbs {

    margin: 10px 0px 10px -5px !important; /* Thumbnails separation top and bottom */

    width: 100% !important; /* Controls width of thumbnails container on desktop - Horizontally */

display: flex;

}

/* Controls thumbnails width on desktop - vertically

 * Enable this ONLY for VERTICAL display

 */ 

ol.flex-control-nav.flex-control-thumbs li {

width: 15% !important; 

}

/* Enable this ONLY for HORIZONTAL display */

/*ol.flex-control-nav.flex-control-thumbs li {

width: 18% !important; 

}*/

/* PHONES */

@media (max-width:414px){

ol.flex-control-nav.flex-control-thumbs li {

width: 18% !important; /* Controls thumbnails width on mobile - Horizontally */

}

}

/* TABLETS */

@media (min-width:568px) and (max-width:768px){

/* Controls thumbnails container width on tablet - vertically

* Enable this ONLY for VERTICAL display */

.woocommerce .flex-control-thumbs {

    margin: 10px 0px 10px -5px !important; 

    width: 15% !important;

}

/* Controls width of thumbnails container on tablet - horizontally

* Enable this ONLY for HORIZONTAL display */

/*.woocommerce .flex-control-thumbs {

    width: 70% !important; 

}*/

ol.flex-control-nav.flex-control-thumbs li {

width: 90% !important; /* Controls thumbnails image width on tablet - vertically */

}

}

@media (min-width:769px) and (max-width:1024px){

/* Controls thumbnails container width on tablet - vertically

* Enable this ONLY for VERTICAL display */

.woocommerce .flex-control-thumbs {

    margin: 10px 0px 10px -5px !important; 

    width: 12% !important;

}

/* Controls width of thumbnails container on tablet - horizontally

* Enable this ONLY for HORIZONTAL display */

/*.woocommerce .flex-control-thumbs {

    width: 70% !important; 

}*/

ol.flex-control-nav.flex-control-thumbs li {

width: 100% !important; /* Controls thumbnails image width on tablet - vertically */

}

}

/* Functionality: Product page image thumbnails on left side

 * Date:  2021-03-10

 * Author: Rafael Azuaje

 * Disable this segment if you want to display horizontally

 */

@media (min-width:568px) {

.woocommerce .flex-control-nav { 

position: absolute; 

top:-10px; 

left: 0px;

}

.flex-control-thumbs {

display: flex;

flex-direction: column;

}

}

@media (min-width:568px) and (max-width:768px){

.woocommerce .flex-viewport {

width: 86.5% !important;

left: 100px !important;

}

}

@media (min-width:769px) and (max-width:1024px){

.woocommerce .flex-viewport {

width: 87% !important;

left: 95px !important;

}

}

@media (min-width:1025px){

.woocommerce .flex-viewport {

width: 85% !important;

left: 80px !important;

}

}