Quantity + Product Image creates a mess

  • Profile Image
    burak2102
    Asked on June 30, 2012 at 03:38 PM
  • Profile Image
    abajan
    Answered on June 30, 2012 at 04:52 PM

    Yes, there's a solution. I'll post it later today/tonight.

  • Profile Image
    abajan
    Answered on June 30, 2012 at 11:09 PM

    Okay, please do the following:

    1. Load the form into the form builder and click its payment field

    2. In the toolbar at the top, click Label Align > Left

    3. With the payment field still selected, click its Wizard icon

    4. When the wizard pops up, click Next > Next > Add New Product

    5. Name the product, give it a price of zero (0), enter an image URL (you may use one of the image URLs already used for another product) and click Save Product

    6. Give the new product a quantity option just like you did with the other products

    7. Click and drag the new product from the bottom of the list to the top

    8. Click Next > Finish

    9. Inject the following CSS:

    .form-header {
    color: #FD8F29;
    }

    #label_8 {
    padding-bottom: 0;
    margin-bottom: -100px;
    }

    .form-product-item {
    position: relative;
    padding-left: 62px;
    }

    .form-product-item img {
    position: absolute;
    top: 5px;
    left: -7px;
    }

    .form-product-image,
    #input_8_1028,
    [for="input_8_1028"],
    #input_8_quantity_1028_0,
    [for="input_8_quantity_1028_0"] {
    display: none;
    }

    #id_8 .form-sub-label-container {
    margin-top: -10px;
    }

    That should do it. Please let us know if the result is acceptable or if you need clarification on anything.

  • Profile Image
    burak2102
    Answered on July 01, 2012 at 05:15 PM

    Thank you. That seems to work. I hope with a future update I get rid of the blank product at the top. Thanks for your help.