By Xangis on

I'm building a storefront using the ecommerce module, but there's one simple thing I don't see how to do.

Right now a product page shows ">> Add to Cart" link at the bottom of the product. I want to replace this with a button that says the same thing and performs the same function (shoppers like easy-to-find buttons). How would I go about doing this?

⋅ Categories: Drupal 5.x

Comments

Rowanw’s picture

Rowanw commented

You could add a class to the link in your template and style it with CSS.

Example HTML:
<a href="cart" class="btn-add">Add to cart</a>

Example CSS:

a.btn-add {
  color: #fff;
  font-weight: bold;
  padding: 3px;
  border: 1px solid #091;
  background: #0c3;
}

You could add a background image if you like as well.

spazfox’s picture

spazfox
Location Olympia, WA
commented

I can verify that this technique works in ecommerce. This is what I had to do specifically (for other newbies like me!):

1) Add this to the top of the style.css file for my theme:

a.btn-add {
  color: #fff;
  font-weight: bold;
  padding: 3px;
  border: 1px solid #091;
  background: #0c3;
}

2) In product.module for ecommerce, find the function product_link (around line 281) and replace this (around line 302):

'attributes' => array('class' => 'cart_add', 'title' => t('Add this item to your shopping cart.')),

with this:

'attributes' => array('class' => 'btn-add', 'title' => t('Add this item to your shopping cart.')),

Rowanw’s picture

Rowanw commented

Why did you change the class name?

Every time you upgrade E-Commerce you'll have to change it again.

The point of using classes is that you should never have to change their names - just change the CSS.

spazfox’s picture

spazfox
Location Olympia, WA
commented

I guess I just changed it without thinking about it because the code in the first comment changed it. You're right, though -- there's no need to change the class name.

Muslim guy’s picture

Muslim guy commented

The same we did for Read More button

Add the following to your style.css, and upload the button to the theme folder

a.read-more:link, a.read-more:visited {
	display: block;
	background: url(menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}
a.read-more:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}
a.read-more#active_menu {
	color:#fff;
	font-weight: bold;
}
a.read-more#active_menu:hover {
	color: #fff;
}

Replace read-more in each above to cart-link (or is it something else?)

To see the effect, see http://almuslimin.org (The blue Read More button which turns to red upon mouse over)

*I cant remember what is the default class="?" for the `Add to Cart' link for Drupal 5.1 but for 4.7.x, the E-commerce module has already created class="something" for ad to cart