Announcement

Collapse
No announcement yet.

Changing the default "Proceed to Checkout" button help

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

  • Changing the default "Proceed to Checkout" button help

    Hi all,

    I'm attempting to change the default Proceed to Checkout button in the View Cart page to a button that I made where it has a regular image, then a brightened mouseover image.

    When searching for an answer on the forum, I found a helpful article by fellow 3D Cart user Mondo from back in May last year where he details how he changed the buttons on his site.

    In particular, I believe it's where he explains this:


    "TOP CHECKOUT BUTTON:

    <input type="button" onclick="window.location='checkout.asp?step=1'" value="[viewcart_checkout-button]" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'">

    TO:
    <input type="image" onclick="window.location='checkout.asp?step=1'" src="assets/images/default/btnbegincheckout3.png" border="0" alt="Continue shopping">"



    And this:

    BOTTOM CART CHECKOUT BUTTON:

    <td valign="top"><input type="button" onclick="window.location='checkout.asp?step=1'" value="[viewcart_checkout-button]" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'" id="Button7" name="Button7"></td>

    TO:
    <a onclick="window.location.href='checkout.asp?step=1 '" id="Button7" name="Button7" style="pic"href="#""><img src="assets/images/default/btnbegincheckout.png" border="0" alt="Begin checkout"></a>




    My question is, when I'm trying to do this, I don't know how to implement it with the mouseover image involved. I tried something and it didn't work out so well, and also wouldn't let me go back to the View_Cart.asp page once I hit the button and went to the the Checkout_1 page.

    Am I correct that the file I'm trying to change is "View_Cart.html"? And also, any advice on how to blend Mondo's suggestion with a mouseover image?

    Thank you in advance for any assistance, suggestions, or advice!
    -James
    Attached Files

  • #2
    You should be able to change the btn class in the CSS located at
    settings>design>themes & styles
    .
    Clayton
    Go Live Industries

    Comment


    • #3
      Thanks for the advice Go Live. I went in to the View_Cart.html template, but I'm still having a problem getting the mouseOver to work correctly.

      When changing the "Proceed to Checkout" button (Button 7, I believe), I went from this (default 3D Cart code):

      <td valign="top"><input type="button" onclick="window.location='checkout.asp?step=1'" value="[viewcart_checkout-button]" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'" id="Button7" name="Button7"></td>

      To this (new code that I can't figure out where I'm going wrong):

      <td valign="top"><a onclick="window.location.href='checkout.asp?step=1 '" id="Button7" name="Button7" style="pic"href="#""><img src="assets/images/BeginCheckout.png" onMouseOver="assets/images/BeginCheckoutMouseOver.png" onMouseOut="assets/images/BeginCheckout.png" border="0" alt="Begin checkout"></a> </td>

      It shows the button, but I can't get the mouseOver to show the "brightened" image (BeginCheckoutMouseOver.png). I know something is wrong with the way I've tried coding it, but I can't figure out what...unfortunately, I suck at html! I'll try some more, but if anyone has a suggestion, I'd greatly appreciate it!

      Thanks,
      James

      Comment


      • #4
        Sorry we left our buttons as default. You probably have a big fat juicy button your working with.

        Here is a sample of my btn classes we used
        Code:
        /*btn:: Controls the buttons, (ONLY if it is not using and image).*/ 
        .btn {
        	border: 1px solid #c8d98b;
        	background: #FFF url(images/BG_btn.gif) repeat-x;
        	font-weight: normal;
        	font-size: 12px;
        	color: #50564a;
        	cursor: pointer;
        	margin:1px;
        	padding: 2px 6px;
        }
        /*btn_over:: Controls the buttons when a user mouses over them, (ONLY if it is not using and image).*/ 
        .btn_over {
        	border: 1px solid #c8d98b;
        	background: #c8d98b url(images/BG_btn1.gif) repeat-x;
        	font-weight: normal;
        	font-size: 12px;
        	color: #50564a;
        	cursor: pointer;
        	margin:1px;
        	padding: 2px 6px;
        }
        You may need to rewrite some classes or use JS
        Good Luck
        Last edited by Go Live; 03-04-2011, 02:11 PM.
        .
        Clayton
        Go Live Industries

        Comment


        • #5
          Thanks Go Live. I'll give it a shot with the CSS template and see if it works. Fun weekend project. I have a feeling that I'll need some design service as there's a bunch of things I want to change all over the cart that I just don't know enough about. Thanks again and have a great weekend!
          -James

          Comment


          • #6
            The easiest way would be to add a class to your CSS and put the original code back in the view cart page with the new class name.

            such as "btnptc" and "btnptc_over"

            The reason for a new class name is because all buttons use the btn class and you want a special image button for just the proceed to cart button.

            Now if you use a full size image then remove the repeat-x from the CSS

            Have Fun
            .
            Clayton
            Go Live Industries

            Comment

            Working...
            X