Customize the Yes No buttons on an Upsell After screen
This setup is not valid for StoreFronts.
Altering the appearance of the Yes No buttons
You may use css to alter the appearance of the Yes No buttons.
The buttons are outputted within the following html block (which is subject to change; test your screens!)
<table class="ucUpsellButtonTable">
<tbody><tr>
<td>
<div id="ucUpsellYesButtonId" class="ucUpsellYesButton">
<input border="0" type="image" class="ucUpsellYesButtonOverlay" alt="Yes" src="/checkout/images/spacer.gif" name="yes">
</div>
</td>
<td>
<div id="ucUpsellNoButtonId" class="ucUpsellNoButton">
<input border="0" type="image" class="ucUpsellNoButtonOverlay" alt="No" src="/checkout/images/spacer.gif" name="no">
</div>
</td>
</tr>
</tbody></table>
The buttons are input images pointing to spacers. They are surrounded by <div> blocks that use a background image to show the actual button. This allows for maximum browser compatibility.
Button | Attribute | CSS Class Name |
|---|---|---|
Yes | background image | ucUpsellYesButton |
Yes | size (height and width) | ucUpsellYesButton and ucUpsellYesButtonOverlay |
No | background image | ucUpsellNoButton |
No | size (height and width) | ucUpsellNoButton and ucUpsellNoButtonOverlay |
Here's an example you could add to a style tag with the <before> section, placed in between opening and closing (<head> ...button code here... </head>) head tags as the first part of the of the HTML section of the upsell offer editor:
.ucUpsellNoButton {
background-image: url(https://www.mysite.com/reallycoolbuttons/no.gif);
background-repeat: no-repeat;
height: 45px;
width: 82px;
}
.ucUpsellNoButtonOverlay {
height: 45px;
width: 82px;
}
.ucUpsellYesButton {
background-image: url(https://www.mysite.com/reallycoolbuttons/yes.gif);
background-repeat: no-repeat;
height: 45px;
width: 82px;
}
.ucUpsellYesButtonOverlay {
height: 45px;
width: 82px;}
Swapping the order of the Yes No button
Some merchants wish to make the No button appears before the Yes button on a page. This requires additional html code, but can be achieved.
First, hide the default buttons.
.ucUpsellButtonTable { display:none; }
In the footer section of your upsell html, add the following, styling them as you see fit.:
<table>
<tr>
<td>
<img src="/checkout/images/upsellNo.gif" onclick="ucSelectNo()" style="cursor:pointer">
</td>
<td>
<img src="/checkout/images/upsellYes.gif" onclick="ucSelectYes()" style="cursor:pointer">
</td>
</tr>
</table>
This will display the two buttons, with the No button first. The onclick events will handle the form submission.
Related Documention