使用FlexSlider顯示WooCommerce產品庫

Question

我創建了一個WooCommerce主題。現在我試圖用Flexslider在產品詳細信息頁面上可視化產品庫圖像。

我實現了「.js」和所需的樣式。

但我不太確定在哪個代碼中放置。我猜我必須操縱「WooCommerce /單品」-Folder中的「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/

什麼我做錯了任何想法至今？ 期待任何幫助:)

Answer 1

Woocommerce的自定義Flexslider。 *此模板需要被複制到yourtheme/woocommerce/single-product/product-thumbnails.php。用提供的代碼替換此模板的內容。 Woocommerce版本2.5.5四月2016

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/。 希望這有助於。