How to use combinations table as a default attributes select tool?

Hi, I would like to be able to customize the table as in the example of your website, as I can do to change + and - by arrow up down arrow and make the button to add to the cart of the same size than the units box and the up and down arrow? The idea is to leave it as the "example of implementation with custom desing" of combinations table module

 

Thanks!!

Hello,

1) go to design > positions
2) search there for position "displayFooterProduct"
3) unhook module "combinations tab" from this position: https://i.imgur.com/JWNWgqe.png
4) then click on "transplant a module" button: https://i.imgur.com/OdzcdLM.png 
5) on next page select module and transplant it to position: displayProductAdditionalInfo

Module configuration
6) activate option "Display image"
7) activate option "Hide table header"
8) set Attributes display method to "All attributes in one column"
9) activate "Display combination name" 
10) activate "Display add to cart"
11) activate "Display add to cart quantity field"
12) activate "Display [+] and [-] near quantity field"
13) aciavte "Hide default add to cart feature" + "Hide it only if product has combinations"


Then it will be required to alter module styles.
at the end of file: /modules/combinationstab/css/combinationstab.css paste these styles

#ct_matrix .qty {
    float: left;
    border: 1px solid #c0c0c0;
    font-size: 20px;
    padding: 10px 10px;
    width: 50px;
}

#ct_matrix .ctd_addtocart {
    width:200px!important;
}

#ct_matrix .decrease_quantity {
    display:none;
}
#ct_matrix .increase_quantity {
    display:none;
}
#ct_matrix .ct_submit {
    font-size:20px;
    top:1px;
    position:relative;
    padding:7px 5px;
}

the effect will be like: