Ubercart - Style 'Add to Cart' button

Kevin's picture

Q: How can I change the default ubercart 'add to cart' button on the 'add to cart' form to a nice image button of my choosing?

A: The deafult button can be 'morphed' into an image button through the application of some crafty css as follows:

We love ubercart, it's just the thing for building eCommerce sites with drupal, however when straight out of box the it's just not much of a looker - it is more or less guaranteed to clash with your nice modern web design! One aspect that you may want to improve is the look of its 'Add to Cart' button on the 'Add to Cart' form. By default it's a fairly dowdy and old-fashioned submit button - but it can be quite easily 'replaced' by an image button.

There are different ways to achieve this, most revolve around altering the form's HTML through hooks and the like, but it can also be achieved more easily through CSS as this thread indicates:

http://www.ubercart.org/forum/support/7373/how_do_i_skin_my_add_cart_but...

See post #2 (thanks Francois!) I got this to work well for me with just a few changes as follows:


.add-to-cart .form-submit { /* hide the submit button and put in a fancy little image, instead */
background-color: transparent; /* hide standard button display stuff */
border: none; /* hide standard button display stuff */
display:block;
height:27px;
background:url(images/addtocart.gif) no-repeat;
overflow:hidden;
text-decoration:none;
color:#fff;
cursor: pointer; /* make the mouse give the right feedback - IE stupidity, again */
}

Notice the changes to the CSS class names, they must have changed them since 2008. This CSS hides the original button (except for its text) and places our 'image button' in its place. Our image provides the button's background while the button's text is still provided by the original (hidden) button, its colour has been changed to white.

To get this to work for you, you will need to provide an image for the button (background:url(images/addtocart.gif) no-repeat;) and may need to play with the font colour and the height attribute. Hopefully with some small tweaks like this you can get the button looking the way you want!

Share this post: 

Recent Work

Some of Ireland's biggest brands use Pride Design to Design, Build, Manage, Market and Maintain their websites.

Website design for St.Patricks Credit Union in Dublin, Including Loan Calculators.

Website design and development for a step by step wedding and other stationary ordering website f

New website designed and developed for Cork's newest café, which is based in Merchants Quay in Co

New Website design for Pain Relief clinic based in Cork City.

Website for a busy Dublin city centre pub.

We redrafted the Ballymaloe house website to modernise the look and feel of the site and to also

We revamped the website for the Ballymaloe Cookery School.

We revamped the Cully & Sully website onto Drupal.

Rachel Allen was brought up in Dublin and left home at eighteen to study at the world-famous Ball

Clóna Dairy Products are a Dairy Company based in Clonakilty, Co. Cork, since 1919.

Project Arts Centre is Ireland’s leading centre for the presentation and development of c