Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #18780


    is there a way I could change the “Select option” / “Show details” button which appears when I hover over a product image?

    What I’m looking for:

    1) replace the “Select options” button by a button showing a magnifying glass

    -> on clicking it should open the image in a lightbox (same effect as exists on the product detail page)

    2) keep the existing “Show details” button

    -> on clicking it should open the product detail page with the product variations (as it currently does)

    Upon inspection of the “Select options” button I learnt that this is the

    “class=”add_to_cart_button button product_type_variable”.

    I’m stuck here.

    – how can I change the button from showing “Select options” to show the icon “magnifying glass”?

    – how can I assign the link to open the image in a lightbox?

    Thanks for helping



    In the file “Woocommerce-config/config.php” I changed the background image of the button to “images/skin-dark/magnify.png” – the original icon disappeared, but the magnifying glass did not show …



    From a usability perspective , your visitors will see a button ‘Show Details’ and an icon which is a symbol for .. show details/. That’s just a person opinion that it will just confuse people, and really serves no purpose or gives value to visitors.

    The customization you are describing is of course possible but I think its a bit time consuming Try to replace it by following the prettyphoto instructions

    However the magnifying glass w customization ill take look at now :)







    actually I would rather say that visitors are confused when they see the existing theme solution:

    This is what visitors currently see:

    they see 2 buttons with seemingly 2 different options – however: whether they click on “Select options” or “See details” they are presented with the very same page. Myself I was confused when I saw it for the first time, thinking that this was a bug.

    (Why would you see different text and different icons, if in fact this is all the same?)

    I think my suggestion does make much more sense:

    visitors would not only see but also get 2 options:

    – see a larger image (lightbox) should the magnifying glass – create confusion, it could be named e.g. “Expand image” instead


    – see details (i.e. available variations) of the product (the button could be renamed e.g. “Available options”)

    The underlying idea is the same as in real life: in a shop you first either ask for details/variations or take the product off the shelf and have a closer look at it before considering a purchase..



    As the button with the magnifying glass opening the image in the prettyPhoto lightbox already exists on the product detail page,

    I assumed that I could just copy the underlying code.

    Unfortunately I could not figure out

    – from which file I could copy the code and

    – into which file I need to insert it (and in which position) …



    The following line in my previous post should read:

    “- see a larger image (lightbox) – should the magnifying glass create confusion, it could be named e.g. “Expand image” instead”

    (the “-” was misplaced and is confusing)


    I’m not sure whether we are in sync:

    I don’t see why visitors would be confused if they saw this (my suggestion):

    instead of this (the theme default):

    and why expanding the image would serve no purpose?


    Hi Bruwa,

    The issue I see is that it would make more sense and be significantly easier to just make the Show details button always consistently show the image instead of the add to cart/variable add to cart button. I’m actually not sure with out some reading and testing how to do it.

    For the Show details, you just need to look for the following in woocommerce-config>config.php:

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

    Change it to:

    echo "<a class='button show_details_button $extraClass' href='".wp_get_attachment_url( get_post_thumbnail_id($post->ID) )."' rel='lightbox' alt=' ' title=' '> ".__('Enlarge Image','avia_framework')."</a>";

    I just test it on my end since I had to get the image url to spit out correctly and it works without issue.

    Then its just a matter of changing the icon for that button in:


    Change that file to the magnifying glass or whatever you want.




    Hi Devin

    thank you so much – you saved my day!




    Glad its working for you :)

    Typically we wouldn’t be able to do something like this but I’ve worked quite a bit with that function before so I spent a bit of personal time quickly fixing it up.





    Sorry, it seems I underestimated the task.

    Thanks so much for your effort.

    I’m a happy camper now.



    No worries, it will be useful for others down the road and I can see the appeal of it. Also like I said, I’ve worked quite a bit with this particular function so I know how to play with it pretty well :)



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

The topic ‘Change the "Select options" button into a lightbox link’ is closed to new replies.