Skip to Main Content

How to add text on a WooCommerce product on Divi

Divi: the easiest WordPress theme to use

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]

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 inappropriate, especially if your CSS style is a bit different. This tutorial, which will be a bit technical (a little CSS and nothing else), will allow you to remedy this.

Other tutorials on Divi theme

Let's start.

How to add an image to a woocommerce product

Modifying an icon for text over mouse over

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

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]

Default woocommerce icon

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

Here is what we will have once completed:

Wordpress product modification final result

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 Divi / WooCommerce site from another is always a good thing.

Divi: The best WordPress theme of all time!

With over 701.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]

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 integrated A / B testing on Divi to help with that.

Source of inspiration

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

Example website

Implementing mouse over text

Step 1: The color overlay

We are going to change the color of the overlay on hover first. This is extremely easy to do on Divi. In your store module Go to the " advanced advanced design parameters And select your color.

Selection of divi colors

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. [Recommended]

.woocommerce .et_overlay: before {left: 0; margin-left: 0; content: 'view'; / *** Your Text Here *** / font-family: 'Source Without Pro', 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.

Back To Top