HomeЛюди и блогиRelated VideosMore From: Elegant Themes

How to Style a WooCommerce Product to Show Text Instead of an Icon on Hover in Divi

99 ratings | 10537 views
In this post we won’t be going over WooCommerce in detail but a great article about Divi + WooCommerce was just recently published on our blog and you can find it here. Sometimes styling WooCommerce can be a bit tricky, especially if your CSS game is a bit lacking or somewhat non-existent. What we’ll be doing today is changing what users see when they hover over a product. Read article here https://goo.gl/TKIQlq
Html code for embedding videos on your blog
Text Comments (19)
adjovy (7 months ago)
Hello Thanks a lot for your videos. Could please explain how I could costumize my product page? I mean how to display the price of the product or its name etc?
Eslam Samir (7 months ago)
i don't know why waste my time any one searched for Woocommerce it's already have it and installed it
Sandesh Chauhan (7 months ago)
is there any way to add cart icon and wishlist icon on hover??
Petra Seveckova (8 months ago)
wtf so where is the code??? cant even see it in the video...
Elegant Themes (8 months ago)
Here is the link https://www.elegantthemes.com/blog/divi-resources/how-to-style-a-woocommerce-product-to-show-text-instead-of-an-icon-on-hover-in-divi
Su M-M (8 months ago)
Very helpful, thank you.x
theodoros zervas (10 months ago)
First of all , Thank you for your video , but I can't find the plugin named 'Divi' anywhere . What should I do now ? thank you
farceadentus (1 year ago)
Do you have a tutorial for rollover product image changes? As opposed to text appearing on a rollover ?
Digivib Online Ad Co (1 year ago)
Dear, kindly solve my problem, i am developing a downloadable website due to heavy file i can not upload lots of files i want some direct links from from google drive but do not know how to add direct downloadable links i tried but itd not working can you please explain me? Regards and many thanks
Gerard Pye (1 year ago)
hi, thanks for the video, I have created 2 products. when I go to my store page and create a shop module my products don't automatically appear?? what am I doing wrong?
GaNdariel (1 year ago)
LOL happy i find this out exaclty in right time and right place:D
Michael Breslow (1 year ago)
Is there a method of achieving this in Divi (not for Woo)?
Alp Tekyildiz (1 year ago)
Could we get a video/blog post on how to have infinite scroll on Divi's blog grid module ?
Keerthy Vardhan (1 year ago)
Adding the CSS The following CSS code goes in your Divi Theme Options > Custom CSS box (at the bottom of general settings) or your child stylesheet. .woocommerce .et_overlay:before {    left: 0;    margin-left: 0;    content: 'view';    /*** YOUR TEXT ***/    font-family: 'Source Sans Pro', Arial !important;    /*** YOUR CHOSEN FONT FAMILY ***/    text-transform: uppercase;    font-size: 24px;    color: #fff;    /*** COLOR OF YOUR TEXT ***/    font-weight: bold;    text-align: center;    width: 100%;    padding: 5px 0;} If you would like your products to be round instead of square add the following in the same spot: .woocommerce ul.products li.product a img,.et_overlay {    border-radius: 50%;}
Tanesha Walker (1 year ago)
I seem to be missing something. I've done just what you said and it not working. I have Divi 3.0, you're not showing clearly where in the CSS advance area to place it exactly. There's more than one place to place it . Like 'Before' 'After' 'Main Element'. ect. please help!
Tanesha Walker (1 year ago)
ok that work, but there's another problem, I have more than one shop on that page. It's not working on all the shops, just one. And Gallery is also doing something weird which is also on this page, it has a circle inside the square which I don't want. So, I'm not sure if this is really going to work out.
Tanesha Walker (1 year ago)
Ok now I see it's on page settings. I will try that.
David Stephens (1 year ago)
cool trick, but custom product pages and custom post types would be great. It's much needed.
Export Galaxy (1 year ago)
Lovely. Been Waiting for this for a long time thanks so much

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.