CODEWITHSUNDEEP
woocommerceflexslider
DeX
DeX

Reputation: 11

Display WooCommerce Product Gallery with FlexSlider

I set up a WooCommerce Theme. Now I'm trying to visualize the Product Gallery Images on the Product Detail-Pages with Flexslider.

I implemented the ".js" and the Styles that are needed.

But Im not quite sure where to put in which Code. Im guessing I have to manipulate the "product-image.php" inside the "WooCommerce/single-product"-Folder.

This is what I have done so far inside that File:

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

I want it to look something similar to this:

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

Any Ideas of what am I doing wrong so far? Looking forward for any help :)

Upvotes: 1

Views: 8617

Answers (1)

Frithir.com
Frithir.com

Reputation: 295

Custom Flexslider for Woocommerce. * This template needs be overridden by copying it to yourtheme/woocommerce/single-product/product-thumbnails.php. replace the contents of this template with code provided. Woocommerce Version 2.5.5 April 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
}

Then follow this tutorial to get flexslider going http://flexslider.woothemes.com/. Hope this helps.

Upvotes: 3

Related Questions