Слайдер галереи продуктов Woocommerce - PullRequest
Новая
       81

Слайдер галереи продуктов Woocommerce

0 голосов
/ 04 августа 2020

На отдельных страницах продуктов woocommerce я пытаюсь добавить навигацию ползунка галереи продуктов, а также исправить эскизы для правильного отображения.

Я добавил поддержку темы для w c -product-gallery- ползунок следующим образом 

<?php

add_action( 'after_setup_theme', 'cws_child_theme_setup' );
function cws_child_theme_setup() {
    load_child_theme_textdomain( 'orgafit', get_stylesheet_directory() . '/languages' );
}
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
?>

Ссылка на страницу отдельного продукта

1 Ответ

0 голосов
/ 05 августа 2020

Вы можете добавить навигацию по слайдеру с помощью фильтров WordPress. 

add_filter( 'woocommerce_single_product_carousel_options', 'cuswoo_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function cuswoo_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

Это добавит параметры навигации по слайдеру слева и справа. Затем нам просто нужно добавить CSS. 

 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: #ccc;
}
ul.flex-direction-nav li a:hover {
    text-decoration: none;
}

a.flex-next :: after и :: before использует контент Font Awesome, поэтому убедитесь, что вы добавили его в соответствии с версией Font Awesome, которую вы используете.

...