De standaard WooCommerce product galerij slider heeft geen navigatie pijltjes. Je kunt slechts naar de volgende foto ‘navigeren’ door op de desbetreffende ‘thumbnail‘ te klikken.
De WooCommerce product galerij slider is echter gemaakt met de ‘Flexslider‘ plugin. Deze slider heeft nog een aantal extra opties die je kunt instellen, zoals o.a. het tonen van navigatie. Om deze navigatie op te zetten, moet je volgende code toevoegen:
In je functions.php bestand:
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function wbgoe_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
add_filter( 'woocommerce_single_product_carousel_options', 'wbgoe_update_woo_flexslider_options' );
In je css file:
/* Slider navigation arrows */
ul.flex-direction-nav {
position: absolute;
top: 35%;
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: #000;
}
ul.flex-direction-nav li a:hover {
text-decoration: none;
}
WAAR DEZE CODE SNIPPET PLAATSEN?
Je kunt PHP snippets toevoegen onderaan je ‘functions.php’ file van je ‘child theme’ (voor de ‘>?’ als deze er staat). CSS code daarentegen, plaats je in je ‘style.css’ file van je ‘child theme’. Bezint eer ge begint wanneer je deze files aanpast, want deze kunnen je website ‘breken’.
