In a previous tutorial, we you introduced Divi. For those who don't know, Divi is a WordPress theme premium 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 are going to show you how to give a different animation to your products WooCommerce.

Sometimes the style of WooCommerce may be a bit inadequate, especially if your CSS style is a bit different. This tutorial, which will be a little 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:

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.

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 about the product hovering. I've of course seen other e-commerce sites that have words rather than icons on the product hovering, 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 realized that it is indeed easy to implement this. With very little code required, you are sure not to affect your blog's performance.

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.

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

[vc_row center_row = "yes"] [vc_column width = "1/2 โ€ณ] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 โ€ณ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD THE DIVI THEME [/ vcex_button] [/ width_column] [ยปvc_column] [ยป 1/2 โ€ณ] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 โ€ณ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Other Divi tutorials