Hi
Thanks for your help.
It works OK on desktop but on a mobile the button is over the top of the logo, is there a way to make the button appear underneath the logo on mobiles?
Regards
Kenny

Topic can be closed. Solved the problem by adding icon

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;
}

Thanks for the info. I have written them, because it ruins my preview experience entirely. When I view changes in my page there is now a big blue banner at the top of the page I cannot get rid of, unless I log out of the session and view the page without being logged in. I will keep complaining to them, because this is unacceptable.

Now it scrolls. But it scrolls all the way through the page and doesn’t stop at the bottom of the menu list as supposed to.

sorry i meant move to top, not remove ;)

I ended up finding an easier solution than editing the JS:

.avia-fullscreen-slider .avia-slideshow>ul>li {
    height: calc(100% - 250px) !important;
    margin-top: 250px !important;
}