I need to customize the addtocart.phtml in order to add an extra field for decimal qty.

I want to use the actual input text for quantities in order to use ONLY unit and I need to create another drop down in order to select half quantity. (See picture)

Here is an example of what I need: https://www.fabric.com/buy/eu-376/north-american-wildlife-abstract-ocean

As you can see, in this product page, there is qty in yard and then a drop down for 0 and 1/2 yard.

I need exactly something like that! How can I do it?

PS I don't need to keep track of the inventory, but of course the quantity have to calculate the right price.

Thank you!! enter image description here

2 Answers 2


Alright. I did find a solution, but I would like to know what you guys think about it. It doesn't seem to be the best solution in my opinion, but was the best I found so far.

Basically I created the dropdown, renamed the old qty and created another input text (then hid with css).

Here is my code:

<?php if ($block->shouldRenderQuantity()): ?>
            <div class="field qty">
                <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
                <div class="control">
                    <span class="edit-qty minus" onclick="minusQty('qty')">-</span>
                    <input type="number"
                           onkeypress='return event.charCode >= 48 && event.charCode <= 57'
                           value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
                           title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
                           data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                    <span class="edit-qty plus" onclick="plusQty('qty')">+</span>
            <span class = "yardText">Yards</span>
        <div class="field qty">
                <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
                    <select id = "qty-half" class = "input-text">
                        <option value = "0">0</option>
                        <option value = "0.5">½ </option>
            <span class = "yardText">Half Yard</span>
        <input type ="number" name = "qty" value = "0" id = "sumYard" />

This is the simple javascript (the onClick is used on the add to cart button):

    function calcSum() {
        var num1 = document.getElementById('qty').value;
        var num2 = document.getElementById('qty-half').value;
        var sum = Number(num1) + Number(num2);
        document.getElementById("sumYard").value = sum;

What do you think? Is it a good solution? Do you guys know something better?


  • What if you would hide default input [id="qty"] and populate that qty field using JS code with calculation of those visible input boxes: txtQuantity and ddlSize?
    – Wasim
    Commented Oct 4, 2019 at 4:40

Use custom options functionality. Then you will not face troubles saving this value and save much time. If you especially need to move it near the QTY field - you may use CSS.


Adminarea > Catalog > Products > {Edit your product} > {Section "Customizable Options" }

Then I did sth like this.

enter image description here

After that, I gon on the frontend following result:

enter image description here

Then using CSS just customize it as you like

enter image description here

If you need - you may change options labels (remove text +...$). If you need to add this to many products - just look at catalog_product_option_* tables and generate similar values for all of your products.

  • Uhm, what do you mean? Can you please share more details about it? Thanks! PS, I'm not having a problem in creating the input txt or the dropdown. The problem here is how to add the extra value to the quantity. Commented Oct 3, 2019 at 22:36
  • I put more explanation to my post
    – zhartaunik
    Commented Oct 4, 2019 at 4:48
  • Yes, this looked like a pretty good solution. The problem is that when you add to the cart, the qty doesn't change at all. I need to see the quantity to be like 1.5 if the user puts the 1/2 yds. How can I change the quantity if the user gets the 1/2 yard? Commented Oct 5, 2019 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.