How To Display Price and Product Name On Rollovers from Woocommerce

  • Resolved mtucker

    (@mtucker)


    11 years, 10 months 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:

    https://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

Viewing 9 replies - 16 through 24 (of 24 total)
  • Thread Starter mtucker

    (@mtucker)

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

    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!

    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.

    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

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

    Satyendra

    (@satyendra070091)

    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’.

    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.

    oakbowlsandplates

    (@oakbowlsandplates)

    Hey Josaphi, I tried your method with only some success see
    https://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

    oakbowlsandplates

    (@oakbowlsandplates)

    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

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