Skip to Main Content

How to add text on a WooCommerce product on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

In a previous tutorial, we you introduced Divi. For those who do not know, Divi is a premium WordPress theme designed by the team Elegant themes which offers various services on WordPress and design plugins and themes.

Divi is a responsive theme and the latter is compatible with several other plugins among others we have WooCommerce. Today we will show you how to give a different animation to your WooCommerce products.

Sometimes the style of WooCommerce may be a bit inadequate, especially if your CSS style is a little different. This tutorial, which will be a bit technical (a little CSS and nothing), will allow you to fix it.

Other tutorials on Divi theme

Let's start.

Modifying an icon for text over mouse

By default, when you use WooCommerce with Divi and hover over a product you see a small "+" icon that is a font (make-icon) proposed by Divi and which reads as follows:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

It's really easy to change that for a different icon in the settings, but if you want to add a text, that's another thing? I'm going to show you how to achieve this with today's CSS snippets, and I'll also include an optional code to add to your site.

Here is what we will have once completed:

Why use text instead of an icon anyway?

I can think of some reasons that can make you do this:

To define give a unique look to your shop: Anything you can do to distinguish your site Divi / WooCommerce another is always a good thing.

Using a word like "View" or "Buy" may result in more conversion: Everyone needs to do what is best for their website, and you can take advantage of A / B testing built into Divi to help with that.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Source of inspiration

I recently browsed a site that had text on the product hovering. I have of course seen other e-commerce sites that have words rather than icons on the product hovering, so it was not new concept. I never had to do this on a Divi theme, and when I saw that, I set myself a challenge and I realized that it is indeed easy to implement this. With very little code needed, you are sure not to affect the performance of your blog.

Implementing mouse over text

Step 1: The color overlay

We will first change the color of the stationary overlay overlay. This is extremely easy to do on Divi. In your store module Go to the tab « advanced advanced design parameters And select your color.

Step 2: Adding CSS

The following CSS code in " Theme Options> Custom CSS Or on the style sheet of your child theme.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

.woocommerce .et_overlay: before {left: 0; margin-left: 0; content: 'view'; / *** Your Text Here *** / font-family: 'Pro-Free Source', Arial! / *** Choose your font *** / text-transform: uppercase; font-size: 24px; color: #fff; / *** Set the text color *** / font-weight: bold; text-align: center; width: 100%; padding: 5px 0; }

If you want your products to be rather round, you can add this optional code:

.woocommerce ul.products li.product a img, .et_overlay {border-radius: 50%; }

That's all !

Now you can visit your store and see how your changes are taken into consideration.

Other Divi tutorials

This article features 5 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
11 shares
Share6
tweet1
Save4
WhatsApp