Discussions

How to change "Add to Cart" button to "Buy Now"?

Hi,

Is it possible to change the "Add to Cart" button's text to "Buy Now"?

Thanks.

maxchock
Posted: Jul 1, 2011

Comments

dkagon on July 12, 2011

A simple image replacement. Here is code that I used:

#buy-it-link #edit-submit
{
background:url('../images/try-on--buy-it-sprite.png') no-repeat;
background-position: 0px 0px;
text-indent:-999px;
height: 43px;
width: 125px;
display:block;
border: none;
}

#buy-it-link #edit-submit
{
background:url('../images/try-on--buy-it-sprite.png') -125px 0px no-repeat;
}

Buy-it-link is my wrapper div for the product_reference field in my node.tpl.php file. The element can probably be specified as well by another class or id.

tripper54 on July 13, 2011

A small module with an implementation of hook_form_alter will do the trick:

/**
* Implements hook_form_alter
*
*/

function YOURMODULE_form_alter(&$form, $form_state, $form_id) {
 
if ($form_id == 'commerce_cart_add_to_cart_form_1') {
$form['submit']['#attributes']['title'] = $form['submit']['#attributes']['value'] = t('Buy Now');
  }
}

replace YOURMODULE with the name of your module, and the form id as required.

pyll on September 8, 2011

Hi, i tried to use the code suggested by tripper54 and it works, but only for one button per page because the id is hard-coded.

I found the helper function commerce_form_callback to solve that:

function example_form_alter(&$form, $form_state, $form_id) {
  if (commerce_form_callback($form_id, &$form_state) == "commerce_cart_add_to_cart_form") {
    $form['submit']['#attributes']['title'] = $form['submit']['#attributes']['value'] = t('Buy Now');
  }
}

But I keep getting a warning:


Deprecated function: Call-time pass-by-reference has been deprecated; If you would like to pass it by reference, modify the declaration of commerce_form_callback(). If you would like to enable call-time pass-by-reference, you can set allow_call_time_pass_reference to true in your INI file in phptemplate_init() (line 14 of /home/phyll/drupal/example/themes/engines/phptemplate/phptemplate.engine).

One could "solve" that by editing a value in php.ini, but I'm looking for a more future proof solution which does not use deprecated functions. Does anyone with more php knowlegde than me know solution?

rfay Randy Fay on September 9, 2011

If you're just changing text, use Drupal's excellent translation facilities. If you have the core locale module turned on, you can use it, or if not, use the excellent [String Overrides](http://drupal.org/project/stringoverrides)

That goes for every change in Drupal's UI: If it's wrapped in t(), then use stringoverrides or locale to change it; there's no need to do it with more intrusive techniques.

flortjes on September 22, 2011

The String Overrides (or Locale and Content translation) module is still a good way to go. Style the button with a background image using css if you need to.

oz_an on September 22, 2011

you don't have to use hook_form_alter, you can use hook_form_form_id_alter(&$form, &$form_state, $form_id) which is a D7 thing I think.
Also instead of overwriting whole form[submit] you can change just what you want to change like

function mymodule_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state, $form_id) {
  $form['submit']['#type']='image_button';
  $form['submit']['#src']='path/to/your/image';
}
 

PN on September 24, 2011

Thank you for the suggestion. Unfortunately, hook_form_form_id_alter() doesn't quite work right either. On my product display pages with multiple products referenced, changing the select list (choosing a different product) does not update the other product fields (price, image, etc.) listed on the page. Maybe it's cache or AJAX related?

rfay Randy Fay on September 24, 2011

Here is a working form alter from a module named commerce_installments. In this case, it is only changing the button text for products that are of type 'installment_payment'.

/**
* Implements hook_form_FORMID_alter() to change the Add to Cart button text.
*/
function commerce_installments_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state) {
  $line_item = $form_state['line_item'];
  $product = commerce_product_load($line_item->commerce_product[LANGUAGE_NONE][0]['product_id']);
  if ($product->type == 'installment_payment') {
    // Change the submit button text to more appropriate "Pay now"
    $form['submit']['#value'] = t('Pay now');
  }
}

