changing the checkout button

I was trying to make the checkout button in my cart (dispatch=checkout.cart) larger but found that changing the css for it also affected other buttons, like add to cart. I think I figured out how to create a special class for the checkout button, but there is a ton of css to copy and edit.



Is it easier to replace this with an image? If there is an easier way, someone please share… :cool:



PROBLEM - this not only changes the checkout button on the cart, it also changes the checkout button on the notification window that pops up when you add an item to the cart. I initially couldn’t find where to change that, but I have it now so I added instructions below.



In buttons/button.tpl



Find:


{if $but_role == "action"}
{assign var="suffix" value="-action"}
{assign var="file_prefix" value="action_"}




After it, add our new class… I call it checkout - this is what is appended to the class’s value

(for example button-checkout, button-submit-checkout)

I’m not sure if the part in red is needed. Anyone know? Mine is working this way so I left it.

{elseif $but_role == "checkout"}
{assign var="suffix" value="-checkout"}
[COLOR="Red"]{assign var="file_prefix" value="action_"}[/COLOR]




Now for the hard part… Go into styles.css and styles.base.css and find the button-action css and copy it for button-checkout. Anywhere there an -action suffix, you’ll need a copy of it for your -checkout css.



After that’s all done you can switch on the -checkout class for that checkout button by going to buttons/checkout.tpl



Replace “action” with “checkout” (in red below):

{include file="buttons/button.tpl" but_text=$lang.checkout but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role="[COLOR="Red"]action[/COLOR]"}



After that change, I had to clear cache to see it take effect.



If your css isn’t right you can go back to buttons/checkout.tpl and change the role back to “action”. :wink:



**********************



I changed the button in the product notification pop-up to “View Cart” and linked it to the cart by doing this…



Created a new template: buttons/_view_cart.tpl with this content:

{include file="buttons/button.tpl" but_text=$lang.view_cart but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role="action"}



Then, in views/products/components/product_notification.tpl:


{include file="buttons/checkout.tpl" but_href="$index_script?dispatch=checkout.checkout"}



Changed to:

{include file="buttons/_view_cart.tpl" but_href="$index_script?dispatch=checkout.cart"}

Well I kind of did this a different way. I just made a checkout button image and then replaced my:



skins/basic/customer/buttons/checkout.tpl



To:


{$lang.checkout}



I also had to change my product notification height. So in my styles I changed it to:


.product-notification-container {
height:200px;
}
.product-notification .notification-body {
height:100px;
}




This is what my notification box looks like:







This is what my cart looks like:







Brandon

Thanks, Brandon! I like that! :smiley:

Thanks a bunch Ogia & Brandon for all your efforts! :wink:



I believe it is very important to have a Checkout Button that is bigger, uglier, and even more obnoxious than either the Paypal Express Checkout, or Google Checkout buttons! I now have this thus I currently win the battle of the Checkout Buttons, LOL!



In the end I ended up going with Brandon’s method as it allowed more control vs. just CSS, and far less work as is detailed by Ogia’s post.



I do wish CS-Cart developers would give more granular control over the individual buttons as there are none more important than the checkout button!

Many thanks Brandon for the code.



Yes agree Struck!

Thanks for your sharing. But i want to make this but i couldn’t find how. Thanks all.

What’s the code for the continue shopping button? Thanks in advance.


[quote name=‘brandonvd’]Well I kind of did this a different way. I just made a checkout button image and then replaced my:



skins/basic/customer/buttons/checkout.tpl



To:


{$lang.checkout}



I also had to change my product notification height. So in my styles I changed it to:


.product-notification-container {
height:200px;
}
.product-notification .notification-body {
height:100px;
}




This is what my notification box looks like:







This is what my cart looks like:







Brandon[/QUOTE]

Get it at


[QUOTE]skins/YOURSKIN/customer/buttons/continue_shopping.tpl[/QUOTE]



Regards

Perochak

I posted this over at:



[url]http://forum.cs-cart.com/showthread.php?p=87817#post87817[/url]



Brandon

Brandon



Thank you for helpful advice.

Great,



Do you have any idea How Make Button “Add to compare list”!

My Version 2.2.5



Regards Bojan

Is it works on version 3 ?