Product hover image not displaying

• dev.aparys

• September 15, 2022 at 6:35 am

We are trying to figure out why the hover images on our Woocommerce shop page are not displaying anymore. We have no contact with the theme developers anymore but were able to find the following codes in the theme files:

{
    "key": "group_5e2871966914d",
    "title": "Product",
    "fields": [
        {
            "key": "field_5e2875af54486",
            "label": "Hover Image",
            "name": "hover_image",
            "type": "image",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "return_format": "array",
            "preview_size": "medium",
            "library": "all",
            "min_width": "",
            "min_height": "",
            "min_size": "",
            "max_width": "",
            "max_height": "",
            "max_size": "",
            "mime_types": ""
        }
    ],
    "location": [
        [
            {
                "param": "post_type",
                "operator": "==",
                "value": "product"
            }
        ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": "",
    "active": 1,
    "description": "",
    "modified": 1579710438
}

.post-type-archive-product main,
.archive.tax-product_cat main {
    margin-top: 80px;
}

.products {
    list-style: none;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.products .product {
    width: 33.33%;
    padding: 0 1px;
}

.product-img-wrapper {
    position: relative;
    display: flex;
}

.product-img-wrapper img {
    width: 100%;
    height: intrinsic;
}

.product-img-wrapper img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: all 0.25s ease-in-out;
}

.product-img-wrapper:hover img:last-of-type {
    opacity: 1;
    visibility: visible;
}

Any help would be much appreciated. This feature stopped working a few weeks ago when we updated to the newest version of WordPress.

• John Huebner

• September 17, 2022 at 9:52 pm

You are going to need to search the theme for where that field is used and how it is used.

You are probably looking for something that looks like this in your theme.

get_field('hover_image');

or

the_field('hover_image');

however, that is just a guess, your code may be some variation. But searching your theme code for hover_image might help.

• dev.aparys

• September 26, 2022 at 9:12 am

Hi John, thanks for your reply. As stated in the original post, we have searched the theme for where that field is used and how. Here is what we found:

acc-json folder:

"key": "field_5e2875af54486",
            "label": "Hover Image",
            "name": "hover_image",
            "type": "image",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""

css:

.product-img-wrapper img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: all 0.25s ease-in-out;
}

.product-img-wrapper:hover img:last-of-type {
    opacity: 1;
    visibility: visible;

Any ideas what could be wrong here?

• dev.aparys

• October 5, 2022 at 6:31 am

Hi, still experiencing this issue but with some more background to it, this is found in our products-page.php

{% extends "base.twig" %}
{% block main %}
{% if products %}
    <div class="shop-page-wrapper" data-bg="{{ shop_color}}">
        {# <nav class="categories">
            {% include 'partials/filters-nav.twig' %}
        </nav> #}
        <div class="products">
            {% for post in products %}
                {{ fn('timber_set_product', post) }}
               {% set hover = function('get_field', 'hover_image', post.id ) %}
                <a href="{{ post.link }}"  class="product {{ post.class ~ ' width-' ~ width_in_shop }}">
                    <div class="product-img-wrapper">
                        <img class="" src="{{ post.thumbnail.src('shop_catalog') }}"/>
                        <img class="" src="{{ hover.sizes.shop_catalog }}"/>
                    </div>
                    <div class="product-info">
                        <h3 class="woocommerce-loop-product__title">{{ post.post_title }}</h3>
                        <div>{% do action('woocommerce_after_shop_loop_item_title') %}</div>
                    </div>

• John Huebner

• October 5, 2022 at 10:24 am

I’m really not going to be able to help you with this. You need someone that knows ACF, and Twig (this is a template markup system) and a developer that is capable of digging through the code to find what is broken.

You’re not likely to find the help you are looking for on this forum.

I personally have no experience with Twig and wouldn’t know where to begin debugging this.

The only other thing that I can offer is that there is probably some JavaScript that controls how this works and it is this code that is no longer working correctly for some reason.