- This topic has 25 replies, 11 voices, and was last updated 5 years ago by
.
-
Posts
-
If you want to change the checkout button image with a custom image of your own then follow this tutorial. There are two ways you can customize the checkout button image in the shopping cart.
Method 1) Using Custom CSS
Step 1) Grab this custom CSS plugin:
http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413
Step 2) Add the following block of CSS in the settings area of that plugin:
input[src*="images/checkout_paypal.png"]
{
padding: 41px 143px 0px 0px;
background: url('your-domain.com/images/my-checkout-button.jpg');
background-size:auto;
width: 0px;
height: 0px;
}Replace the image URL in the above example with the actual image that you want to use for the checkout button.
Method 2) Replace the Image
Another way to change the checkout button image is to replace/overwrite the existing one with your custom one.
All the image files used in this plugin are stored in the “images” directory of the plugin. Simply find the checkout image that you want to change. Give the same name to the custom image and overwrite the default one with your custom one.
The following FileZilla tutorial may come in handy for this:
http://www.tipsandtricks-hq.com/using-filezilla-ftp-client-for-your-wordpress-site-6566
I tried this and entered
input[src*=”images/checkout_paypal.png”]
{
padding: 41px 143px 0px 0px;
background: url(‘bookmoreweddingsacademy.com/wp-content/uploads/2014/09/Checkout-button.jpg’);
background-size:auto;
width: 0px;
height: 0px;
}
but as you can see at [http://www.bookmoreweddingsacademy.com/checkout/] that it did not turn out as intended.
You are missing the “http” keyword in the image URL that you specified. Add “http://” before the domain name of the image URL.
Hello, I tried the same for my STRIPE payment and it didn’t work:
input[src*=”images/checkout_paypal.png”]
{
padding: 41px 143px 0px 0px;
background: url(‘http://mindfulsalestraining.net/wp-content/uploads/2015/02/Screen-Shot-2015-02-16-at-19.03.49.png’);
background-size:auto;
width: 0px;
height: 0px;
}
@AnisA, You are targeting the wrong image for Stripe checkout button. If you just have Stripe payment option enabled you will need to replace this image:
input[src*="images/checkout_stripe.gif"]Method 1 made my button shrink to almost nothing in my side bar widget, though the method worked when its displayed on a page.
Hello. Love this plugin so much. Thank you!
OK. The checkout/ view cart page was displaying basic font and size, the apply coupon field name and box were misaligned, and the actual paypal button is tiny (see screenshot link below).
I tried fancy/ thumbnail cart views, yet the same issue.
I setup a full-width page template yet the same problems occur.
I followed instructions elsewhere in this forum to change the font size in the cart, and that did not make a difference.
Now I don’t know what to do! Any help would be appreciated:
[https://www.dropbox.com/s/x0dqo64pxc7k9pz/Screenshot%202015-08-10%2017.40.56.png?dl=0]
[http://6egraphics.com/estore-action/checkout/]
Looks like you have some Hidden HTML code wrapped around the shortcode which is causing the issue.
Please do the following
1) Edit the checkout page then go to the “Text” view/mode in the editor.
2) Remove any hidden HTML tags that are wrapped around the shortcode.
That should fix it.
PS. Did you copy that shortcode from one our documentation pages? Which page was it?
I inserted the CSS into an “add CSS” type widget I already had installed (not T&T’s). All it does is put my image as the background of the link area for the other button… it doesn’t get rid of the other button. In effect, my button becomes a wallpaper behind the other button. That can’t have been the original goal of the original suggested CSS, right? What am I missing?
What CSS code did you enter? Copy and paste the CSS code you added so I can check it. Also, post a link to the page where I can go and see the button.
The CSS code was lifted from the first post in this thread. As written in the suggestion, it was:
[blockquote]Step 2) Add the following block of CSS in the settings area of that plugin:
input[src*=”images/checkout_paypal.png”]
{
padding: 41px 143px 0px 0px;
background: url(‘your-domain.com/images/my-checkout-button.jpg’);
background-size:auto;
width: 0px;
height: 0px;
}[/blockquote]
Trying to recreate what I had done (I’d since gone on to replace the checkout image), I saw what I had done… I had a mistake with the height/width properties. By setting them to 0 you are clearly rendering them invisible. I was not getting it to 0, so it was showing up in front of the background-image (the image I wanted to use instead.
Thanks!
Thank you. I also requested you to share the URL of the page where you have the cart shortcode so I can inspect the code. Is this issue solved for you now?
Hello, I followed the instructions and it the existing image is goes on the top of the new image. Could you please help? Thank you.
[http://www.resonateintowellness.com/checkout/]
This is the code I added to CSS.
input[src*=”images/checkout_paypal.png”] {
padding: 41px 143px 0px 0px;
background: url(‘http://www.resonateintowellness.com/wp-content/uploads/2017/02/mcvs_acc_opt_hrz_121_2x.png’);
background-size:auto;
width: 0px;
height: 0px;
}
- You must be logged in to reply to this topic.