WooCommerce: Usuń miniatury z galerii, ale zachowaj nawigację za pomocą suwaka

Question

Chcę usunąć miniatury z galerii (flexslider) pojedynczej strony produktu. Ale chcę zachować strzałkę dla poprzednich / następnych obrazów (w przypadku, gdy jest więcej niż 1 obraz).

Znalazłem następujący kod:

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

Źródło: https://stackoverflow.com/a/56238267/1788961

Problem w tym, że funkcja usuwa miniaturkę i strzałki. Czy jest jakiś sposób na zatrzymanie strzał?

I wiem, że mógłbym użyć display:none lub może zmienić plik szablonu. Ale szukam rozwiązania z własną funkcją.

php wordpress woocommerce hook-woocommerce flexslider

1

Cray 19 grudzień 2019, 20:12

Answer 1

Jeśli chcesz zachować tylko strzałkę, po prostu umieść ten kod w 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;
}

A ten kod umieścił go w pliku motywu 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;
}

2

h3t1 10 lipiec 2020, 06:13

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

Podana zatwierdzona odpowiedź jest bliska, ale nadal ucieka się do CSS, aby ukryć miniatury. ControlNav można wyłączyć bezpośrednio w tym samym filtrze, którego używasz do wyświetlania strzałek.

1

igarciaoliver 3 listopad 2021, 20:55

WooCommerce: Usuń miniatury z galerii, ale zachowaj nawigację za pomocą suwaka

2 odpowiedzi

Podobne pytania

Powiązane pytania

Nowe pytania

php