How To Show VirtueMart’s Quantity Buttons Above Eachother

Recently I was designing a VirtueMart webshop for a customer of mine, and got stuck trying to place the quantity buttons next to the quantity box above eachother, the up button on top, the down button below.

When I searched the forums, I did not manage to find a solutions… was anybody doing this, or was I the only one?

Finally a nice guy on LinkedIn managed to help me out!

The solution is two-fold: quantity_box_general.tpl.php needs to be changed and theme.css needs to be changed (to make it look pretty…).

In the steps below, I assume you are using the default template for VirtueMart. If not, read your template name every time you see the word 'default'.

Step 1

• open file components/com_virtuemart/themes/default/templates/product_details/includes/quantity_box_general.tpl.php in a text editor
• look for these lines at the bottom of this file:

   case "none" :
   default:
    $html .= '<input type="text" class="inputboxquantity" size="4" id="quantity'.$prod_id.'" name="quantity[]" value="'.$quantity.'" />
    <input type="button" class="quantity_box_button quantity_box_button_up" onclick="var qty_el = document.getElementById(\'quantity'.$prod_id.'\'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" />
    <input type="button" class="quantity_box_button quantity_box_button_down" onclick="var qty_el = document.getElementById(\'quantity'.$prod_id.'\'); var qty = qty_el.value; if( !isNaN( qty ) &amp;&amp; qty > 0 ) qty_el.value–;return false;" />
    ';
    break;
  }
   

• replace these lines with the following lines:

   case "none" :
   default:
    $html .= '<table>
  <tr>
  <td><label for="quantity7" class="quantity_box">'.$VM_LANG->_('PHPSHOP_CART_QUANTITY').':&nbsp;</label><input class="inputboxquantity" size="2" id="quantity7" name="quantity[]" value="1" type="text"></td><td>
  <input class="quantity_box_button quantity_box_button_up" onclick="var qty_el = document.getElementById(\'quantity7\'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" type="button">
  <br>
  <input class="quantity_box_button quantity_box_button_down" onclick="var qty_el = document.getElementById(\'quantity7\'); var qty = qty_el.value; if( !isNaN( qty ) &amp;&amp; qty > 0 ) qty_el.value–;return false;" type="button">
  </td>
  </tr>
  </table>
    ';
    break;
  }

 

Step 2

• open file components/com_virtuemart/themes/default/templates/theme.css in a text editor
• look for these lines:

  /* The quantity box beneath the "add to cart" button  */
  .quantity_box { 
   vertical-align: middle;
  }
  .quantity_box_button {
   width:10px;
   vertical-align:middle;
   height:10px;
   background-repeat: no-repeat;
   background-position: center;
     border:1px solid #000;
  }
  .quantity_box_button_down {
   background-image: url(images/down_small.gif);
  }
  .quantity_box_button_up {
   background-image: url(images/up_small.gif);
  }
   

• replace these lines with the following lines:

  /* The quantity box beneath the "add to cart" button  */
  .quantity_box { 
   vertical-align: middle;
  }
  .quantity_box_button {
   width:10px;
   height:10px;
    background-repeat: no-repeat;
    background-position: center;
   vertical-align: middle;
   margin-top: 3px;
   border: none;
  }
  .quantity_box_button_down {
   background-image: url(images/down_small.gif);
   margin-top: 2px;
  }
  .quantity_box_button_up {
   background-image: url(images/up_small.gif);
  }

That is all there is to it!

Have fun!

_____________________________________________________________________________________________

Robin Roelofsen

"I think complexity is mostly sort of crummy stuff that is there because it's too expensive to change the interface."
Jaron Lanier