How to Remove the Update Button

Some merchants with a single item in their store want to remove the update button on the single page checkout. This tutorial will walk you through step by step on how to remove a button.

Prerequisites

This tutorial assumes that you have:

• FireFox
• FireBug Plugin

Identifying the Button

First we need to identify the button that we want to remove. In this tutorial we are going to remove the update button on the single page checkout. You can see the button that will be removed highlighted below.

Next we need to use the awesome FireBug plugin for FireFox to identify the plugin. The steps are:

1. Click F12 to start FireBug (it will open in a panel at the bottom of the browser)
2. Click on the HTML tab
3. Click the highlight tool (box with an arrow shown in the image below)
4. Click on the element we want to inspect (the update button)
5. Look at which CSS styles are associatec with the element. The style should be uc<button name>ButtonOverlay as shown below.

The next step is to look at the standard UltraCart checkout style sheet located at https://secure.ultracart.com/checkout/checkout2.css

When we scroll down the style sheet we see there are two styles associated with this button (ucUpdateButton and ucUpdateButtonOverlay) as shown below.

Removing the button

What we are going to do is change the width and height of both of these styles to 0px (zero pixels) and then override the default style sheet in the header of the screen branding. So first navigate to the single page checkout screen branding under:

Then scroll to the bottom of the header and insert your style tag with the 0px attributes as shown below.

Now if you go back to your single page checkout by adding an item you will notice that the update button has disappeared as shown below.

Removing the Continue Shopping Button

The same technique can be done with the continue shopping button.  The following snippet will hide the continue shopping button as well.

<style type="text/css">
<!--
.ucContinueShoppingButton {
    background-image: url(/checkout/images/spacer.gif);
    background-repeat: no-repeat;
    height: 1px;
    width: 1px;
}
.ucContinueShoppingButtonOverlay {
    height: 1px;
    width: 1px;
}
-->
</style>