Woocommerce single product navigation: Bullets instead of thumbnails - wordpress

Question

Can you help me substitute thumbnails navigation with bullets navigation?
I prefer it, because of mobile minimal functionality.
https://demo.woothemes.com/storefront/product/build-your-dslr/#camera-body

Answer 1

Add the following code snippet to your active theme's (or child theme if any) functions.php file.
add_filter('woocommerce_single_product_carousel_options', 'woocommerce_single_product_carousel_options_custom');
function woocommerce_single_product_carousel_options_custom($args){
$args['controlNav'] = TRUE;
return $args;
}
This will change the thumbnail navigation into an ordered list (numbered 1,2,3,... and so on) of navigation. You can change the display of this ordered list using CSS. An example CSS would be like this:
.flex-control-nav {
position: absolute;
bottom: -45px;
list-style: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.flex-control-nav li {
position: relative;
display: inline-block;
cursor: pointer;
height: 1.5rem;
width: 1.5rem;
margin: 0;
padding: .35714rem;
}
.flex-control-paging li a {
border: 1px solid #2d2d2d;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
background: 0 0;
outline: 0;
line-height: 0;
font-size: 0;
text-indent: -99999px;
color: transparent;
cursor: pointer;
}
.flex-control-paging li a:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
font-size: 60px;
line-height: 20px;
text-align: center;
color: #2d2d2d;
opacity: .6;
}
.flex-control-paging li a, .flex-control-paging li a:before {
height: 1.07143rem;
width: 1.07143rem;
border-radius: 50%;
}
.flex-control-paging li a:before {
display: block;
transition: background .1s ease-out;
}
.flex-control-paging li a:focus, .flex-control-paging li a:hover {
outline: 0;
}
.flex-control-paging li a:focus:before, .flex-control-paging li a:hover:before {
opacity: .8;
}
.flex-control-paging li a:hover:before {
background: #2d2d2d;
}
.flex-control-paging li a.flex-active:before {
background: #666;
}