WooCommerce single product: Make hover left or right scroll arrows smaller

Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1439px) { 
	.single-product .avia-svg-icon svg:first-child,.single-product .avia-svg-icon img[is-svg-img="true"] {
    height: .5em;
    width: .5em;
}
#top.single-product .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
	margin-top: 9px;
}
#top.single-product .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
	width: 30px;
	height: 30px;
  line-height: 30px;
}
}

After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike