Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce: Remove thumbnails from gallery but keep slider navigation

I want to remove the thumbnails from the gallery (flexslider) of the product single page.
But I want to keep the arrow for the previous/next images (in case there is more than 1 image).

I found the following code:

add_action( 'woocommerce_product_thumbnails', 'enable_gallery_for_multiple_thumbnails_only', 5 );
function enable_gallery_for_multiple_thumbnails_only() {
    global $product;

    if( ! is_a($product, 'WC_Product') ) {
        $product = wc_get_product( get_the_id() );
    }

    if( empty( $product->get_gallery_image_ids() ) ) {
        remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
    }
}

Source: https://stackoverflow.com/a/56238267/1788961

The problem is, that the function removes the thumbnail and the arrows.
Is there any way to keep the arrows?

And I know, that I could use display:none or maybe change the template file.
But I’m searching a solution with an own function.

Tags:

2

Answers


  1. 0

    if you want keep only arrow then you just put this code in functions.php:

    // for arrow on single product page slide
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;
}

    And this code put it in your theme style.css file:

    /*add for arrow on main image slide*/
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: black;
}
ul.flex-direction-nav li a:hover {
    text-decoration: none;
}
.flex-control-nav .flex-control-thumbs{
    display: none;
}
    Login or Signup to reply.
  2. 0 
    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;
    $options['controlNav'] = false;

    return $options;
}

    The given approved answer is close but still resorts to CSS to hide the thumbnails.
    You can disable controlNav directly on the same filter you use to show the arrows.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search