Myujth

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

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;