xbrianx on July 12, 2013

I tried to save this file in my theme's template directory as commerce-installments.tpl.php but I don't think that's right. What is the correct way to save this file?

bisonbleu on June 13, 2014

I'm using the code suggested by @rfay above. But the "Add to cart string" just won't change. I've added this line at the end of the if statement.

drupal_set_message('The Submit value is: ' . $form['submit']['#value']);

The returned message is: "The Submit value is: Pay now". But still the "Add to cart" button shows "Add to cart".

What am I missing?

CanOne (not verified) on May 9, 2012

Cheers! Saved me a lot of time :)

Just modified it for out of stock state

function MYMODULE_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state, $form_id) {
  if($form['submit']['#disabled'] == true) {
    $form['submit']['#type']='image_button';
    $form['submit']['#src']='sites/default/files/images/out-of-stock.png';
  } else {
    $form['submit']['#type']='image_button';
    $form['submit']['#src']='sites/default/files/images/add2cart.png';
  }
}

Add this to your stylesheet
.form-button-disabled {cursor:default;}
Otherwhise the out of stock image will get the pointer cursor too.

EDIT:
You can add an 'alt' attribute just add
$form['submit']['#alt']='add to cart';

PN on September 29, 2011

For anyone wanting to make the Add to Cart button an image, you can use the following function in a custom module. Special thanks to rfay, Damien Tournoud, and oz_an for the assistance.

<?php
/**
* Implements hook_form_FORMID_alter() to change the Add to Cart button to an image.
*/
function mymodule_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state) {
  $line_item = $form_state['line_item'];
  $product = commerce_product_load($line_item->commerce_product[LANGUAGE_NONE][0]['product_id']);
  if ($product->type == 'product') {
    $form['submit'] = array(
      '#type' => 'image_button',
      '#src' => drupal_get_path('module', 'mymodule') .'/addtocartimage.gif',
      '#weight' => 15,
    );
  }
}
?>

oz_an on October 2, 2011

By the way I'd be no where if randy fay wouldn't be around. I thank you for all his wonderful tutorials in vimeo!!. My code is not hypothetical it is just works fine for me. I couldn't inspect all the stuff with language_none and others, I think your and randy's addition is adding some conditions to it, like product->type and all.

bob.hinrichs on July 12, 2012

Thanks all...
I am attempting to change buttons to image buttons. Using the above techniques, it seems to break ajax. For example, when the 'address copy' functionality is implemented, it will not work if the checkout form has an image for a submit button.

// Will break your form:
function mjcc_global_form_commerce_checkout_form_checkout_alter(&$form, &$form_state) {
  $form['buttons']['continue']['#type'] = 'image_button';
  $form['buttons']['continue']['#src'] = '/'. drupal_get_path('theme', 'mjcc') . '/images/buttons/next-step.png';
}

timdiacon on October 11, 2013

I'm trying to add some placeholder text to a custom field on the add to cart form. I'm using the name value of the field which works on other forms such as login but doesn't want to work on this form.

if ($form_id == 'commerce_cart_add_to_cart_form_4') {
$form['line_item_fields[field_name][und][0][value]']['#attributes']['placeholder'] = t( 'Name' );
$form['submit']['#attributes']['title'] = $form['submit']['#attributes']['value'] = t('Buy Now');
}

jb on April 29, 2014

is it also possible to use the button-tag?

i tried the following without success.

<?php
$form['submit']['#type'] = "markup";
$form['submit']['#markup'] = '<button type="submit" class="form-submit"><span class="form-submit-before"></span>In den Warenkorb <span class="form-submit-after"></span></button>';
?>

Stan on October 26, 2014

Drupal 7

<?php
function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  if (strpos($form_id, 'commerce_cart_add_to_cart_form') !== FALSE) {
    $form['submit'] = array(
      '#type' => 'submit',
      '#value' => t('Buy now'),
    );
  }
}
?>