WooCommerce Product Slider Vertical Styling. The CSS code will make your slider vertical aligned. This code will enable product gallery slider: https://gist.github.com/zeshanshani/5e634af86e49ce07c87b44728c62f64b
/* ==================================== */
/* WooCommerce Product Image Slider */
/* This code will enable product gallery slider: */
/* gist.github.com/zeshanshani/5e634af86e49ce07c87b44728c62f64b */
/* ==================================== */
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
padding-left: 115px;
box-sizing: border-box;
position: relative;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images figure {
margin-left: 0;
margin-right: 0;
}
/* Flex Viewport */
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-viewport {
float: right;
width: 100%;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-viewport .woocommerce-product-gallery__image,
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-viewport .woocommerce-product-gallery__image:not(:first-child) {
padding: 0;
}
/* Flex Nav */
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav {
float: left;
width: 100px;
position: absolute;
left: 0;
top: 0;
height: 100%;
overflow: scroll;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav li {
margin-bottom: 10px;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav img {
opacity: 0.7;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav .flex-active {
opacity: 1;
border: 2px solid #000;
max-width: 96px;
}
@media only screen and (max-width: 767px) {
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
padding-left: 0;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-viewport {
float: none;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav {
float: none;
position: relative;
margin-top: 15px;
width: 100%;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav {
margin-left: -5px;
margin-right: -5px;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-nav li {
display: inline-block;
vertical-align: middle;
padding: 0px 5px;
}
}
/* Direction Nav */
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images ul.flex-direction-nav {
position: absolute;
top: 50%;
width: 100%;
left: 0;
box-sizing: border-box;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images ul.flex-direction-nav .flex-nav-prev {
float: left;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images ul.flex-direction-nav .flex-nav-next {
float: right;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images ul.flex-direction-nav a {
border-radius: 0px;
text-indent: -9999em;
background: #fff;
left: 0;
}
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images ul.flex-direction-nav .flex-prev {
left: 0;
}
.woocommerce .woocommerce-product-gallery__wrapper ul.flex-direction-nav .flex-next {
right: 0;
left: auto;
}
@media only screen and (min-width: 768px) {
.woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images ul.flex-direction-nav {
padding-left: 115px;
}
}