WooCommerce: Remove thumbnails from gallery but keep slider navigation - php

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

Answer 2

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.