Support

Account

Home Forums Front-end Issues Product hover image not displaying

Solving

Product hover image not displaying

  • 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.

  • 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.

  • 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?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.