Desplazamiento lateral en imagen principal de producto Woocommerce

Solución rápida y gratuita a un problema común en algunos temas de wordpress, 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

/*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;
}

Para añadir al css de la manera que prefieras:

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;
}

Compartir

Otros post

¿Quién eres?