increase/decrease quantity buttons on product and cart page

On the products page and in the cart, there is a + and - symbol to increase or decrease the number of items in the cart. The plus is on the bottom, and the minus is on the top. What would I need to do to change this around? I'd like the plus/increase on top, and minus/decrease on the bottom. Thanks!
Tagged:

Comments

  • Hi,

    Normally -/+ buttons should be on the left/right side of the quantity box, as shown on the attached screen-shot or on following demo page: https://demo.dj-extensions.com/dj-catalog2/categories/computers-tablets/desktop-computers/apple-imac-i7

    If the buttons look different then most likely your template does not support (or poorly supports) Bootstrap v.2 styles, although in order to tell anything more I would need to see your website.
    However, rearranging the order of the buttons so that "plus" and "minus" would swap their positions is not possible without changing either the HTML code (layout) or CSS styles.



  • It looks like a conflict between themler for joomla and dj-catalog2. I put up a plain theme and it displays much closer to your example.
  • Hi,

    I have copied the essential styles from Bootstrap and perhaps they will come in handy:

    .btn-group {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
    *margin-left: .3em;
    }

    .btn-group .input-append,
    .btn-group .input-prepend {
    display: inline-block;
    margin-bottom: 9px;
    vertical-align: middle;
    font-size: 0;
    white-space: nowrap;
    }

    .btn-group .input-append .add-on,
    .btn-group .input-append .btn,
    .btn-group .input-append .btn-group {
    margin-left: -1px;
    }

    .btn-group .input-append .btn,
    .btn-group .input-prepend.btn {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: -1px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    }

    .btn-group .djc_qty_input {
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    position: relative;
    vertical-align: top;
    white-space: nowrap;
    width: 60px;
    }
  • Just had time to test this, thanks so much! I was able to paste this into the custom css section of themler, and everything looks much better.
Sign In or Register to comment.