Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore F.A.Q/Instructions › eStore – Change the Checkout Button Image in the Shopping Cart
Tagged: checkout button, checkout page, customization, paypal button
- This topic has 25 replies, 11 voices, and was last updated 4 years, 7 months ago by admin.
-
AuthorPosts
-
November 19, 2013 at 12:16 am #10040adminKeymaster
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
September 13, 2014 at 3:17 pm #59018h4baineMemberI 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.
September 13, 2014 at 11:49 pm #59019adminKeymasterYou are missing the “http” keyword in the image URL that you specified. Add “http://” before the domain name of the image URL.
September 13, 2014 at 11:57 pm #59020h4baineMemberThank you
February 16, 2015 at 7:06 pm #59021AnisAMemberHello, 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;
}
February 16, 2015 at 11:12 pm #59022wpCommerceModerator@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"]
March 25, 2015 at 8:21 pm #59023makecowsnotwarMemberMethod 1 made my button shrink to almost nothing in my side bar widget, though the method worked when its displayed on a page.
March 25, 2015 at 9:46 pm #59024wzpModeratorCheck the CSS of your theme’s sidebar.
August 10, 2015 at 9:53 pm #59025spbmrmusicMemberHello. 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/]
August 10, 2015 at 11:46 pm #59026adminKeymasterLooks 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?
February 16, 2017 at 1:19 pm #59027MiFiWritersMemberI 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?
February 16, 2017 at 11:54 pm #59028adminKeymasterWhat 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.
February 17, 2017 at 4:58 am #59029MiFiWritersMemberThe 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!
February 17, 2017 at 11:58 pm #59030adminKeymasterThank 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?
February 24, 2017 at 9:53 pm #59031DinaSpectatorHello, 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;
}
-
AuthorPosts
- You must be logged in to reply to this topic.