I want to display quantity in mini cart as following:

enter image description here

This is how it displays now.The field Qty is a text field

enter image description here

I want to display it as qty X productprice

This is the code

                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                           for: 'cart-item-'+item_id+'-qty'}"></label>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
                           class="item-qty cart-item-qty"
                    <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           title: $t('Update')
                            style="display: none">
                        <span data-bind="i18n: 'Update'"></span>

Please suggest some methods.

2 Answers 2


The minicart is powered through Knockout Js - all i would do is the following:

Make the correct file inside of the corresponding theme file:


Then find section you wish to change, this would be the same as your code above with some slight modifications: I have also added in the product price here, binding the item price into a span, you'll need to do some styles to fix the layout.

<div class="details-qty qty">
    <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
   <span data-bind="html: item.product_price"></span>
   <span data-bind="text: qty"></span>

You can simply pass through the QTY as a text value into your element. This will then render out the quantity that is currently on this product. Passing through the item.product_price as html will render into the element you have data-bind it to.

Hope you get it sorted with this :)


In Magento2, minicart is driven by Knockout Js. For making changes in this part, you can override the responsible phtml file in your theme. Please copy


to your theme as follow:


Now place the following code at the desired section:

<div class="item-qty qty">
    <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
   <span><!-- ko text: qty --><!-- /ko --></span>

Refresh the cache and check for the changes. If the changes does not reflect, please run the following command from the bin directory using command prompt:

php magento setup:static-content:deploy

Hope this will help.

  • I want to display product price too as QTY :2X product price.So I have added the following line '<span><!-- ko text: product_price --><!-- /ko --></span>'. But it shows product price with its html content too. How is it possible to display price only.
    – Vindhuja
    Jun 2, 2017 at 7:34

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.