Ajouter des flèches de navigation sur les images produits

Ce code va vous permettre d’ajouter des flèches sur les images des produits WooCommerce afin d’avoir un effet carrousel

				
					// Ajouter des fleches de navigation a l'image produit
function josselyn_update_woo_flexslider_options( $options ) {
    $options['directionNav'] = true;
    return $options;
}
add_filter( 'woocommerce_single_product_carousel_options', 'josselyn_update_woo_flexslider_options' );
				
			

Ajoutez ensuite ce code dans le style.css

				
					/* Style des flèches de navigation sur image produit */
ul.flex-direction-nav {
    position: absolute !important;
    top: 40% !important;
    z-index: 99999 !important;
    width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0px !important;
    list-style: none !important;
}

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'!important;
	font-family: 'Font Awesome 5 Free'!important;
	margin-right: 35px !important;
	font-size: 20px !important;   
	font-weight: bold !important;
}
a.flex-prev::before {
    visibility:visible !important;
    content: '\f053' !important;
	font-family: 'Font Awesome 5 Free' !important;   
	margin-left: 10px !important;
	font-size: 20px !important;
	font-weight: bold !important;
}
ul.flex-direction-nav li a {
	color: #000;
}
ul.flex-direction-nav li a:hover {
	text-decoration: none;
}
				
			
Envie de laisser un commentaire ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Tu veux voir d'autres bouts de code ?
ON DISCUTE ?

Une question sur WordPress ?
Un projet web à faire sous traiter par un freelance ?
Je suis votre homme !