Change the "Select options" button into a lightbox link « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Flashlight

closed

resolved

Change the "Select options" button into a lightbox link

10 posts from 3 voices

Started 5 months ago by bruwa
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

No tags yet.

bruwa
Member

Hi

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

Bruno

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

Posted 5 months ago #
Nick
Moderator

HI,

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 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

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

Thanks,

Nick

Thanks,

Nick

Posted 5 months ago #
bruwa
Member

Hi

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

Bruno

Posted 5 months ago #
bruwa
Member

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

***
PS
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)

Posted 5 months ago #
bruwa
Member

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?

Posted 5 months ago #
Devin
Moderator

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:
images/icons-shop-details.png

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

Regards,

Devin

Posted 5 months ago #
bruwa
Member

Hi Devin

thank you so much - you saved my day!

Regards,

Bruno

Posted 5 months ago #
Devin
Moderator

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.

Regards,

Devin

Posted 5 months ago #
bruwa
Member

Devin,

Sorry, it seems I underestimated the task.
Thanks so much for your effort.

I'm a happy camper now.

Bruno

Posted 5 months ago #
Devin
Moderator

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 :)

Regards,

Devin

Posted 5 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top