WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How To Display Price and Product Name On Rollovers from Woocommerce (25 posts)

  1. mtucker
    Member
    Posted 1 year ago #

    Hello,

    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:

    http://shop.herriottgrace.com/ (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!

    Cheers,

    Matt

  2. cretzzzu3000
    Member
    Posted 1 year ago #

    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.

  3. mtucker
    Member
    Posted 1 year ago #

    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?

  4. cretzzzu3000
    Member
    Posted 1 year ago #

    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.

  5. mtucker
    Member
    Posted 1 year ago #

    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?

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    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 http://wordpress.org/about/gpl/

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

  7. mtucker
    Member
    Posted 1 year ago #

    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.

  8. bcworkz
    Member
    Posted 1 year ago #

    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.

  9. mtucker
    Member
    Posted 1 year ago #

    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?

  10. cretzzzu3000
    Member
    Posted 1 year ago #

    Ok..

    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!

  11. cretzzzu3000
    Member
    Posted 1 year ago #

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

  12. mtucker
    Member
    Posted 1 year ago #

    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: http://shop.herriottgrace.com/ when scrolling over images. Any ideas? I keep trying with CSS but get nowhere.

  13. bcworkz
    Member
    Posted 1 year ago #

    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.

  14. mtucker
    Member
    Posted 1 year ago #

    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.

  15. bcworkz
    Member
    Posted 1 year ago #

    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.

  16. josaphi
    Member
    Posted 1 year ago #

    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.

  17. mtucker
    Member
    Posted 1 year ago #

    Wow, Josaphi. Thanks for your help! I think this would do it!

  18. josaphi
    Member
    Posted 1 year ago #

    No problemo...I spent 10 hours yesterday searching and searching and had to piece people's solutions together to create my own. Such a stressful process...but good luck!

  19. junkfoodjunkie
    Member
    Posted 1 year ago #

    Any idea on how to implement this after the woocommerce 2.0 update? The Markup for the /templates/content-product.php is different now and so is the css.

    This is a very nice solution and exactly what I am going for on a new site.

  20. mmya
    Member
    Posted 1 year ago #

    Hello,

    josaphi could you please give the whole final code? I'm trying to use the instructions you gave but it doesn't works. I suppose I'm writting the code in a wrong way.

    Thanks

  21. HLBOriginals
    Member
    Posted 1 year ago #

    Did any of this actually work? im looking to do this too.

  22. Satyendra
    Member
    Posted 1 year ago #

    Hello there,
    I too want to place the prices in "price-tags" of products on homepage, which are displayed using the posts. But, I can't find any field for Post, that can put the value in these 'price-tags'.

  23. julianens
    Member
    Posted 9 months ago #

    hello, i'm trying to do the same thing but instead of using opacity, i want to change the product image on hover. is that possible?

    any help is appreciated. thank you.

  24. oakbowlsandplates
    Member
    Posted 8 months ago #

    Hey Josaphi, I tried your method with only some success see
    http://www.dannymay.co.uk/shop
    i could only get the images to fade on role over, the title and price still remain separate. could you be more specific about how you entered the CSS. Did you just paste all of the code at the bottom of /templates/content-product.php. or insert into anywhere particular?
    x

  25. oakbowlsandplates
    Member
    Posted 8 months ago #

    Ah ha! I think I got it eventually, using your code. It seemed to work by just dropping the CSS into the end of the child stylesheet. I had to 'enable' woocommerce CSS as I am unable to work out how to bypass this through adding woocommerce.css to the stylesheet, i.e making it update-proof

Topic Closed

This topic has been closed to new replies.

About this Topic