Woocommerce - add navigation arrows to the product image gallery carousel slider

By default, in Woocommerce product details page, the image slider/carousel doesn't have any arrows to move left/right through the images. You can only select them from the thumbnails below, which is sometimes not enough and a bit annoying, so I researched if there's an easy way to do it.

It turns out there is. Well, it still take s a couple of steps, but here they are in the shortest possible version:

1. Add a hook that tells the Flexslider component (which Woo uses for the image carousel) to display the navigation. You can add this in your child theme (if you're using one) or I highly recommend using this plugin - Theme customisations to add the PHP custom code:

add_filter( 'woocommerce_single_product_carousel_options', 'wcr_update_woo_flexslider_options' );

/** Filer WooCommerce Flexslider options – Add Navigation Arrows */ 
function wcr_update_woo_flexslider_options( $options ) {
  $options['directionNav'] = true;
  return $options;
}


2. Then you need to install the FontAwesome plugin, which manages and displays the actual icons (just search it in your 'Add plugin' admin area).

3. Then just paste this CSS that will style everything and make it look OK. This goes either in the child theme styles or in your Theme customisation plugin styles:

/* Product image carousel Nav arrows. */ 
ul.flex-direction-nav{ position: absolute; top: 30%; z-index: 999; 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-prev, a.flex-next {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: black; text-decoration: none; }