Add Dot Pagination to WooCommerce Product Gallery Image Slider

You can add dot pagination to WooCommerce Product Gallery images by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider which it has a few more configurable options.

By default the product gallery navigation uses thumbnails but this can be swapped to dots by changing the ‘controlNav’ value.

In functions.php add

add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Dot Pagination Instead of Thumbnails
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['controlNav'] = true;

    return $options;
}

Then style in some CSS

.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: -40px;
	text-align: center;
}

.flex-control-nav li {
	margin: 0 6px;
	display: inline-block;
	zoom: 1;
}

.flex-control-paging li a {
	width: 11px;
	height: 11px;
	display: block;
	background: #666;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	text-indent: -9999px;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.flex-control-paging li a:hover {
	background: #333;
	background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
	background: #000;
	background: rgba(0, 0, 0, 0.9);
	cursor: default;
}

The flexslider has some more options you can manipulate…

'flexslider'  => apply_filters( 'woocommerce_single_product_carousel_options', array(
    'rtl'            => is_rtl(),
    'animation'      => 'slide',
    'smoothHeight'   => true,
    'directionNav'   => false,
    'controlNav'     => 'thumbnails',
    'slideshow'      => false,
    'animationSpeed' => 500,
    'animationLoop'  => false, // Breaks photoswipe pagination if true.
    'allowOneSlide'  => false,
)),

Use Dots on Mobile and Thumbs on Desktop

You can also further change the navigation to be twofold depending on the viewing device by using the PHP ternary operator, in the amended code below, if the deice is a mobile the navigation will use dots and if it is not it will use the thumbnails.

add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Dot Pagination on Mobile and Thumbs on Desktop
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['controlNav'] = wp_is_mobile() ? true : 'thumbnails';

    return $options;
}

Ref

See this post to add arrow navigation to WooCommerce product images.