FlexSlider “Dot Pagination” WooCommerce Product Gallery Image Slider
Dot Pagination
Use Dots on Mobile and Thumbs on Desktop
Add Dot Pagination to FlexSlider (v2.7.2) WooCommerce Product Gallery Image Slider.
By default the product gallery navigation uses thumbnails, but this can be swapped to dots by changing the ‘controlNav’ value to true.
Place the below PHP code in Code Snippets, and set to Only run on site front-end.
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/**
* Filter WooCommerce Flexslider options - Add Dot Pagination Instead of Thumbnails
*/
function sf_update_woo_flexslider_options( $options ) {
$options['controlNav'] = true;
return $options;
}
Where is the FlexSlider option for Dot Pagination originally located?
For Dot Pagination to work with the default WooCommerce Product Gallery Image Slider (which uses FlexSlider), the FlexSlider option controlNav (located on line 1179 of the jquery.flexslider.js file) MUST be set to true.
controlNav: true // Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage
The PHP in the section above overrides the WooCommerce Product Gallery Image Slider default setting for navigation from controlNav: "thumbnails" (nav = thumbs) to controlNav: true (nav = dots).
CSS for FlexSlider Dot Pagination
Place the below CSS code in Code Snippets, wrapped inside an add_action Hook, and set to Only run on site front-end.
Since I use the free version of Code Snippets, the below CSS must be wrapped in an add_action hook. Note: the pro version of Code Snippets has CSS handling built-in.
add_action Hook PHP code for Code Snippets:
add_action( 'wp_head', function () { ?>
<style type="text/css">
/* CSS goes here */
</style>
<?php } );
CSS for Code Snippets (place where it says /* CSS goes here */ in the above add_action Hook):
/* FlexSlider Dot Pagination: controlNav
* https://wpbeaches.com/add-navigation-arrows-in-woocommerce-product-gallery-slider-2/
* FlexSlider option controlNav (located in the flexslider javascript file) MUST be set to true for this to work
*/
.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;
}
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' );
/**
* Filter 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;
}
Looking to add Navigation Arrows to FlexSlider? Check out: FlexSlider Navigation Arrows WooCommerce Product Gallery Image Slider
