Add text to woocommerce product on Divi: Divi is a responsive theme and it is compatible with several other plugins among others we have WooCommerce. Today we are going to show you how to make your WooCommerce products look different.
Sometimes the styling of WooCommerce can be a bit off, especially if your CSS styling is a bit different. This tutorial, which will be a bit technical (a little CSS and just that ), will allow you to fix it.
Add text to woocommerce product on Divi: Modifying an icon for a text on mouseover
By default, when you use WooCommerce with Divi and hover over a product you see a small “+” icon which is a font -icon offered by Divi and which looks like this:
It’s really easy to change that to a different icon in settings, but if you want to add some text, is it another thing? I’ll show you how to achieve this with today’s CSS snippets, and I’ll also include some optional code to add to your site.
Why use text instead of an icon anyway?
I can think of a few reasons you might want to do this:
To define giving a unique look to your store: Anything you can do to distinguish your Divi / WooCommerce site from another is always a good thing.
Using a word like ‘View’ or ‘Buy’ can lead to more conversion: Everyone should do what’s best for their website, and you can take advantage of A / B testing built into Divi to help that.
Source of inspiration
I recently browsed a site that had text about the hover product. I’ve of course seen it from other e-commerce 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 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 a text on mouseover
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 tab ” advanced design advanced settings ” and select your color.
Step 2: Adding CSS
The following CSS code in ” Theme options> Custom CSS ” or on the stylesheet of your child theme.
If you want your products to be rather round, you can add this optional code:
Now you can visit your store and see how your changes are taken into account.
For website maintenance service contact us.