Add Navigation Arrows in WooCommerce Product Gallery Slider

You can add Navigation Arrows in WooCommerce Product Gallery by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider and it has a few more configurable options.

In functions.php add

add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

Then style in some CSS

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
	visibility:visible;content: '\f054';
	font-family: 'Font Awesome 5 Free';
	margin-right: 10px;
	font-size: 20px;   
	font-weight: bold;
}

a.flex-prev::before {
    visibility:visible;
    content: '\f053';
	font-family: 'Font Awesome 5 Free';   
	margin-left: 10px;
	font-size: 20px;
	font-weight: bold;
}

ul.flex-direction-nav li a {
	color: #ccc;
}

ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

ul.flex-direction-nav li a {
	color: #ccc;
}

ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

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,
)),

Ref & Ref

19 Comments

  1. LH on January 13, 2022 at 12:47 pm

    Hey, thank you so much for this! Works perfectly :) However, I have a sticky header and when I scroll down the navigation arrows stay at the front, i.e. they don’t hide behind the sticky header.
    http://www.olwinhome.com
    Any solutions?
    Thanks!

  2. Isac on March 24, 2021 at 1:52 pm

    Is it possible to hide in the mobile view?

    Best regards,
    Isac

    • Neil Gowran on March 24, 2021 at 8:56 pm

      You can just wrap the css in a media query to it displays on tablet +

  3. Greg on December 8, 2020 at 5:59 am

    Looks great and works for the main image. DO you know how I can get something similar to work with the gallery images. So if I have more images horizontal of vertical it adds an arrow each side or top and bottom to navigate through the gallery images?

  4. Sonny on May 16, 2020 at 11:17 pm

    add this to your functions file:

    wp_enqueue_style( ‘font-awesome-free’, ‘//use.fontawesome.com/releases/v5.6.1/css/all.css’ );

  5. Met on February 24, 2020 at 4:51 pm

    Hello there thanks for the article,

    How to use with before function ?

    Whenever flexslider changes is it possible to console log something ?

    It has callback api in the code such as
    before : function(){ };

  6. Alex on October 22, 2019 at 4:30 pm

    Laurent Houtman, the code usage the fontawesome, search in Google and problem resolved ;)

  7. Laurent Houtman on August 28, 2019 at 2:19 pm

    Hello,

    Thank you for your article !

    But when i put the css and java on my website, the arrow icons are not showing and there are white square instead of the arrows… Any ideas why ?

    thank you !

    • Aude on July 9, 2021 at 10:11 am

      Same problem for me… did you find how to solve it? Thanks!

      • Kevin on January 27, 2023 at 6:18 pm

        You need to add this to your functions.php:

        wp_enqueue_style( ‘font-awesome-free’, ‘//use.fontawesome.com/releases/v5.6.1/css/all.css’ );

    • Kevin on January 27, 2023 at 6:17 pm

      You need to add this to your functions.php:

      wp_enqueue_style( ‘font-awesome-free’, ‘//use.fontawesome.com/releases/v5.6.1/css/all.css’ );

      • Mette on May 11, 2023 at 11:56 am

        Where should I add it in the functions.php file? I keep getting syntax error when adding it.

        • Neil Gowran on May 11, 2023 at 11:40 pm

          PHP code goes in functions.php, CSS goes in your stylesheet or Customizer additional CSS – cant see any syntax errors in the PHP code

          • Andrea on May 18, 2023 at 5:21 pm

            same here keep getting syntax error no matter where i’m putting the line wp_enqueue_style( ‘font-awesome-free’, ‘//use.fontawesome.com/releases/v5.6.1/css/all.css’ ); inside the functions.php file



          • Neil Gowran on May 19, 2023 at 1:40 am

            try

            wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.6.1/css/all.css' );


        • Neil Gowran on May 19, 2023 at 1:34 am

          Use below – other code in comments had curly tick marks

          wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.6.1/css/all.css' );
      • Tami on May 17, 2023 at 3:06 am

        I had the same problem and added the wp_enqueue_style( ‘font-awesome-free’, ‘//use.fontawesome.com/releases/v5.6.1/css/all.css’ ); to my functions.php however, it did not work I still have the white squares instead of the arrows.
        Any Ideas?

        • Neil Gowran on May 19, 2023 at 1:40 am
          wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.6.1/css/all.css' );
      • Sonny on May 17, 2023 at 8:29 am

        Hello,

        Same problem for me. I also added the code for font-awesome-free, but nothing shows. In the js console log I get “3PC blocked” when I add the font-awesome-free code in function.php

Leave all Comment