modifying button on order pages

[Jack Sinclair]

Hi,

I'd like to modify the buttons on order pages 1 and 2, and for single order pages.

Has anyone gotten a graphical "add to cart" button working on the single order page?

And coupons...about 40% of the people do not know they need to push the button "click to apply", and then send a support ticket saying discount was not applied.

The order page 1 has a number of confusing elements, according to my users...is there a way to modify it to make it easy to fill in and order?

[mikeg]

Hi,

I'd like to modify the buttons on order pages 1 and 2, and for single order pages.

Has anyone gotten a graphical "add to cart" button working on the single order page?

This can be done with CSS for order the pages, I have done it successfully with mine. Not sure if it works for the single order page forms though. (Also, this only works with some later browsers - other ones will still show the standard grey form buttons).

First, you have to create custom order pages. Then simply target the Delavo generated button elements with css by placing the following css code in to your custom order page template header box:


<style type="text/css">

/* button styles */
.ENTER-YOUR-DIV-CLASS-HERE input[type="submit"], input[type="submit"] {
width: ENTER WIDTH OF BUTTON IMAGE HERE;
height: ENTER HEIGHT OF BUTTON IMAGE HERE;
color: #000;
padding: 0 0 0 0;
border: 0px;
text-transform: capitalize;
font-size: 13px;
text-align: center;
background: transparent url("ENTER ABSOLUTE URL TO YOUR BUTTON IMAGE HERE") no-repeat 0 0;
}

.ENTER-YOUR-DIV-CLASS-HERE input[type="submit"]:hover, input[type="submit"]:hover {
cursor: hand;
cursor: pointer;
background: transparent url("ENTER ABSOLUTE URL TO YOUR BUTTON IMAGE HERE") no-repeat 0 0;
}

</style>


You will need to tweak and edit the css above to suit your needs. But this is basically how you target the order page buttons to make them images (well, give them background images anyway).

Hope this helps. :-)

Mike