Mike Jolley on "[Plugin: WooCommerce] Product Thumbnails - Position Left and Display Vertically"

Hello,

I'm trying to move the product thumbnails to the left of the main product image and then display them in a vertical arrangement.

Is there any way to do this?

I've tried implementing the css from the following thread:
https://wordpress.org/support/topic/move-singe-product-thumbnails-to-be-left-of-the-primary-image?replies=6

But unfortunately it did not work; any help would be greatly appreciated.

Thanks,
Max

https://wordpress.org/plugins/woocommerce/

Can all be done with CSS. How far did you get with this? Where is your page?

Hello,

I've gotten no where really, I've tried a number of float options using 'Inspect Element' on Google Chrome. But I have not been able to move the images properly.

I've implemented the code from the previous post I attached:
div.product div.images>img{
float:right !Important;
width:75% !Important;
}
div.product div.images div.thumbnails {
float:left !Important;
width:30% !Important;
}
div.product div.images div.thumbnails a{
width:45% !Important;
}

This had no effect on the site at all, which I found strange.
You can see the test product page here:
http://bowapparel.com/shop/bow-singlet-bow-blackwhite/

I figured I'd have to edit the php code, and move the thumbnails ahead of the main product image to get it to work, so very interested to see how its possible with css..

Thanks for your help, really appreciate it!

In the most basic form,

.woocommerce ul.products li.product { float: none; width: auto; margin: 0;
overflow:hidden;
}
.woocommerce ul.products li.product img {
float:left;
width:100%;
}
.woocommerce ul.products li.product h3 {
clear:none;
}

https://dl.dropboxusercontent.com/s/nq469l28zqwol7e/2016-05-25%20at%2016.19.png?dl=0

Hey Mike,

Thanks for the help, I'm not sure if this works, as I just tried to implement it and nothing changed.. I'll read into it a bit more to see if I've got all the tags right etc..

However, the picture you attached is not representative of what I'm actually after..

This is what I'm after.

Ah I thought you were talking about the product lists.

I think what you're after may require a small template modification as well as CSS.
Read docs.woothemes.com/document/template-structure/

I thought as much; unfortunately I'm not so sure what I need to change or how. New to php and wordpress so trying to understand how they work together.

I've found the single-product.php, content-single-product.php and the files within the Single Product folders, but not sure all of these files interact.

Presuming I need to find out where the thumbnails and product image are being input, and maybe make it so that the thumbnails are before the main product image...?

I'll keep looking..

This one https://github.com/woothemes/woocommerce/blob/master/templates/single-product/product-image.php

Move the action for thumbnails above the image, then you can float left them of the main image.

Hmm, that's strange.. My product-image.php is completely different to the one in their templates.

Presuming this difference is due to the theme customisations applied??

For example, I do not have this piece of code in my file:
do_action( 'woocommerce_product_thumbnails' );

This is the 2.5.5 version https://github.com/woothemes/woocommerce/blob/2.5.5/templates/single-product/product-image.php

Maybe the theme already moved it?