【问题标题】:Woocommerce Product Gallery SliderWoocommerce 产品图库滑块
【发布时间】:2020-11-25 00:01:46
【问题描述】:

在单个 woocommerce 产品页面上,我正在尝试添加产品库滑块导航,并更正缩略图以正确显示。

我已经为 wc-product-gallery-slider 添加了主题支持如下

<?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' );
?>

Link to Single Product Page

【问题讨论】:

    标签: php wordpress woocommerce slider gallery


    【解决方案1】:

    您可以使用 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 版本添加此内容。

    【讨论】:

    • @Dharman - 我正在使用令人敬畏的字体 5。我现在看到了导航 - 我如何将缩略图更改为连续显示并隐藏而不是像这样的网格。类似于(http://poshreff.co.za/shop/home/21-40-liquid-matte-lipsticks.html#/26-color_lipstick-prbc28bubbly_pink)
    • 谢谢。我似乎无法在滑块上平均对齐导航箭头 - 我是否添加了错误的内容
    • 您的 WP 主题缺少一些 CSS 样式。 .flex-direction-nav ul 下的
    • 应该对齐。您可以通过添加 class li.flex-nav-prev {float: left;} li.flex-nav-next {float: right;}你的
    • 在 flex-direction-nav 下。这门课也在制造问题。这是在箭头 ul > li:before { }
    • 之前放一颗子弹
  • 谢谢。我设法移除了子弹,但似乎无法对齐箭头。请问有什么建议吗? :)
  • 试试这个 CSS。 ul.flex-direction-nav > :first-child { float: left; } ul.flex-direction-nav > :nth-child(2) { float: right;margin-top: 0em !important; }
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签