使用 FlexSlider 显示 WooCommerce 产品库答案

【问题标题】：Display WooCommerce Product Gallery with FlexSlider使用 FlexSlider 显示 WooCommerce 产品库
【发布时间】：2016-03-31 10:12:13
【问题描述】：

我设置了一个 WooCommerce 主题。现在我正在尝试使用 Flexslider 在产品详细信息页面上可视化产品库图像。

我实现了“.js”和所需的样式。

但我不太确定将哪个代码放在哪里。我猜我必须操作“WooCommerce/single-product”文件夹中的“product-image.php”。

这是我迄今为止在该文件中所做的：

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '
                <div class="flexslider">
                    <ul class="slides">
                        <li>
                            <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>
                        </li>
                    </ul>
                </div>', $image_link, $image_caption, $image ), $post->ID );

我希望它看起来像这样：

http://www.twothirds.com/product/aruba_sand/

到目前为止我做错了什么的任何想法？期待任何帮助:)

【问题讨论】：

标签： woocommerce flexslider

【解决方案1】：

Woocommerce 的自定义 Flexslider。 * 此模板需要通过将其复制到 yourtheme/woocommerce/single-product/product-thumbnails.php 来覆盖。用提供的代码替换此模板的内容。 Woocommerce 版本 2.5.5 2016 年 4 月。

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $post, $product, $woocommerce;

$attachment_ids = $product->get_gallery_attachment_ids();

if ( $attachment_ids ) {
    $loop       = 0;
    $columns    = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
    ?>
    <div id="shop-slider" class="flexslider">
        <ul class="slides"><?php

            foreach ( $attachment_ids as $attachment_id ) {
                $image_link = wp_get_attachment_url( $attachment_id );
                if ( ! $image_link )
                    continue;
                $image_title = esc_attr( get_the_title( $attachment_id ) );
                $image_caption = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );

                $image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_single' ), 0, $attr = array(
                    'title' => $image_title,
                    'alt'   => $image_title
                    ) );

                echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<li>%s</li>', $image ), $attachment_id, $post->ID, $image_class );

                $loop++;
            }

        ?></ul>
    </div>
    <?php
}

然后按照本教程让 flexslider 运行 http://flexslider.woothemes.com/。希望这会有所帮助。

【讨论】：