Joomla Templates Club 406,261 posts

[gwang81 Friend gwang81Join date: July 2007Posts: 39Downloads:0Uploads:0 Thanks: 3]

#149195

I want to personalize the add-to-cart button in my store, and I wonder how. Please help.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#334788

Hello

Pls see the image is using on the our demo http://templates.joomlart.com/ja_mesolite/templates/ja_mesolite/images/bt-addtocart1.gif

1) You create same as this image, it has two part : above part use to display the button when the mouse does not hover and below path use for the mouse hover.
2) To adujst the display position of button pls open the file /templates/ja_mesolite/css/ja.vm.css and try to find codes:

.addtocart_button_module, .notify_button {
padding: 0 0 2px;
width: 102px;
height: 22px;
background: url(../images/bt-addtocart1.gif) no-repeat top #00A9DD;
border: none;
text-indent: 18px;
color: #FFFFFF;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
}

.addtocart_button_module:hover, .addtocart_button_module:active {
background: url(../images/bt-addtocart1.gif) no-repeat bottom #666666;
color: #FFFFFF;
}

http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/

Good luck

[gwang81 Friend gwang81Join date: July 2007Posts: 39Downloads:0Uploads:0 Thanks: 3]

#335047

thanks. I have followed your instruction to change the shopping cart button, however, my new add-to-cart button is only shown for ‘featured products’ on my home page. See http://www.apacheshop.com for the big orange color add-to-cart button. When I click to see the product details, the product_details page still uses the old add-to-cart button, not my new button. I wonder what else I need to change in the CSS file. thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#335425

Dear gwang81!

pls open the file : http://www.apacheshop.com/templates/ja_mesolite/css/ja.vm.css and the following code at line278:

input.addtocart_button {
color: #FFFFFF;
margin: 10px 0 0;
padding: 0 0 2px;
text-indent: 18px;
width: 102px;
height: 22px;
background: url(../images/bt-addtocart1.gif) no-repeat top #00A9DD;
border: none;
}

pls replate the button by yours in there

Good luck

[Author]

Posts