How to Replace the 'Add to Cart' button with an Image in Ubercart

This is an easy-to-use Drupal module to replace Ubercart's "Add to Cart" submit button with a custom image based on this Ubercart support post.

Initially I had tried to do this with just CSS, but I could not make it work in IE.

A big shout out to Vince Rowe for providing a workable solution that we could turn into a module, and to Andy over at the Proof Group for helping me with this module.

How to use this module:

  1. Download uc_gfxbtn.zip.
  2. Next place your "Add to Cart" image in the uc_gfxbtn folder.
  3. Next, edit the uc_gfxbtn.module. Specify the image size and replace the "/add-to-cart.jpg" with the name of your image.
  4. To activate this module, simply drop it in your module directory.
  5. Scrolldown to the Ubercart -Extras section and enable Primal Media "add to cart" as image.

That's it. Alll your Ubercart "Add to Cart" buttons should now be replaced by the custom image you put in the uc_gfxbtn folder.

This Drupal / Ubercart module has been tested across platforms and the major browsers (Internet Explorer, Firefox, Safari). 

I hope this makes your Ubercart experience easier. I look forward to hearing any feedback or improvements on this module.

Comments

Got it working, Just had to set an absolute path to my image... Thanks Great module!
Great article and great module. Thanks a whole bunch
One question, Should the path to the image be /var/www/html/path/to/module/image or the way the web server sees it /path/to/module/image or just relative image
Ok, figured it out I just want to post it here in case people have the same question in the future. The image location works when you put the image in the "uc_gfxbtn" folder and then when your specifying where the image is just use the name of the file and append a / to the beginning like so: "/image.png". This seems to work no problems.

Add a comment

This field will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <a> <em> <strong><ul> <ol> <li>
blog