How To Add Font Awesome Icon Overlay To WooCommerce Product Image Archive In Oxygen

The over all effect we are looking for is a semi opaque overlay with a centred Font Awesome icon on hover similar to the image below. How do we accomplish this in Oxygen builder?

Font Awesome Icon Overlay on Hover

The first thing we need to do is make the required Font Awesome icon available for use in the front end of your website, to do this follow steps 1 & 2 in the post How to Add Font Awesome Icons to Oxygen Builder Buttons then come back here to complete the process.

Step 3 Install The Code Snippets Plugin

Install and activate the plugin Code Snippets create a new snippet and paste the following code as a new snippet.

<?php
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<span class=\"et_shop_image\">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "<span class=\"et_overlay\"></span></span>";'), 12, 2);

This code wraps a span tag around the image thumbnail necessary to produce the hover effect.

Step 4 Add the following CSS code to a stylesheet in Oxygen.

Create a stylesheet in Oxygen and past the following CSS code in it.

/* product image hover overlay */
.et_shop_image:hover .et_overlay {
    z-index: 3;
    opacity: 1;
}

.et_shop_image {
  display: block;
  position: relative;
}

.et_overlay:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
  font-size: 32px;
  content: "\e803";
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
  color: #266390;
  text-shadow: 0 0;
  font-family: Fontello;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  text-transform: none;
  speak: none;
}

.et_overlay {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  opacity: 0;
  background: rgba(255,255,255,.9);
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  -o-backface-visibility: hidden;
}
/* end product image hover overlay */

WANT TO WORK WITH FIRTH WEB WORKS?

Interested to find out what we can do for you? Fill out our Project Enquiry Survey and we will get back to you with a custom solution tailored to fill your unique needs.
Project Enquiry Survey
If you want to purchase a block of time for us to work on your website, click on the "Purchase Service Time" button.
Purchase Service Time
If you want to book a video conference call using Google Meet, click the "Book a Meeting" button below.
Book a Meeting

Leave a Reply

Your email address will not be published. Required fields are marked *

Firth Web Works ©2024 All Rights Reserved | Privacy Policy
Top homephoneenvelopechevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram