Buy Photos Button

PhilCorleyPhoto · February 7, 2017

Is it possible to customise the **Buy Photos **button at the top of the Galleries?

I feel it is too "in your face" when viewing and I would like to reduce it to just Icon & Buy; or even just **Icon **- and change the color.

Can this be done?

Thanks

Phil

Hikin' Mike · February 7, 2017

Add this to your theme's CSS. That changes the button to red and removes the text leaving the icon only.

.sm-user-ui .sm-gallery-cover-buy-button {
    background: #f00;
    }

    .sm-user-ui .sm-gallery-cover-buy-button span{
        display: none;
        }

PhilCorleyPhoto · February 7, 2017

Thanks Mike

Is it possible to change the text as well (e.g., change it to just Buy) ?

Hikin' Mike · February 7, 2017

This will just show 'Buy'

/**
* Just 'Buy'
**************************************************/ 
.sm-user-ui .sm-gallery-cover-buy-button .sm-icon-CartAdd,      
.sm-user-ui .sm-gallery-cover-buy-button .sm-button-label {
    display: none;
    }   

    .sm-user-ui button.sm-gallery-cover-buy-button:after{
        content: 'Buy';
        }

This will show the icon and 'Buy'

/**
* Icon and 'Buy'
**************************************************/ 
.sm-user-ui .sm-gallery-cover-buy-button .sm-button-label {
    display: none;
    }

    .sm-user-ui button.sm-gallery-cover-buy-button:after{
        content: 'Buy';
        }

PhilCorleyPhoto · February 7, 2017

Excellent - Thanks yet again Mike !

Don't suppose there is anyway to change the case to proper; instead of upper. i.e., so it shows Buy instead of BUY. Fussy I know, but that is me

Hikin' Mike · February 7, 2017

@PhilCorleyPhoto said:
Excellent - Thanks yet again Mike !

Don't suppose there is anyway to change the case to proper; instead of upper. i.e., so it shows Buy instead of BUY. Fussy I know, but that is me

Just type 'BUY' instead of 'Buy' here: content: 'Buy';

PhilCorleyPhoto · February 7, 2017

Hi Mike,

The problem is it always shows BUY - even if Buy is entered. What I am trying to get is for it to show as Buy

Any ideas?

Thanks

Phil

denisegoldberg · February 7, 2017

@PhilCorleyPhoto said:
The problem is it always shows BUY - even if Buy is entered. What I am trying to get is for it to show as Buy

Are you talking about the buy button in the gallery header? I suspect they must be up-casing.

@leftquark has a post in his customizations pages that shows how to change the text - http://www.aaronmphotography.com/Customizations/Gallery/Buttons/Add-to-Cart-Button.

I just looked at his site and it appears that he is using the customization. Even though the CSS on the Add-to-Cart-Button page shows with mixed case the text in the buy button on his site still shows as all caps.

Did you intend to allow purchases from your site? Because as a viewer, I don't see a buy button at all. You will always see a buy button when you are logged in, but you will need to turn the visitor shopping cart on in your gallery settings if you want it to be available to visitors.

leftquark · February 8, 2017

The buy button in Collage style galleries can always be customized using the Customizer (to select "Button", "Icon" or "Button Icon") without CSS. For SmugMug style, you'll need to use CSS to customize it as Mike/Denise pointed out.

PhilCorleyPhoto · February 8, 2017

Hi Denise - yes I intend allowing buying but not turned it on yet. Still need to work out the selling aspects and the delayed proof option (as I don't upload full sized images)

Hi leftquark - I am not connected at the moment to test this, but when I tried it didn't seem to affect the Buy Photos button in the Collage Landscape gallery; but I will check later.

Thanks

Phil

PhilCorleyPhoto · February 8, 2017

@leftquark - Changing the options in the customizer doesn't change the "Buy Photos" button (top-right of the gallery). It does change the button displayed with each image.

Unless I am missing something, you do need CSS code to change the button and text.

Is it possible to stop the "Buy Photos" text being converted to upper case ?

Thanks

Phil

Alameth · March 14, 2017

@leftquark said:
The buy button in Collage style galleries can always be customized using the Customizer (to select "Button", "Icon" or "Button Icon") without CSS. For SmugMug style, you'll need to use CSS to customize it as Mike/Denise pointed out.

Aaron, just a heads up: The "Hide the Buy Photos text" customization at your website did not work for me; Hikin' Mike's CSS above worked perfectly.

leftquark · March 14, 2017

@Alameth said:
Aaron, just a heads up: The "Hide the Buy Photos text" customization at your website did not work for me; Hikin' Mike's CSS above worked perfectly.

Hmmm... that's strange, I just looked and that's the exact code I use on my own site to change the Buy Photos text.

Are you talking about "hide" or "change" the buy photo text?

Alameth · March 15, 2017

@leftquark said:
Hmmm... that's strange, I just looked and that's the exact code I use on my own site to change the Buy Photos text.

Are you talking about "hide" or "change" the buy photo text?

My goal is "hide," but I couldn't get either "hide" or "change" to work. My original theme looked like this:

When I copy-and-pasted the CSS from Buttons/Add-to-Cart-Button to my Theme->Advanced CSS, I see:

Example here:

http://pix.alameth.org/School/Homestead-2017/Pops-Wind-Ensemble/

and here's a gallery with Hikin' Mike's CSS:

http://pix.alameth.org/School/Homestead-2017/Winter-Percussion-Dublin/

leftquark · March 15, 2017

Ahhh, found my small error.

.sm-gallery-cover-buy-button span:nth-of-type(2) should have been .sm-gallery-cover-buy-button span:nth-of-type(1)

I've updated your "Homestead Pine" theme to have the fixed CSS and it looks like it's working. Thanks for pointing this out! I've updated the Customization page as well.

Alameth · March 15, 2017

@leftquark said:
Ahhh, found my small error.

.sm-gallery-cover-buy-button span:nth-of-type(2) should have been .sm-gallery-cover-buy-button span:nth-of-type(1)

Good stuff, thank you!

Hikin' Mike · March 15, 2017

@PhilCorleyPhoto said:
Excellent - Thanks yet again Mike !

Don't suppose there is anyway to change the case to proper; instead of upper. i.e., so it shows Buy instead of BUY. Fussy I know, but that is me

.sm-user-ui .sm-button.sm-gallery-cover-buy-button {
    text-transform: none;
    }

Buy Photos Button

Comments