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,
)),
19 comments
LH
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!
Isac
Is it possible to hide in the mobile view?
Best regards,
Isac
Neil Gowran
You can just wrap the css in a media query to it displays on tablet +
Greg
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?
Sonny
add this to your functions file:
wp_enqueue_style( ‘font-awesome-free’, ‘//use.fontawesome.com/releases/v5.6.1/css/all.css’ );
Met
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(){ };
Alex
Laurent Houtman, the code usage the fontawesome, search in Google and problem resolved ;)
Laurent Houtman
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 !
Kevin
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’ );
Sonny
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
Tami
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
Mette
Where should I add it in the functions.php file? I keep getting syntax error when adding it.
Neil Gowran
Use below – other code in comments had curly tick marks
Neil Gowran
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
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
try
Aude
Same problem for me… did you find how to solve it? Thanks!
Kevin
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’ );