Support » Plugins » Hacks » How To Display Price and Product Name On Rollovers from Woocommerce

  • Resolved mtucker



    I am looking to create an image hover that displays information that is stored from WooCommerce (like price and product name). Here is an example of exactly what I am looking for: (When you roll over the images the price and

    Is there a bit of javascript that could retrieve that information and display when the image is hovered? I know how to change opacity in CSS, but I am lost as how to retrieve that information that I enter for each product in WooCommerce. Any help is greatly appreciated!



Viewing 15 replies - 1 through 15 (of 24 total)
  • Hy,

    I don’t know much about WooCommerce but I retrieve my product prices with post meta.

    For every product I have a post.

    When i enter a post I insert custom meta by using the custom fields.

    ex: Field name= Price
    Value = 200 Euro

    I then show the price in my post excerpt by using:

    <?php echo get_post_meta($post->ID, "price", true); ?>

    You could do that for your product name too.

    Hope it helps.

    Good luck.

    Thanks for the response, but how would I get it to display the php meta data when hovering on each image?

    I would assume I would need to change a template in Woocommerce. Anyone know of a way to write a function to display this information when hovering over each image?

    Well the html part I think would have to look like this:

    <img src="your_image_srouce" onmouseover="here you have to echo the information and change the opacity of the image with style= "></img>

    Now you have to find where in your theme the images are called.

    Sorry for the pour details but I don’t know your theme.

    I am building a child them of Manifest (it’s a simple bare bones theme).

    The problem is I want all images to have this rollover function when uploaded as a new product in WooCommerce, so there needs to be some connection to WooCommerce rather than editing html for each photo.

    Is there a simple way in CSS to display another element when hovered over an image?



    Forum Moderator

    I’m sorry but your chosen theme is not released under GPL. Non GPL products are not welcome in the WordPress community. Official WordPress policy states that all plugins and themes that are publicly released are required to adhere to

    So if you’re looking for theme-specific help, you’ll need to contact the theme’s author.

    Thanks Esmi. Sorry, didn’t realize it’s not GPL.

    I’m not looking for theme help, just help with the WooCommerce Plugin and coding for hovering over images.

    Moderator bcworkz


    Look at jQuery for special effects. While CSS comes into play, the driving force needs to be javascript based, like jQuery. You’ll need to enqueue your resulting script as with any javascript. A good part of the jQuery library is already part of the WordPress environment. The template hack amounts to specifying a function to execute based on some event, such as mouse hover. Consider passing the data needed in the effect as part of the function call included in the img tag. Going to the server to get data would be way too slow for rollover effects. Alternately, implement a lookup table as part of the script, and only passing the product id as a parameter.

    I’m not familiar with java/jQuery… can anyone help me with this?

    I feel like there has to be something incredibly simple. How would I make the product price and text show up in an image for WooCommerce?

    Even if I can’t retrieve it from WooCommerce, how could I have the alt text of the image display on hover?


    I took a look in WooCommerce.

    You could try adding the following 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>

    to woo\woocommerce\templates\single-product\product-image.php

    Hope that’s the place and the image you want to show your price and product name.

    Good luck!

    I meant that you need just to insert that onmouseover line in the <a line

    Thanks for your help!

    It’s not quite what I need. I am looking to change have it pop up just on catalog images, but I can try to mess around with the javascript (I am no too familiar and probably just need to learn it now).

    What I really want is for the store to look like this: when scrolling over images. Any ideas? I keep trying with CSS but get nowhere.

    Moderator bcworkz


    The site you link uses jquery for the effect, but that particular effect is possible with just CSS and some specially constructed images that are actually backgrounds though they appear as normal content images.

    Search for “CSS Image Sprites” for information how to use this technique.

    Thanks bcworkz, only problem is I would have to recreate images each time I upload a new product and it really would not integrate with woocommerce. The price and product name are already there below the image, but I am not sure how to have it pop up when you hover over the image rather than sit below.

    Moderator bcworkz


    Heh, that would be a real pain. Didn’t really think that one through.

    Gives me another CSS only idea though. The sprite technique uses the :hover pseudo selector to alter the origin offset of the image. Perhaps you could use it to change the positioning of the text data and the alpha of the image?

    I’ve never tried this, but seems like it’s worth a try.

    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>
    			 * 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 );

    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.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘How To Display Price and Product Name On Rollovers from Woocommerce’ is closed to new replies.