Desplazamiento lateral en imagen principal de producto Woocommerce

/*Modificación flechas*/
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

Solución rápida y gratuita a un problema común, cuando no se muestran las flechas de desplazamiento en imagen de producto en woocommerce. Con este sencillo truco encontrarás la solución perfecta para mostrar esas deseadas flechas o botones de desplazamiento y para ir mostrando la galería asociada de imágenes de producto. 

Código para functions.php :
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

Código para el CSS adicional:

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: '\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: #ccc;
}

ul.flex-direction-nav li a:hover {
 text-decoration: none;
}