FlexSlider “Navigation Arrows” WooCommerce Product Gallery Image Slider

Navigation Arrows

Add Navigation Arrows in FlexSlider (v2.7.2) WooCommerce Product Gallery.

Requires linking to “Font Awesome 5 Free” CSS file for the Navigation Arrows. Follow How to Use font awesome icons as CSS content code (mainly, Step 1: Load the font awesome CSS file; ignore the brand icons aspect).

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 Navigation Arrows
 */
function sf_update_woo_flexslider_options( $options ) {
    $options['directionNav'] = true;
    return $options;
}

Source WP Beaches


Looking to add Dot Pagination to FlexSlider? Check out: FlexSlider Dot Pagination WooCommerce Product Gallery Image Slider

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top