Home Forums Themes Support How to add Product link for Image in WooCommerce

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #4154

    Hi all customer,

    In this tutorial we’ll help you add product link for image in WooCommerce.

    However if you insert link for Product Thumbnail, on mobile when you hover (is click) it will go to single product page. So you can choose work flow on your site.

    Go to Appearance -> Customize -> Additional CSS and add this code:

    li.product .product-inner .product-thumbnail:before, li.type-product .product-inner .product-thumbnail:before {
    display: none;
    }
    
    li.product .product-inner .product-thumbnail .woocommerce-loop-product__link:before, li.type-product .product-inner .product-thumbnail .woocommerce-loop-product__link:before {
    content: '';
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        z-index: 1;
        -webkit-transition: all 0.35s;
        -o-transition: all 0.35s;
        transition: all 0.35s;
        background-color: rgba(63, 63, 63, 0.5);
    }
    
    li.product:hover .product-inner .product-thumbnail .woocommerce-loop-product__link:before, li.type-product:hover .product-inner .product-thumbnail .woocommerce-loop-product__link:before {
    opacity: 1;
    }

    Hope this help you all!

    PS: If this code doesn’t work on the theme you are using please comment below, We’ll check and have solution for you!

     

    *****

    Best regards,

    HaruTheme

     

    • This topic was modified 2 years, 10 months ago by admin.
    • This topic was modified 2 years, 10 months ago by admin.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.