Tips and Tricks HQ Support

Support site for Tips and Tricks HQ premium products

  • Home
  • Contact Us
  • Documentation
  • Forum Home
    • Forum
    • Forum Search
    • Forum Login
    • Forum Registration

eStore – Change the Checkout Button Image in the Shopping Cart

by

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 2 years, 10 months ago by admin.
Viewing 15 posts - 1 through 15 (of 26 total)
1 2 →
  • Author
    Posts
  • November 19, 2013 at 12:16 am #10040
    admin
    Keymaster

    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 #59018
    h4baine
    Member

    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.

    September 13, 2014 at 11:49 pm #59019
    admin
    Keymaster

    You 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 #59020
    h4baine
    Member

    Thank you :)

    February 16, 2015 at 7:06 pm #59021
    AnisA
    Member

    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;

    }

    February 16, 2015 at 11:12 pm #59022
    wpCommerce
    Moderator

    @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 #59023
    makecowsnotwar
    Member

    Method 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 #59024
    wzp
    Moderator

    Check the CSS of your theme’s sidebar.

    August 10, 2015 at 9:53 pm #59025
    spbmrmusic
    Member

    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/]

    August 10, 2015 at 11:46 pm #59026
    admin
    Keymaster

    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?

    February 16, 2017 at 1:19 pm #59027
    MiFiWriters
    Member

    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?

    February 16, 2017 at 11:54 pm #59028
    admin
    Keymaster

    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.

    February 17, 2017 at 4:58 am #59029
    MiFiWriters
    Member

    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!

    February 17, 2017 at 11:58 pm #59030
    admin
    Keymaster

    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?

    February 24, 2017 at 9:53 pm #59031
    Dina
    Spectator

    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;

    }

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 26 total)
1 2 →
  • You must be logged in to reply to this topic.
Log In

Forum Related

  • Forum Home
  • Forum Search
  • Forum Login

Support Related Forms

  • Contact Us
  • Customer Support
  • Request a Plugin Update
  • Request Fresh Download Links

Useful Links

  • Plugin Upgrade Instructions
  • WP eStore Documentation
  • WP eMember Documentation
  • WP Affiliate Platform Documentation
  • WP PDF Stamper Documentation
  • WP Photo Seller Documentation
  • Tips and Tricks HQ Home Page
  • Our Projects

Quick Setup Video Tutorials

  • WP eStore Video Tutorial
  • WP eMember Video Tutorial
  • WP Affiliate Platform Video Tutorial
  • Lightbox Ultimate Video Tutorial
  • WP Photo Seller Video Tutorial

Our Other Plugins

  • WP Express Checkout
  • Stripe Payments Plugin
  • Simple Shopping Cart Plugin
  • Simple Download Monitor

Copyright © 2023 | Tips and Tricks HQ