Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #16779

    Hi there, I used the instructions in the thread below to create a clickable link for the whole of the product image. (Purchase code hidden if logged out) -card-and-show-details.

    it worked a treat!

    I had previously used CSS to hide the “add to cart” hover. But I had kept the “see details” hover.

    However amending woo commerce config.php as per the previous support thread to make the whole thumbnail of the product clickable, also removed the “see details” hover.

    Can’t seem to figure out why…help appreciated!

    Also, can you just help me with best way of making changes to this template file. Obviously just amending the template is not a good idea as it makes future updates more difficult. Is the best way to make a copy of woocomerce-config>config.php in a child theme? If so, what is the correct way to name the file? There are a number of config.php files in the theme and I wanted to make sure I target the correct one.

    Many thanks




    A Child Theme starts out as a directory with a CSS file referencing the parent theme. When you have something you want to modify, you create empty directories matching the parent theme. Once you get to the same directory level in your child as your parent, you drop a copy of the file you want to edit from the parent to the child, while leaving the one in the parent theme intact.

    What basically happens for *every* file in the child theme is WordPress first looks in the Child Theme folders, when it doesn’t find the file there , it reads it from the parent folder. There is no need to copy over the whole parent site into the child, just the files you want to edit.

    Example: move parent-theme/dir1/dir2/dir3/some-file.some-extension to child-theme/dir1/dir2/dir3/some-file.some-extension

    Is the best way to make a copy of woocomerce-config>config.php in a child theme? Yes.

    If so, what is the correct way to name the file? woocomerce-config>config.php

    There are hundreds of tutorials on Google, and youtube videos outlining the process in great detail by people who explain everything much better than I can, since the process is the same no matter what theme is used.

    If you want to use a PHP fix instead of CSS, I recommend for you to join the Stackexchange community , where hundreds of questions get answered daily by millions of programmers. In my opinion this is outside the scope of the support team.




    Many thanks for all your advice on creating a child theme Nick.

    Are you also able to help with my other question – how to re-enable the “see details” hover which for some reason has got lost after I made the amendments suggested in a previous thread to woo commerce config.php? That thread seemed to suggest that the “see details” hover would not be affected by the change.

    Many thanks




    I’d revert the changes and add following code to css/custom.css to hide the add to cart button only:

    #top div .thumbnail_container .add_to_cart_button{
    display: none;




    Hi Peter, that’s actually where I started out, but then wanted to add a new function – to create a hover effect over the whole image as per the thread below with some coding suggested by Devin to achieve this: (Purchase code hidden if logged out) -card-and-show-details.

    It worked a treat, BUT it also removed the “see details” hover. Ideally I’d like both things! The see details hover as well as the whole image clickable. Just wondered if that was possible?

    Many thanks,



    Hi Susan,

    In the config file where you made the changes, look for:

    #echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";

    Try remove the # from it so it is no longer commented out. This should then re-show the button once again.




    hey – it works! Thanks. Susan


    Great :)

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

The topic ‘creating clickable link on whole product thumbnail with "see details" hover’ is closed to new replies.