Replace Google Calendar image on the booking page

I wish to replace Google Calendar button on the booking page, please advise how it can be done.

  • Adam Czajczyk

    Hello Man

    I hope you're well today and thank you for your question!

    The easiest way to replace the button would be with some additional CSS:

    .appointments-confirmation-wrapper .appointments-gcal-field label span img {
    	display:none;
    }
    .appointments-confirmation-wrapper .appointments-gcal-field label span:after {
    	content:'';
    	background:url('YOUR_IMAGE_URL') center center no-repeat;
    	display:block;
    	width:100%;
    	height:30px;
    }

    The code above first hides an original image and then adds your own one in that place. There are two rules that you will want to adjust in that code:

    1) replace YOUR_IMAGE_URL with a full URL of the image that you wish to use as a button
    2) adjust "height" value (currently set to 30px) to match the image height.

    To add the code to the site, either add it via "Appearance -> Customize -> Additional CSS" option or via some "Custom CSS" option of the theme that you're using (if it has such an option).

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.