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
- 5 websites for restaurant use Divi theme
- How to add text on a WooCommerce product on Divi
- How to change the menu color between pages on Divi
- Features you do not know about Divi
- How to create a slider on Divi
- How to edit a user role on Divi
Let's start.
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:
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:
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.
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.
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
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module
Different text per product? you say to add it to new products? how is that? and where?
Super article, thank you for this tip. And if we want a different text by product, how?
Hello Brice,
In this case, you add a different text on the new WooCommerce product.
Great !! Thank you for this tip.
You're welcome.