Announcement

Collapse
No announcement yet.

Does anyone know how to change the single page checkout button to an image?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Does anyone know how to change the single page checkout button to an image?

    Hello,

    I have seen many requests for this but no responses. Does anyone know the code to be able to change the checkout button on the single page checkout to an image file instead?

    Here is the default code in there now:

    <input type="button" value="[checkout3_submitbutton]" name="B1" class="btn" onClick="doCheckout(this.form);"/>

    The Mondo's post in other threads for replacing check out button with an image is ONLY for multi-page checkout and DOES NOT work for the single page checkout button replacement sadly.

    Thank you in advance :)

    Justin
    Last edited by justinkas; 02-06-2012, 01:33 AM.

  • #2
    I don't know if this will work or not, but check it out:

    https://support.3dcart.com/Knowledge...to-cart-button

    Comment


    • #3
      Based on article I posted, maybe try the following, but by replacing the path to your image file:

      <a href="doCheckout(this.form);"><img src="pathtoimage.jpg" border="0"></a>

      Comment


      • #4
        Sorry should be:

        <a href="javascript:doCheckout(this.form);"><img src="pathtoimage.jpg" border="0"></a>

        But after thinking about it, the name field "B1" is not being passed using this method, so I'm not sure if it will work. Maybe you can use some type of hidden variable named "B1", I don't know. Maybe someone with more knowledge about this will chime in....

        Comment


        • #5
          Unfortunately none of these suggestions work either :(

          Hi,

          I just tried the suggestions that you all have gratefully provided but unfortunately to no avail as they do not work either sadly...

          Any other suggestions would be most graciously welcomed!

          Thanks!

          Comment


          • #6
            Can't you change the style? instead of class="btn" make it class="btn2" and then add a btn2 style to your modified stylesheet.

            Our checkout button currently uses a repeated background image -- I don't see why that can't be replaced.

            Code:
            /*btn:: Controls the buttons*/ 
            .btn {
            	border-top: 1px solid #dcdbdc;
            	border-bottom: 1px solid #dcdbdc;
            	border-left: 1px solid #dcdbdc;
            	border-right: 1px solid #dcdbdc;
            	background: url(images/BG_btn.gif) repeat-x;
            	font-family: Arial, Helvetica, sans-serif;
            	font-weight: bold;
            	font-size: 12px;
            	color: #FFF;
            	cursor: pointer;
            	margin:1px;
            	padding: 2px 6px 2px 6px;
            }
            /*btn_over:: Controls the buttons*/ 
            .btn_over {
            	border-top: 1px solid #dcdbdc;
            	border-bottom: 1px solid #dcdbdc;
            	border-left: 1px solid #dcdbdc;
            	border-right: 1px solid #dcdbdc;
            	background: url(images/BG_btn1.gif) repeat-x;
            	font-family: Arial, Helvetica, sans-serif;
            	font-weight: bold;
            	font-size: 12px;
            	color: #585C5F;
            	cursor: pointer;
            	margin:1px;
            	padding: 2px 6px 2px 6px;
            }

            If you create/upload a new image called BG_btn2.gif (and an "over" version, BG_btn3.gif) and eliminate the repeat in your new style, it should work.

            --mimib

            Comment


            • #7
              Nope....that's not working either

              Just tried what you have stated with no luck unfortunately.

              The closest I have come so far is to modify the button call in the checkout_singlepage template from the default:

              <input type="button" value="[checkout3_submitbutton]" name="B1" class="btn" onClick="doCheckout(this.form);"/>

              to this...

              <input type="image" src="assets/templates/Evergryn/images/check_out.png" value="[checkout3_submitbutton]" name="B1" class="btn" onClick="doCheckout(this.form);"/>

              but unfortunately the user does get checkout except that they are NOT taken to the thank you confirmation page; instead they end up back at the homepage.

              Comment

              Working...
              X