I would like the thumbnails underneath the main image on the single product page to replace the main image when they are either clicked or on hover, I prefer hover. Right now the thumbnails just open in their own fancybox. This is a very common feature on most big ecommerce sites and it's weird that it's not an option in woocommerce. Any help will be greatly appreciated.
5 Answers
I have just achieved the effect by my own. I will post it here in case others find this thread:
jQuery(document).on('click','.thumbnails .zoom', function(){
var photo_fullsize = jQuery(this).find('img').attr('src').replace('-100x132','');
jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
return false;
});
.replace('-100x132') eliminates the size from url of the image to return the full image and not the thumbnail. Replace it with your own thumbnails sizes.
My solution is based on:
-
1'-100x132' can work for you, but who assure anyone else has the same thumbnail size?– gmazzapAug 20, 2013 at 13:53
-
You are right, I edited to be more clear. Thank's for pointing that. Aug 20, 2013 at 13:59
-
3I'm sure this works great, but something like this for the first line is simpler, I think:
jQuery('.thumbnails .zoom').click(function(){
assuming there's other jQuery calls in the page, and so it's enclosed injQuery(document).ready(function() {
etc– yitwailSep 20, 2013 at 4:14
JavaScript solution
As the original answer already work with string replace, but has to get altered for each and every use case, here's a solution using a fast Regex .test()
wrapped up in a self invoking function that uses the default method to prevent events (like following links) from happening.
This plugin will delete the first occurrence of any 2-4 digits separated by an x
and followed by another 2-4 digits. Some examples
image-name-123x456.ext
image_name123x456.ext
imageName1230x45.ext
imageName12x4567.ext
Here's the actual plugin. You'll just have to fill in a single bit: The actual selector.
To Do: The only thing that you'll have to do is providing your actual selector (instead of .class-of-the-thumbnail-image
) for the image. Best would be to (a) fill in some class and then add a filter to the thumbnail to add this class to every image that you want to target.
<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Full image size */
add_action( 'wp_footer', 'wpse83993FullImageSize' );
function wpse83993FullImageSize()
{
?>
<script type="text/javascript">
( function( $ ) {
$( '.thumbnails .zoom' ).on( 'click', function( event ) {
event.preventDefault();
var $img = $( this ).find( 'img' ),
$src = $img.attr( 'src' ),
search = /^([-]?)([\d]{2,4})((\s*)(x)(\s*))([\d]{2,4})$/;
// Regex .test() is fast, so we use it *before* we actually do something
if ( search.test( $src ) ) {
var $url = $src.replace( search, '' );
$( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
}
} );
} )( jQuery );
</script>
<?
}
One possible point where your plugin could hook in, would be to combine this with a filter on post_thumbnail_html
. This filter has some arguments: $html, $post_id, $post_thumbnail_id, $size, $attr
that you can use to alter the HTML.
Another, maybe even better would be the wp_get_attachment_image_attributes
-filter inside wp_get_attachment_image()
, which is called by get_the_post_thumbnail()
, which itself is wrapped by the_post_thumbnail()
.
apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment );
Simply add something like the following to the plugin above:
add_filter( 'wp_get_attachment_image_attributes', 'wpse83993AddDefaultThumbnailClass', 20, 2 );
function wpse83993AddDefaultThumbnailClass( $atts, $attachment )
{
$atts['class'] .= "class-of-the-thumbnail-image";
return $atts;
}
Server side solution: PHP
Much easier than anything else is to use the following filter - in case it meets your use case.
apply_filters( 'post_thumbnail_size', $size );
You can add just call the full size for every post thumbnail and you're fine. Then downsize the image via CSS.
-
3Great answer! Just a tweak: I had to use this regex:
/(-?)(\d{2,4})(x)(\d{2,4})/
to get it to match. Aug 13, 2014 at 16:59
After Wordpress implemented responsive images in Wordpress 4.4, these other scripts tend to be buggy/not working because of the added srcset
attributes.
Here is the snippet I use to fix issues with this:
$(document).on('click', '.thumbnails .zoom', function() {
var photo_fullsize = $(this).find('img').attr('src').replace('-180x180','');
var photo_srcset = $(this).find('img').attr('srcset').replace('-180x180','');
$('.woocommerce-main-image img').attr('src', photo_fullsize);
$('.woocommerce-main-image img').attr('srcset', photo_srcset);
return false;
});
I found this http://www.magictoolbox.com/magiczoomplus/ and it handles what I needed. I just set the zoom to inner so it doesn't open a zoom window and it has thumbnail hover that replaces the main image. Maybe this could help someone with a similar issue.
-
1Answers should be more than plain links. They should actually be an answer instead of a route where someone will maybe find an answer. Please help preventing link rot, edit your answer and provide the needed information that helps the OP as well as later visitors to solve their problem.– kaiserMar 16, 2014 at 1:01
I had problems using the example from the accepted answer, so re-wrote it a bit, jJust in case anyone should need a working example, not dependant on thumbnail size replacement, which also disables the default PrettyPhoto action.
$(".thumbnails").find("a.zoom").unbind('click');
$('.thumbnails .zoom').on('click', function(e){
console.log( $('.thumbnails .zoom') );
var photo_fullsize = $(this).attr('href');
$('.woocommerce-main-image img').attr('src', photo_fullsize);
$('a.woocommerce-main-image').attr('href', photo_fullsize);
return false;
});