Customizing "Buy" menu

markstreetphotography

I want to turn off the fly-up menu that appears when one clicks "buy now" from a light box image. This menu contains links such as "create a card", "photos in this gallery", etc. If it can't be turned off, is there a way to delete the links that read "photos in this gallery" and "create a card"?

I would also like to change the text in the flyout navigation that reads "this photo" to "this artwork". Is that possible?

You can see the button I'm referring to here:

http://sebastianograssoart.smugmug.com/Art-For-Sale/PaintingsForSale/i-4KShrWQ/A

Thanks!

denisegoldberg

Create a card can be removed by not pricing "create a card".
Other products can be removed by not pricing anything from the "other products" category.

I don't know how to remove "photos from this gallery", hopefully someone else will jump in with the answer.

--- Denise

markstreetphotography

Can the "Buy Now" Sub Menu be bypassed or turned off?
I want to turn off the fly-up menu that appears when one clicks "buy now" from a light box image. This menu contains links such as "create a card", "photos in this gallery", etc. If it can't be turned off, is there a way to delete the links that read "photos in this gallery" and "create a card"?

I would also like to change the text in the flyout navigation that reads "this photo" to "this artwork". Is that possible?

You can see the button I'm referring to here:

http://sebastianograssoart.smugmug.c...le/i-4KShrWQ/A

Thanks!

denisegoldberg

See answer here.

--- Denise

markstreetphotography

denisegoldberg wrote: »

Create a card can be removed by not pricing "create a card".
Other products can be removed by not pricing anything from the "other products" category.

I don't know how to remove "photos from this gallery", hopefully someone else will jump in with the answer.

--- Denise

Thank you for answering the question about the "create a card" and "other products". Seems easy enough.

My client is mostly concerned with the "Photos from this gallery" as he feels that it is a cumbersome user interface and most people will not be buying an entire gallery of his paintings/prints.

I'm wondering why SmugMug wouldn't have a simpler way of not offering the ability to buy every thing in a gallery. It seems that it would be a common request.

thenickdude

You can hide the "photos from this gallery" link by adding a CSS content block with this in it:

#BuyPhotos {
	display:none;
}

markstreetphotography

Thank you Lamah. I'm assuming that I would do that with "Customize Site > Entire Site >" and then put that code in the CSS Placeholder there, correct?

thenickdude

Yep, precisely!

markstreetphotography

Is there a way to either remove the fly-up menu completely? Just have the buy now button go to options to purchase the print they're on in the light box?

If not, can I change the text from "This Photo" to "This Print"? Although it seems silly for them to have to click a button and then click a fly-out with one item in it.

thenickdude

Sorry, I don't think it's possible to remove the flyout. You can change that text by adding this CSS:

#BuyPhoto a {
	visibility: hidden;
	word-spacing:-999px;
	letter-spacing: -999px; 
}
#BuyPhoto a:after {
	visibility: visible;
	word-spacing:normal;
	letter-spacing:normal; 
	
	content: "This Print";
}

You can pull the same trick to rename the header of the buy dialog that pops up:

#cartUI .hd h1 {
	visibility: hidden;
	word-spacing:-999px;
	letter-spacing: -999px; 
}
#cartUI .hd h1:after {
	visibility: visible;
	word-spacing:normal;
	letter-spacing:normal; 
	
	content: "Buy Print";
}

markstreetphotography

Lamah, you are my hero. Thanks so much.

buckethead

Do you know if this customization can be done for a specific gallery and not site-wide?

thenickdude

Yup, just use the customiser to add it as a CSS content block on that gallery only (choose the option at the top right of the customiser to "make this gallery custom").

buckethead

thenickdude wrote: »

Yup, just use the customiser to add it as a CSS content block on that gallery only (choose the option at the top right of the customiser to "make this gallery custom").

Thanks. Got that. One last question. Can you tell me what the CSS would look like if I wanted to change more than one of the menu items under the Buy Button. I'd like the first to be "Digital Download", the second "Multiple Downloads", and the third "Print Packages"?

