Question

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

我实施了＆＃34; .js＆＃34;以及所需的样式。

但我不太确定在哪个代码中放入。我猜我必须操纵＆＃34; product-image.php＆＃34;在＆＃34; WooCommerce /单品＆＃34; -Folder。

内

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

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/

到目前为止，我有什么想法？期待任何帮助：）

Answer 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/。希望这会有所帮助。

使用FlexSlider显示WooCommerce产品库

1 个答案: