Product Gallery Thmbnails Columns

[mo_da92]

Hi guys,

The product pages currently only have 3 columns for the thumbnail images and I am trying to increase it so there are fewer rows and maybe five or six columns.

This is how it currently is: http://www.gadjetsupply.com/product/aux-audio-cable/

Any help would be much appreciated!

Thanks!

[Atelierbram]

So if you would want to do 6 columns, you will have to go into the templates and see how those .first and .last class-names on those .thumbnails a wrapper links are applied (PHP function maybe), and move the .first class from every fourth link, to every seventh link, and the .last class on every third link, to every sixth link.

then adapt the stylesheet:

.et_right_sidebar.woocommerce-page div.product div.images div.thumbnails a {
  width: 11.66666% !important;
  margin-right: 6%;
}

[mo_da92]

Thanks for the response Atelierbram, but I don’t really understand what I have to do. Is there no easier way to do it than what you mentioned above?

I tried adding the code to my css but it did not work unfortunately.

[Atelierbram]

First you have to find out where the single-product.php (or whatever name it’s called) lives. You can find out by adding this php-snippet somewhere in footer.php

<footer id="main-footer">
  <div class="container">
    <?php if ( current_user_can( 'administrator' ) ) { global $wpdb; echo "<pre>"; print_r( $wpdb->queries ); echo "</pre>"; } ?> 
<!-- stuff -->
  </div>
</footer>

This will echo out a huge blob of info about the templates being used in the page (at the bottom of the page after refreshing the page).

When you think you see something that looks like single-products or something, then you can go start looking for the .thumbnails, and see if you can tweak the PHP code like I described above.

Is there no easier way to do it than what you mentioned above?

Who told you web-development was easy?

I tried adding the code to my css but it did not work unfortunately.

It can’t work without you modifying the HTML/PHP, doing it like this, but it’s the cleanest way. There is one other way to achieve this with only CSS, but that one is more “hacky”; you really should try this first.

[mo_da92]

Thanks for the help Atelierbram, but I will not attempt something this complex in case something goes wrong. I will leave it as 3 columns for now :)

[Atelierbram]

If you don’t mind me asking; what is your workflow with editing the CSS on this website? Do you work locally, or remotely on the server?

[Author]

Posts