Change thumbnail rollover behavior on product page grid « Support Forum | Kriesi.at

Support Forum » Propulsion

Change thumbnail rollover behavior on product page grid

3 posts from 2 voices

Started 1 year ago by NewNormal
Latest reply from NewNormal
This topic is closed
This topic is not a support question

Tags:

NewNormal
Member

We want to change the thumbnail rollover action on the product page grid. ( http://dev.analogcraftsman.com )

Essentially, we want to remove the the "Select Options" button altogether, and make the entire thumbnail clickable — taking the user to the individual product page.

It would be great if when the user rolled over the product thumbnail, the following happened:

• "Show Details" rollover button remains as-is, but is centered in the thumbnail. (I assume this will happen automatically when the other button is taken out.)

• We like how the entire thumbnail space activates the rollover state. We also want the entire thumbnail space to be clickable—not just he button that fades in—enabling the user to click anywhere on the thumbnail to be taken to the individual product page.

• Is it possible to fade the opacity of the thumbnail image down by 25% on the rollover state? Or, alternatively, fade in a new color layer on top of the thumbnail image at 25% opacity? We love the transition effects the current buttons have — and we'd want this to also have the smooth rollover-state-fade transition.

How might this be possible?

Thanks!

Posted 1 year ago #

Devin
Moderator

Hi NewNormal,

You can remove the Select Options button and re-center the other by adding the following to the Quick CSS in your Styles menu or to your custom.css file in the css folder.

#top .thumbnail_container .button { top:42%;}

#top div .thumbnail_container .add_to_cart_button.product_type_grouped, #top div .thumbnail_container .add_to_cart_button.product_type_variable{
display: none;
}

To modify the thumbnail layout and behavior you'll need to open up config-woocommerce>config.php then search for thumbnail_container. Replace this big block of code:

echo "<div class='thumbnail_container'>";
	echo "<div class='thumbnail_container_inner'>";
		echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );
		echo $link;
		echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";

		echo "</div>";
	echo "</div>";

with this:

echo "<div class='thumbnail_container'>";
	echo "<div class='thumbnail_container_inner'>";

	echo "<a class='' href='".get_permalink($post->ID)."'>".get_the_post_thumbnail( get_the_ID(), 'shop_catalog' )."</a>";

#		echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );
#		echo $link;
		echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";

		echo "</div>";
	echo "</div>";

As for the rollover effect, I'm not sure the best way to achieve that. I'll ask the other support crew to take a look to see if they have an idea on an easily implementable idea.

Regards,

Devin

Posted 1 year ago #