CODEWITHSUNDEEP
phpwordpresswoocommercegallery
user2703913
user2703913

Reputation: 121

Woocommerce product thumbnail position

Can anyone please tell me how to move the product thumbnails above the main image rather than below on the product page. I have seen a couple of solutions to move them to the side but none to just above the main image which I thought would be easier.

I have tried a couple of things myself but whatever I did seemed to effect the gallery navigation. In the example below I moved the product thumbnails action above the main image.

Any solutions would be greatly appreciated.

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?> test" style="opacity: 0; transition: opacity .25s ease-in-out;">
<?php do_action( 'woocommerce_product_thumbnails' );
<figure class="woocommerce-product-gallery__wrapper">
    if ( has_post_thumbnail() ) {
        $html  = wc_get_gallery_image_html( $post_thumbnail_id, true );
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
    ?>
</figure>

Upvotes: 1

Views: 4536

Answers (1)

Andrew Schultz
Andrew Schultz

Reputation: 4243

So the only way I can see that this is possible is by editing the template file product-image.php by copying it into your child theme directory \theme-child\woocommerce\single-product\product-image.php

You can set the lightbox control container to a custom div you can create in the product-image.php file. Add a custom div as shown below with an id flex_slider_top_thumbs.

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <div id="flex_slider_top_thumbs"></div>
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( has_post_thumbnail() ) {
            $html  = wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>
</div>

Then you need to set the new custom control container div via the following code to set thew new carousel controls above the image.

add_filter('woocommerce_single_product_carousel_options', 'add_woocommerce_single_product_carousel_options');

function add_woocommerce_single_product_carousel_options($options) {
    $options['controlsContainer'] = '#flex_slider_top_thumbs';
    return $options;
}

The only thing I haven't worked out how to do yet is to move the lightbox magnify glass trigger out of the thumbnails container. Its position is dictated by the file single-product.js but I am not sure I can reposition it with any of the options available. Might need to use some custom jQuery to move the link so it's nested within the div with class flex-viewport. The code below is from the single-product.js file and shows you how they output the PhotoSwipe lightbox link trigger.

ProductGallery.prototype.initPhotoswipe = function() {
        if ( this.zoom_enabled && this.$images.length > 0 ) {
            this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">ðŸ”</a>' );
            this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe );
        }
        this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
    };

Upvotes: 1

Related Questions