The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Credit Card logos on Checkout

MeristemMeristem Member
in Bugs & Feature Requests edited September 2008
Is there anyway to remove the AMEX and DISCOVER logos from the checkout page? My client doesn't use them as part of their Authorize.net account.

I used Firebug to see if they were listed under fc_payment but I don't see any code at all indicating that I could display:none for those two images.
Comments
  • lukeluke FoxyCart Team
    It's a background image. Just use css to set your own or none.
  • Thanks. I'll do that.
  • I've got this above the head tag in the checkout template:
    #fc_payment_container {
    background: url(http://www.embracethatthought.com/images/ccards.jpg) no-repeat 108px 33px;
    }

    The image gets stuck behind the default foxycart cc image. Can you help?
  • AdamWintleAdamWintle Member
    edited September 2008
    Hey Meristem,

    Let me see if I can help,

    I presume you've got this file in the <head> of your checkout's HTML:
    <link rel="stylesheet" href="https://STORENAME.foxycart.com/themes/standard/styles.css"; type="text/css" media="screen" charset="utf-8" />
    

    To be able to customise your checkout page, I recommend that you copy the contents of this stylesheet to your own server, so the URL is something like: http://YOURSITE.com/css/checkout-styles.css - then change the URL in the checkout's HTML and recache it in the FoxyCart admin. You can now start making custom changes from the original FoxyCart styles.

    In the new style sheet on your own server run a search for
    #fc_payment_container
    
    which is directly under section 4: Payment Information.

    Here you'll see a bunch of styles relating to all the payment stuff, this looks like the one you want:
    #fc_checkout_container #fc_payment {
    	margin-bottom:0px;
    	padding-top:55px;
    	background:url(https://www.foxycart.com/themes/standard/images/checkout-card-logos.png) no-repeat center 15px;
    }
    
    Make your changes, either replace the background with
    http://www.embracethatthought.com/images/ccards.jpg
    
    or hide the entire style using
    display: none;
    

    Make sure you recache your checkout in the FoxyCart admin to see the changes.

    There are other ways to achieve the same results, but duplicating the original style sheet and making your modifications is probably the best way...

    Hope that's clear and makes sense? =)
  • lukeluke FoxyCart Team
    Thanks for posting Mallmus!

    Just a heads up, we've had some people get confused when they modify the default style and then upgrade to a new store version. When you upgrade the store, it will automatically bring in the new style sheet if you get it from our server. Otherwise, you'll have to make all the changes manually... and that's no fun. We recommend referencing your own style sheet after the default style sheet and then overriding just the specific styles you want to change. If you do it that way, you only have to redo the specific customizations you want.

    Hope that helps. In the end, whatever works best for you is the way to go.
  • brettbrett FoxyCart Team
    We also strongly recommend checking out our latest screencast:
    http://wiki.foxycart.com/screencasts
    The third link will likely help _tremendously_
  • I too want to get rid of discover and amex, but I don't understand how to do this, can someone paste the code for me?
  • brettbrett FoxyCart Team
    Hi Mike.
    If you're on v051-, the card logos are a background image. Use Firebug to explore the CSS and add an override on your checkout template.

    If you're on v060 you can edit those images in the language settings, which is a lot easier.
  • where in the language area can i do this, i should have latest as i just started past 30 days
  • brettbrett FoxyCart Team
    edited December 2009
    v060 still isn't official, so stores still default to v051. I'd recommend upgrading to v060, but if you don't want to:

    I just played around with Screenflow (as we're planning on doing more screencasts in the future), but see if this helps:
    [EDIT: Wow, exported to YouTube all wonky like. Uploading to the wiki...]
    http://bit.ly/7V73yx

    It shows how to find CSS declarations and test them in the browser. The only difference between this and what you'd want to do is that you'd set the background to whatever custom image you create for the Visa + MC logos (without the AmEx + Discover logos) and use that instead of the background:none; that I put in the screencast. Hopefully that helps.

    http://wiki.foxycart.com/screencasts
    The 3rd screencast there has a much longer explanation of this approach, fwiw. This one might be too quick and difficult to understand, as there's no sound.
  • mikewendricksmikewendricks Member
    edited December 2009
    ok I got that, now for some reason I can't seem to update my checkout page logo for my business, it still shows the old logo...
  • nevermind i had to clear image cache in the foxy cart admin panel, thanks!
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    edited September 2010
    On version 0.7.0, these are images. Use this jQuery in the checkout template to remove them:

    jQuery("img[alt='American Express'], img[alt='Discover']").hide();
  • lukeluke FoxyCart Team
    You can also remove them directly from the language template for your store. Just click on the "language" menu item.
Sign In or Register to comment.