larger image popup for variation image preview

Hi,
Is it possible to show larger thumbnail previews of variations?
The current img preview of variation attributes is 25px. Is there any way of having a larger popup of the same attribute displayed on mouse hover?
If I understood correctly, the attribute image is being loaded at original size as element background and therefore displayed at 25x25px only.
It is often difficult to see the product attribute at a such small img size (things like material type, texture etc are impossible to see properly).
Is there any easy solution to this matter? I guess it wouldn’t be hard to make it show a larger image of the attribute on hover?
You can check out a similar site (built on a different platform) which has larger img preview on attribute hover included in private info.
Thank you

Hello,

Please navigate to the Theme Settings > Product page > images and set the layout for variation thumbnails http://prntscr.com/lqmxod

Next, configure your images in Appearance > Customize > Woocommerce > Product image.

Best Regards

Sorry, but it seems you didn’t understand my question.
I don’t want to change the product thumbnails size.
I want to have a larger image popup of an attribute on mouse over.

Please check again the original message and check this link in private:
On this link you can see that there are “PS65 Chair Color” options available. The images representing those options are SMALL. Is there any way of having a larger image of option pop up on mouse over?

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global

body .swatches-select .image-swatch {
    width: 55px;
    height: 55px;
}

You can set the bigger size if you need, changing the values.

Best Regards

thank you. Is there any way of having a larger image pop up on mouse over? Something like on the link provided in the first message’s link, the one showing up for primary color selection?

Hello,

Unfortunately, there is no option for such popup in the default Woocommerce.

Best Regards

Maybe not directly, but it can be done.
I was too lazy to do it myself, that’s why I asked here, hoping that you had a ready solution.
Anyhow, here is how I did it:

Edit the /wp-content/themes/woodmart/woocommerce/single-product/add-to-cart/variable.php
The line #95 should be changed from:

echo '<div class="' . esc_attr( $class ) . '" data-value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . ' style="' . esc_attr( $style ) .'">' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</div>';

To this:

echo '<div class="' . esc_attr( $class ) . '" data-value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . ' style="' . esc_attr( $style ) .'">' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '<span class="largerpopup" style="' . esc_attr( $style ) .'"></span></div>';

Next, add this to custom CSS. You can change the desired min screen width so the popup image shows on mobile or not. If you put a larger min-width (like 500px) then it will be active only on mobile landscape orientation.
Custom css:

@media screen and (min-width: 300px) { 
body .swatches-select .image-swatch .largerpopup
{
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;

}

 body .swatches-select .image-swatch:hover .largerpopup

{
  display: inline-block;
  position:absolute;
  top:-253px;
  left:-140px;
  z-index:1000;
  width:200px;
	height:200px;
  border:1px solid black;
  margin-top:10px;
  overflow:hidden;
  padding:8px;
	background-repeat: no-repeat;
  background-size: 200px;   
  background-position: center; 
}
}

This code will make a larger image pop up custom attribute hover, but only on those attributes that are represented as images. It won’t pop up for color options, unless you set the color as an image instead of the #color-number.

The staff can check it on link in private.

Sorry, but we didn’t have a working solution for this. But we appreciate that you shared your solution on the forum. We are sure that it will be useful for other visitors.

[Author]

Posts