WooCommerce：从图库中删除缩略图但保留滑块导航

Question

我想从产品单页的图库（flexslider）中删除缩略图。但我想保留 previous/next 图片的箭头（以防超过 1 张图片）。

我找到了以下代码：

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

来源：

问题是，该函数删除了缩略图和箭头。有什么办法可以保留箭头吗？

而且我知道，我可以使用 display:none 或者更改模板文件。但我正在寻找具有自己功能的解决方案。

Answer 1

如果你只想保留箭头，那么你只需将此代码放入 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;
}

并将此代码放入您的主题 style.css 文件中：

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

给定的批准答案很接近，但仍然求助于 CSS 隐藏缩略图。您可以直接在用于显示箭头的同一过滤器上禁用 controlNav。

WooCommerce：从图库中删除缩略图但保留滑块导航

WooCommerce: Remove thumbnails from gallery but keep slider navigation

php

wordpress

flexslider

woocommerce

hook-woocommerce