Woocommerce gallery slider

In functions.php (om pijltjes toe te voegen binnen de hoofdfoto)

add_filter( 'woocommerce_single_product_carousel_options', 'wbmz_update_woo_flexslider_options' );
function wbmz_update_woo_flexslider_options( $options ) {

	$options['directionNav'] = true;

	return $options;
}

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: 'chevron_right';
	font-family: 'Material Symbols Sharp';
	margin-right: 10px;
	font-size: 30px;   
	color: $primary;
}
a.flex-prev::before {
	visibility:visible;
	content: 'chevron_left';
	font-family: 'Material Symbols Sharp';
	margin-left: 10px;
	font-size: 30px;
	color: $primary;
}
ul.flex-direction-nav li a {
	color: #ccc;
}
ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

CSS (om de thumbnails kleiner te maken en te laten scrollen)

.woocommerce-product-gallery {
  display: grid;
  gap: 10px }
  @media only screen and (max-width: 35.999em) {
	.woocommerce-product-gallery {
	  gap: 6px; 
	  } 
  }
  .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 17%;
	gap: 1rem;
	overflow-x: auto !important;
	overscroll-behavior-inline: contain; 
   }
   @media screen and (max-width: 47.999em) {
	  .woocommerce-product-gallery .flex-control-thumbs {
		grid-auto-columns: 12.5%;
		gap: 6px; 
	   } 
   }
   .woocommerce-product-gallery .flex-control-thumbs li {
	  float: none !important;
	  width: 100% !important;
	  display: grid; 
   }
   .woocommerce-product-gallery .flex-control-thumbs li img {
		inline-size: 100%;
		aspect-ratio: 1/1;
		-o-object-fit: cover;
		object-fit: cover;
		border-radius: 0px; 
	}
	.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
		  border: 2px solid #f2f2f2; 
	}
	@media screen and (max-width: 47.999em) {
		.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
			  border: 2px solid #f2f2f2; } 
		}
  .woocommerce-product-gallery .flex-control-nav {
	-ms-scroll-snap-type: inline mandatory;
		scroll-snap-type: inline mandatory;
	scroll-padding-inline: 10px; 
   }
   .woocommerce-product-gallery .flex-control-nav > * {
	  scroll-snap-align: start; 
   }

#css #flexnav #functions #gallery #slider #woocommerce