Hi mtucker, it seems as though you and I are/were looking to do the same thing with this hover effect. After reading this post I kinda found a way to do it. I’m not super great at coding/java/etc, so I’m not sure if this is the cleanest way to do it…but I got it to work. I hope I explain this correctly to you, also note that I took mine a step forward to include the short description excerpt:
1. In cretzzzu3000 post above he gave a line of code:
<a itemprop="image" <em>onmouseover="<?php the_title(); ?><?php echo $product->get_price_html(); ?>"</em> href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>"><?php echo get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) ?></a>
He stated to put this in a file called: single-product\product-image.php. That is not the file for what we want. Instead open file: /templates/content-product.php.
2. Now what I realized is that the line of code was a bit much and we only need a part of that code: <?php the_title(); ?><?php echo $product->get_price_html(); ?>
3. So I created new div tags (note the excerpt div) and took that and placed it in the file in the place where I felt the image was being called, which is <?php do_action( 'woocommerce_before_shop_loop_item' ); ?> and I added :
<div id="product_title">
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?><?php the_title(); ?><br><?php echo $product->get_price_html(); ?
><div id="excerpt"><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></div></div>
4. I removed/deleted the original title and price tag that shows up at the bottom of the image:
<h2><?php the_title(); ?></h2>
<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>
5. Now for the CSS I had to play around a bit in firebug. For the actual product image hover state I added an opacity of 1.5:
ul.products li.product a:hover img {
opacity: 0.15;
}
6. For the product title div:
#product_title {
color: white;
float: right;
font: italic 18px ‘PT Sans’,’Helvetica Neue’,’Verdana’,sans-serif;
margin-bottom: 100px;
margin-top: 100px;
opacity: 1;
padding-left: 15px;
text-align: center;
text-transform: uppercase;
width: 300px;
}
7. For the product image I added a position absolute:
ul.products li.product a img {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
display: block;
height: auto;
margin: 0 10px 8px;
position: absolute;
transition: all 0.2s ease-in-out 0s;
width: 95%;
}
8. I’m assuming you already figured out how to remove the add to cart buttons but if not, I added this line of code to my woocommerce-functions.php file: function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);`
I hope this helps you and gets you the results it got for me. Please let me know if I need to clarify my steps a bit further.
