WooCommerce: Remove thumbnails from gallery but keep slider navigation

Question

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.

Answer 1

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