How to show the short description on hover, in your website made in WooComerce + Divi

by Sep 16, 2020Projects, Tutorials0 comments

How to show the short description on hover, in your website made in WooComerce + Divi

Hi my dear Divi maniacs, how are you?

A client asked me to create the effect you see in the image above in his e-commerce: on hover, he wanted to see the short description.
I made the website in Divi + WooCommerce.

It seemed simple at first glance, but it wasn’t.

To make everything work, I had to study. Maybe because I am not a programmer, however, I have had my difficulties. I also asked some programmers for help as well, but even they weren’t able to fix it. Maybe they weren’t really much of a programmer, I suppose :-).

Anyway, here’s my solution.

#1 Problem: how to show the short description in my shop page

Divi, and probably many other themes, don’t show the short description on the shop page, so we have to get it simply using some lines of code.

I suggest creating a child theme before doing everything.

In your child theme open the file functions.php and copy and paste this code:

function woocommerce_after_shop_loop_item_title_short_description() {
global $product;

if ( ! $product->post->post_excerpt ) return;
?>

<div class="hiddentext">
<?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?>
</div>
<?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);

Now your short description will appear in your shop page!

#2 Problem: create the hover effect

In this moment the page is ready to be manipulated with your css.

Go in Divi > Theme builder and create page for your shop. Add the Module called “Shop”.
Then go to Divi > Theme customizer > Additional CSS and copy and paste this code:

 

/* container */
.et_shop_image { position: relative; width: 100%;}

/* image */
.attachment-woocommerce_thumbnail .size-woocommerce_thumbnail{display: block;
width: 100%;
height: auto;
}
/* overly */
.hiddentext{position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 77%;
width: 100%;
opacity: 0;
transition: .5s ease;
/* background-color: rgba(73,73,73,0.68); */
background-color:rgba(0,0,0,0.82);}
.et_shop_image, .hiddentext:hover {
opacity: 1;
}

/* text */
.hiddentext >p {
/* color: red; */
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* text-align: center; */
}


And, finally, if you want also the same effects in the related products, upsell, and so on, add this code:

/* UPSELL */

.et-db #et-boc .et-l .et_pb_wc_upsells_0 li.product h2{
display:unset!important;
color:unset!important;
text-align:center!important;
}
.et-db #et-boc .et-l .et_pb_wc_upsells_0 li.product h2::after{content: "\a"!important;
white-space: pre!important;text-align:center!important;}

.et-db #et-boc .et-l .et_pb_wc_upsells_0 li.product, .price {
text-align:center!important;
display: unset!important;}

 

That’s all.

Try it and let me know if everything work!