A small issued surfaced with the recent redesign of MyCubeCart.com. The Gooogle Checkout button had a white background, my content area did not. The button looked out of place and I was pressed to find a solution. The Google Checkout API offers a handful of button customization options, a transparent background was one of them.

After digging around in the code a bit, I was pleasantly surprised to see that CubeCart was for the most part aligned to receive the type of customization I was after. A few small updates later, I had my transparent button.

Here’s how I did it.

This modification requires the alteration of the following CubeCart 4 files:

1. cubecart root/modules/altCheckout/Google_Checkout/admin/index.inc.php
2. cubecart root/modules/altCheckout/Google_Checkout/button.php

Part 1 – All Versions CubeCart 4.2.x – 4.3.0

1. Open index.inc.php in a text, html or php editor.

2. Find:

93
94
95
96
97
98
99
100
101
102

  <tr>
    <tr>
    <td align="left" class="tdText"><strong>Button size:</strong></td>
    <td class="tdText">
	<select name="module[size]">
      <option value="large" <?php if($module['size'] == "large") echo "selected='selected'"; ?>>Large</option>
      <option value="medium" <?php if($module['size'] == "medium") echo "selected='selected'"; ?>>Medium</option>
	  <option value="small" <?php if($module['size'] == "small") echo "selected='selected'"; ?>>Small</option>
    </select></td>
  </tr>

3. Add immediately after:

103
104
105
106
107
108
109
110
111
112
113

<!-- BEGIN: MyCubeCart.com Mod -->
  <tr>
    <tr>
    <td align="left" class="tdText"><strong>Button Background Color:</strong></td>
    <td class="tdText">
	<select name="module[bgcolor]">
      <option value="white" <?php if($module['bgcolor'] == "white") echo "selected='selected'"; ?>>White</option>
      <option value="trans" <?php if($module['bgcolor'] == "trans") echo "selected='selected'"; ?>>Transparent</option>
    </select></td>
  </tr>
<!-- END: MyCubeCart.com Mod -->

4. Save file and upload.

Part 2 – All Versions CubeCart 4.2.x – 4.3.0

1. Open button.php in a text, html or php editor.

2. Find (line 167 or 168, determined by version):

168

            return $cart->CheckoutButtonCode($module['size']);

3. Replace with:

168
169
170
171
172
173

// BEGIN: MyCubeCart.com Mod
            return $cart->CheckoutButtonCode($module['size'], $module['bgcolor']);
/* Replaced
            return $cart->CheckoutButtonCode($module['size']);
*/
// END: MyCubeCart.com Mod

4. Save file and upload.

Modification Complete!

To use this feature, login to your CubeCart 4 control panel. Under the Modules heading, click on Alternate Checkouts. From here you will click the configure link next to the Google Checkout logo.

You will see a list of options for configuring this module. You will now have a dropdown menu in place to select the background color of your Google Checkout button!

Please note, the Google Checkout API only permits white and transparent as valid options for the button background color. Do not attempt to expand the color selection beyond what is provided in the tutorial, all attempts will fail to render a button in your stores frontend.