Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 23, 2017 at 5:45 pm #765601
    wzshop

    Hi,
    I would like to know how to neatly hook / add a product hover image to my woocommerce archive pages, like so: https://goo.gl/Olzdlz
    So basically i want a ‘balloon’ to show up on top of the product image. Any ideas?

    Thanks

    March 23, 2017 at 9:09 pm #765743
    Basilis

    Hi wzshop!

    That is possible, but it would require some modifications to the theme.
    Please consider to hire a freelancer to help you out with the request.

    Thank you very much for your understanding and patience

    Cheers!
    Basilis

    March 23, 2017 at 9:52 pm #765761
    wzshop

    Thanks,
    Hmm I thought it would be possible through some CSS modification or a custom function?

    Anyone who can help me out on this?
    Thanks a million!

    March 24, 2017 at 4:26 am #765843
    Nikko

    Hi,

    Is this already resolved? I checked your site and it seems you have already done this, hovering on the product images shows up a blue balloon or circle with some text.

    Best regards,
    Nikko

    March 24, 2017 at 8:42 am #765989
    wzshop

    Haha no, this is an example of how i want it;)

    March 24, 2017 at 10:48 am #766035
    wzshop

    Hi,
    Ok figured it out. First remove the thumbnail function and create your own:

    add_action( 'after_setup_theme', 'remove_thumbnail_enfold', 0 );

function remove_thumbnail_enfold($asdf) {

    remove_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail' );
}

add_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail_custom', 10);
function avia_woocommerce_thumbnail_custom()
{
	global $product, $avia_config;
	$rating = $product->get_rating_html(); //get rating

	$id = get_the_ID();
	$size = 'shop_catalog';

	echo "<div class='thumbnail_container'>";
		echo avia_woocommerce_gallery_first_thumbnail( $id , $size);
		echo get_the_post_thumbnail( $id , $size );
		echo "<div class='middle'><div class='hover'><img src='http://domain.com/link-to-your-image.png'></div></div>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";
		if($product->product_type == 'simple') echo "<span class='cart-loading'></span>";
	echo "</div>";
}

    Then in CSS:

    .attachment-shop_catalog {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.thumbnail_container:hover .attachment-shop_catalog {
  opacity: 0.3;
}

.thumbnail_container:hover .middle {
  opacity: 1;
}
    March 25, 2017 at 6:32 am #766497
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    March 25, 2017 at 9:07 am #766558
    wzshop

    Sure, please close

    March 26, 2017 at 7:22 am #766833
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to place product hover image?’ is closed to new replies.