Hover images not working

  • Resolved samovaari

    (@samovaari)


    2 years, 6 months ago

    We are trying to figure out why the hover images in our Woocommerce shop page are not displaying anymore. We have been selecting the hover image in the “Product – Hover image” field previously without any issues.
    Screenshots:
    https://snipboard.io/uhWyl4.jpg
    https://snipboard.io/pDqHAf.jpg

    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. The hover images stopped working about a month ago when we updated to the newest version of WordPress.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter samovaari

    (@samovaari)

    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) }}
               <strong> {% set hover = function('get_field', 'hover_image', post.id ) %}</strong>
                <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>
    Plugin Support ACF Support

    (@acfsupport)

    Hi there!

    ACF Support Team here. This forum is generally used by ACF users to help each other out.

    However, we would love to continue investigating and troubleshooting this issue, please can you create a ticket using our ?support form and we can look into it further.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hover images not working’ is closed to new replies.