How can I make my products align beside each other in Purchase order?

  • Profile Image
    Asked on April 27, 2017 at 08:55 PM

    I made a products purchase form but the list is too long. is there any possible way to make the product boxes align beside each other than under each other? I greatly appreciate it :)

    Thank you & I'll be waiting for your reply.



  • Profile Image
    Answered on April 28, 2017 at 01:31 AM


    You can try achieving this by using this custom CSS code: 

    /*Start: CSS to make 2 column payment field*/

    .form-product-item {

        border : 1px solid #EFEFEF;

        margin : 1px;

        float : center;

        width : 293px;

        vertical-align : top;

        padding-bottom: 20px !important;


    .form-product-item + br {

        display : none;


    br + b {

        float : right;

        padding-top : 20px;


    .form-payment-total {

        line-height : 50px;

        margin : 1px;

        border : 0px solid #EFEFEF;

        border-radius : 4px;

        padding : 15px;

        padding-right : 193px;

        padding-left : 6px;

        direction: rtl;


    .form-product-item > div {

        float: right !important;


    .form-product-child-table {

        margin-top: 15px !important;




    You can insert it to your form by following this guide: You can see how the form looks like on this cloned form that I have:

    Let us know if that works. 

  • Profile Image
    Answered on April 28, 2017 at 09:43 AM
    Thank you so much for your help.. It's totally Great ^_^