Moving product thumbnails to the right in wooCommerce

I’ve been having some trouble lately moving the product thumbnail images of a wooCommerce product Page to the right.
At first i tried

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_thumbnails', 50 );

This didn’t work though. It moved the images to the right but they were all huge and stacked on top of eachother and the slider and hover for the images was broken.

Then I tried making my own function that was just a remake of the thumbnail function from products-thumbnails.php but with a few changes:


remove_action( 'woocommerce_product_thumbnails', 
'woocommerce_show_product_thumbnails', 20 );

add_action( 'woocommerce_single_product_summary', 'right_thumbnails',30);

function right_thumbnails () {
global $post, $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && has_post_thumbnail() ) {
  print  '<ol class="flex-control-nav flex-control-thumbs">';
foreach ( $attachment_ids as $attachment_id ) {
    $full_size_image  = wp_get_attachment_image_src( $attachment_id, 'full' );
    $thumbnail        = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' );
    $thumbnail_post   = get_post( $attachment_id );
    $image_title      = $thumbnail_post->post_content;

    $attributes = array(
        'title'                   => $image_title,
        'data-src'                => $full_size_image[0],
        'data-large_image'        => $full_size_image[0],
        'data-large_image_width'  => $full_size_image[1],
        'data-large_image_height' => $full_size_image[2],

    $html  = '<li>';
    $html .= wp_get_attachment_image( $attachment_id, 'shop_single', false, $attributes );
    $html .= '</li>';

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $attachment_id );
 print '</ol>';



This helped a bit but the slider/hover is still broken and the thumbnails are still a bit too large.

This is running on WooCommerce 3.0

If anyone could help me out that would be awesome

Read more here: Moving product thumbnails to the right in wooCommerce

Leave a Reply

Your email address will not be published. Required fields are marked *