buckethead

buckethead wrote: »

Thanks. Got that. One last question. Can you tell me what the CSS would look like if I wanted to change more than one of the menu items under the Buy Button. I'd like the first to be "Digital Download", the second "Multiple Downloads", and the third "Print Packages"?

Ah! I got it. Nice to finally figure something out on my own. Just had to inspect the menu items and saw that the second item was #Buyphotos. Copied your original code and made the slight mod.

Thanks for your time! This is going to help avoid some confusion my customers were having. Really appreciate all that you do in the forum!
Bob

buckethead

thenickdude,

Could really use your help! Am using the following CSS code based on our thread above. It works fine on Safari and Chrome on the Mac, but on IE 9 under Windows, when the user clicks the Buy button, the drop down opens up but there is no text visible and nothing is clickable. With Firefox on Windows, the text shows up, but it is left justified instead of right and runs off the window edge on the right.

This is in the CSS block for a gallery that has been made unique:

.sm-widget-text{color:#f4fa58!important}
#BuyPhoto a {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#BuyPhoto a:after {
visibility: visible;
word-spacing:normal;
letter-spacing:normal;
content: "Digital Download";
}

#BuyPhotos a {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#BuyPhotos a:after {
visibility: visible;
word-spacing:normal;
letter-spacing:normal;
content: "Multiple Downloads";
}
#BuyPackage a {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#BuyPackage a:after {
visibility: visible;
word-spacing:normal;
letter-spacing:normal;
content: "Prints & Merchadise";
}

my site is www.arderykellsportsphoto.com and a link to a gallery running this code is below:

http://www.ardreykellsportsphoto.com/Graduati/2014-Diplomas/Ms-Tolivers-Homeroom/i-CB83WJ9

thenickdude

You can fix it in Firefox by manually setting the menu width:

#BuyPhoto,
#BuyPhotos,
#BuyPackage {
   width: 12em; /* Manually set the width of the menu */
}

I tried, but didn't manage to get it working properly on Internet Explorer, so I guess you had better scrap it.

buckethead

Ugh. I appreciate you trying. I haven't tried the newer release of IE, but I've had several customer email me about trying to order photos and having the problem. So, I guess there are still a lot of folks with IE 9 installed. Your code was perfect for what I needed. I hate the wording SM uses by default, since I sell all my graduation photos via packages. Buy - This Photo - confuses them.

I'm going to see if IE 10 has the same issue. I'll have to load a copy first.

Thanks for trying!

denisegoldberg

buckethead wrote: »

I'm going to see if IE 10 has the same issue.

The problem you describe with your drop still exists on IE11.

--- Denise

buckethead

Even more reason for the world to run on a Mac. Thanks for checking Denise! Looking for an alternative to Nick's original solution. A shame, since what he created works great under Safari and Chrome on the Mac.

buckethead

buckethead wrote: »

Even more reason for the world to run on a Mac. Thanks for checking Denise! Looking for an alternative to Nick's original solution. A shame, since what he created works great under Safari and Chrome on the Mac.

Nick,
I was simply poking around and wonder if this means anything to you when the following occurs:
When I change your original code from:
#BuyPhoto a {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}

#BuyPhoto a:after {
visibility: visible;
word-spacing: normal;
letter-spacing: normal;

content: "Digital Download";
}

To this (just added a : in the first line
#BuyPhoto a: {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}

#BuyPhoto a:after {
visibility: visible;
word-spacing: normal;
letter-spacing: normal;

content: "Digital Download";
}

My replacement words for the choice "This Photo" shows up in IE, but so does the original "This Photo". I can change "after" to "before" and can get "Digital Download" to show before "This Photo", but I just cannot figure out how to make the words "This Photo" disappear. I'm not well versed enough in CSS to understand what the significance of that extra ":" is.

Any thoughts?
Thanks for any time you can give to this!
Bob