Support Forum - Topic: Change the "Select options" button into a lightbox link

Support Forum - Topic: Change the "Select options" button into a lightbox link http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link Support Forum - Topic: Change the "Select options" button into a lightbox link en-US Sun, 19 May 2013 15:04:11 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Devin on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88856 Tue, 18 Dec 2012 19:36:19 +0000 Devin 88856@http://www.kriesi.at/support/ 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 bruwa on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88853 Tue, 18 Dec 2012 19:25:32 +0000 bruwa 88853@http://www.kriesi.at/support/ Devin, Sorry, it seems I underestimated the task. Thanks so much for your effort. I'm a happy camper now. Bruno Devin on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88848 Tue, 18 Dec 2012 19:18:37 +0000 Devin 88848@http://www.kriesi.at/support/ 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 bruwa on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88845 Tue, 18 Dec 2012 19:13:52 +0000 bruwa 88845@http://www.kriesi.at/support/ Hi Devin thank you so much - you saved my day! Regards, Bruno Devin on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88818 Tue, 18 Dec 2012 17:12:36 +0000 Devin 88818@http://www.kriesi.at/support/ 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: <code>echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";</code> Change it to: <code>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>";</code> 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: <code>images/icons-shop-details.png</code> Change that file to the magnifying glass or whatever you want. Regards, Devin bruwa on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88691 Mon, 17 Dec 2012 21:57:36 +0000 bruwa 88691@http://www.kriesi.at/support/ I'm not sure whether we are in sync: I don't see why visitors would be confused if they saw this (my suggestion): <img src="http://www.wp2.fotowalther.ch/wp-content/uploads/enlarge_image.jpg" /> instead of this (the theme default): <img src="http://www.wp2.fotowalther.ch/wp-content/uploads/Select_options.jpg" /> and why expanding the image would serve no purpose? bruwa on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88669 Mon, 17 Dec 2012 20:26:27 +0000 bruwa 88669@http://www.kriesi.at/support/ As the button with the magnifying glass opening the image in the prettyPhoto lightbox already exists on the product detail page, <img src="http://www.wp2.fotowalther.ch/wp-content/uploads/magnify.jpg" /> 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) bruwa on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88646 Mon, 17 Dec 2012 19:00:47 +0000 bruwa 88646@http://www.kriesi.at/support/ Hi actually I would rather say that visitors are confused when they see the existing theme solution: This is what visitors currently see: <img src="http://www.wp2.fotowalther.ch/wp-content/uploads/Select_options.jpg" /> 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: <img src="http://www.wp2.fotowalther.ch/wp-content/uploads/2012/12/1191_enhanced1-200x140.jpg" /> 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 Nick on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88626 Mon, 17 Dec 2012 17:22:27 +0000 Nick 88626@http://www.kriesi.at/support/ 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 <a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/" rel="nofollow">http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/</a> However the magnifying glass w customization ill take look at now :)\ Thanks, Nick Thanks, Nick bruwa on "Change the "Select options" button into a lightbox link" http://www.kriesi.at/support/topic/change-the-select-options-button-into-a-lightbox-link#post-88467 Sun, 16 Dec 2012 15:22:44 +0000 bruwa 88467@http://www.kriesi.at/support/ 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) <img src="http://www.wp2.fotowalther.ch/wp-content/uploads/2012/12/1191_enhanced1-200x140.jpg" /> 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 ...