[英]Woocommerce Product Gallery Slider
On single woocommerce product pages I am trying to add the product gallery slider navigation and also correct the thumbnails to display correctly.在单个 woocommerce 产品页面上,我正在尝试添加产品库 slider 导航,并更正缩略图以正确显示。
I have added the theme support for the wc-product-gallery-slider as follows我为 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' );
?>
You can add the slider navigation using WordPress filters.您可以使用 WordPress 过滤器添加 slider 导航。
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;
}
This will add slider navigation options on left and right.这将在左右添加 slider 导航选项。 Then we just have to add CSS.
然后我们只需要添加 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;
}
The a.flex-next::after and::before uses Font Awesome content, so make sure you add this according to the Font Awesome version you're using. a.flex-next::after 和::before 使用 Font Awesome 内容,因此请确保根据您使用的 Font Awesome 版本添加此内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.