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

WooCommerce is the most popular plugin for ecommerce sites built on WordPress today. It’s fairly intuitive and has been around quite a while, making it a reputable staple in the WordPress community–and it’s FREE!

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.

Let’s get started!

Changing the Icon to Text on Product Hover

By default when you use WooCommerce with Divi and hover over a product you see a little “+” icon which is from the Elegant Themes icon font, like so:

It’s really easy to change this to a different icon inside the shop module, but what if you wanted text there instead? I’ll be showing you how to achieve that with today’s CSS snippets, and I’ll also include some optional code to make the product container round instead of square.

Here’s what we’ll have when finished:

Why use text instead of an icon anyway?

I can think of a couple reasons for doing this:

• To set your store apart from the out-of-the-box look: Anything you can do to distinguish your Divi/WooCommerce site from another is always a plus.
• Using a word like “view” or “buy” may be lead to a higher rate of conversions: Everyone will need to work out for themselves what is best for their site, and you can take advantage of Divi’s built-in A/B testing feature to help with this. Find out more here.

My Inspiration

I was working on a white label Divi job that was using WooCommerce to handle their store and the client had a site we were supposed to be using as a reference. That site had text on product hover. I’ve of course seen ecommerce sites that have words instead of icons on product hover before, so this was no new concept. It hadn’t ever occurred to me to mess with this particular CSS on a Divi site though, and as it turned out it ended up being pretty easy to switch the icon out for text. Very little code is needed, which is always great to keep your site as light as possible. After doing it for that client I ended up using it on my own Divi Premium Child Theme shop and I’m happy with the outcome.

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

Subscribe To Our Youtube Channel

Implementing WooCommerce Text on Hover on Your Divi Site

Step 1: The Overlay Color

First we’re going to change the color of the overlay on hover. This is extremely easy to do in Divi. In your shop module go to the Advanced Design Settings tab and select your color.

Step 2: 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%;
}

Voilà

And that’s all there is to it folks! Pretty simple right?

Nevertheless, if you do have any questions feel free to hit me up in the comments section below. And be sure to sign up for the Elegant Themes Newsletter to get all our latest articles and tutorials in your inbox!