How to change Add To Cart Button Opencart

Please LogIn to Reply!

Post By: guest | 01-17-2013 07:57 Reply


How do I change the add to cart button with my own designed button? No overlay text. Just a single graphic button.

Using V1.5.3

<div class="cart">
<div><?php echo $text_qty; ?>
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
&nbsp;<a id="button-cart" class="button"><span><?php echo $button_cart; ?></span></a></div>
<div><span>&nbsp;&nbsp;&nbsp;<?php echo $text_or; ?>&nbsp;&nbsp;&nbsp;</span></div>
<div><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br />
<a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></div>
<?php if ($minimum > 1) { ?>
<div class="minimum"><?php echo $text_minimum; ?></div>
<?php } ?>

/* button */
a.button {
display: inline-block;
padding-left: 6px;
background: url('../image/button-left.png') top left no-repeat;
text-decoration: none;
cursor: pointer;
a.button span {
color: #FFFFFF;
line-height: 12px;
font-size: 12px;
font-weight: bold;
display: inline-block;
padding: 6px 12px 8px 5px;
background: url('../image/button-right.png') top right no-repeat;
a.button:hover {
background: url('../image/button-left-active.png') top left no-repeat;
a.button:hover span {
color: #FFFFFF;
background: url('../image/button-right-active.png') top right no-repeat;
.buttons {
background: #FFFFFF;
border: 1px solid #EEEEEE;
overflow: auto;
padding: 6px;
margin-bottom: 20px;
.buttons .left {
float: left;
text-align: left;
.buttons .right {
float: right;
text-align: right;
.buttons .center {
text-align: center;
margin-left: auto;
margin-right: auto;



Oh my gosh! No help in this forum? Still no reply to my post above.

If you want to change the graphic for the buttons, just replace the following images in your template's image folder with your own:

They are "classed" in the stylesheet:
Code: Select all
/* button */
a.button {
    display: inline-block;
    padding-left: 6px;
    background: url('../image/button-left.png') top left no-repeat;
    text-decoration: none;
    cursor: pointer;
a.button span {
    color: #FFFFFF;
    line-height: 12px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    padding: 6px 12px 8px 5px;
    background: url('../image/button-right.png') top right no-repeat;
a.button:hover {
    background: url('../image/button-left-active.png') top left no-repeat;
a.button:hover span {
    color: #FFFFFF;
    background: url('../image/button-right-active.png') top right no-repeat;

Note: The images need to be in 2 pieces (left and right), simply because there is no way of "fixing" the width of the text that will appear on the button.


how to change add to cart button in opencart

Reply Or Comment!
Please LogIn to Reply!