How can I make product image clickable?

Home Support eCommerce Gem How can I make product image clickable?

This topic contains 3 replies, has 3 voices, and was last updated by  ProDesign Support 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #15360

    Hi,
    I couldn’t make product images clickable. When I enable view details the pages look like a mobile page on desktop.
    Thank you in advance

    #15781

    Hell There,

    Hope you are doing good!

    We have sent you the addtional code on your email.

    Have a great day ahead!

    Thanks and Regards,
    Team ProDesigns

    #15913

    Ben Camilleri
    Participant

    Could you send me this additional code as well please? I am using eCommerce Gem Plus.

    Kind Regards,
    Ben

    #15971

    Hello Ben,

    Hope you are doing good!

    Please create a child theme and put below code in function file of child theme

    function myfunc_product_img_link_start(){
    	global $product;
    	$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
    	echo '<a class="custom_item_img_link" href="'.esc_url( $link ).'">';
    }
    add_action('woocommerce_before_shop_loop_item_title', 'myfunc_product_img_link_start', 5);
    
    function myfunc_product_img_link_close(){
    	echo '</a>';
    }
    
    add_action('woocommerce_before_shop_loop_item_title', 'myfunc_product_img_link_close', 15);

    and Custome CSS by following below mentioned steps

    1) Please log in to the admin area
    2) Go to “Appearance >> Customize >> Additional CSS”.
    3) Paste the below code in “Additional CSS” and save it afterward:

    li.product .product-thumb-wrap::before {
        display: none !important;
    }
    .custom_item_img_link::before{
        content: " ";
    	position: absolute;
    	height: 100%;
    	width: 100%;
    	background: #fa6161;
        -webkit-transition: 0.4s ease-in-out;
        -moz-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out;
        opacity: 0;
    }
    li.product:hover .custom_item_img_link::before {
        opacity: 0.8;
    }

    Hope this helps!

    Have a great day ahead!

    Thanks and Regards,
    Team ProDesigns

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

You must be logged in to reply to this topic.