cancel
Showing results for 
Search instead for 
Did you mean: 

Remove Label and Edit PlaceHolder in Checkout Page

SOLVED
   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Remove Label and Edit PlaceHolder in Checkout Page

I want to remove the input box labels and edit the placeholder text in the input text in the checkout page.

Please Suggest a solution for this.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hello @anand_v,

 

Please add below files in your theme directory

app/design/frontend/{vendor}/{theme}/Magento_Ui/web/template/form/element/input.html

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: ( element.dataScope == 'shippingAddress.street.0' ? 'Street Address' : element.label ),
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />

app/design/frontend/{vendor}/{theme}/Magento_Ui/web/template/form/field.html

<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">



    <div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
        <!-- ko ifnot: element.hasAddons() -->
            <!-- ko template: element.elementTmpl --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.hasAddons() -->
            <div class="control-addon">
                <!-- ko template: element.elementTmpl --><!-- /ko -->

                <!-- ko if: element.addbefore -->
                    <label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
                <!-- /ko -->

                <!-- ko if: element.addafter -->
                    <label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
                <!-- /ko -->
            </div>
        <!-- /ko -->

        <!-- ko if: element.tooltip -->
            <!-- ko template: element.tooltipTpl --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.notice -->
            <div class="field-note" data-bind="attr: { id: element.noticeId }">
                <span data-bind="text: element.notice"/>
            </div>
        <!-- /ko -->

        <!-- ko if: element.error() -->
            <div class="field-error" data-bind="attr: { id: element.errorId }" generated="true">
                <span data-bind="text: element.error"/>
            </div>
        <!-- /ko -->

        <!-- ko if: element.warn() -->
            <div role="alert" class="message warning" data-bind="attr: { id: element.warningId }" generated="true">
                <span data-bind="text: element.warn"/>
            </div>
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->

After adding your theme, Please load checkout page and you will find above file in network section https://www.screencast.com/t/HCUNsFSFMBo Please open it and check view source, If not changed then remove that file at that location and hard refresh on it - Perform for both files. 

 

For make sure, You can change temporarily on core file for checking, here is the location of both files

- /vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html

- /vendor/magento/module-ui/view/frontend/web/templates/form/field.html

 

Please check result here https://www.screencast.com/t/e2v9FzJlDenn

 

--
If my answer is useful, please Accept as Solution & give Kudos

 

 

View solution in original post

20 REPLIES 20

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hello @anand_v,

 

Please create file in your theme on below location 

app/design/frontend/{vendor}/{theme}/Magento_Checkout/templates/cart/item/default.phtml

after create a file, Please add below content on it.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */

$_item = $block->getItem();
$product = $_item->getProduct();
$isVisibleProduct = $product->isVisibleInSiteVisibility();
/** @var \Magento\Msrp\Helper\Data $helper */
$helper = $this->helper('Magento\Msrp\Helper\Data');
$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);
?>
<tbody class="cart item">
    <tr class="item-info">
        <td data-th="<?= $block->escapeHtml(__('Item')) ?>" class="col item">
            <?php if ($block->hasProductUrl()):?>
                <a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"
                   title="<?= $block->escapeHtml($block->getProductName()) ?>"
                   tabindex="-1"
                   class="product-item-photo">
            <?php else:?>
                <span class="product-item-photo">
            <?php endif;?>
            <?= $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml() ?>
            <?php if ($block->hasProductUrl()):?>
                </a>
            <?php else: ?>
                </span>
            <?php endif; ?>
            <div class="product-item-details">
                <strong class="product-item-name">
                    <?php if ($block->hasProductUrl()):?>
                        <a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"><?= $block->escapeHtml($block->getProductName()) ?></a>
                    <?php else: ?>
                        <?= $block->escapeHtml($block->getProductName()) ?>
                    <?php endif; ?>
                </strong>
                <?php if ($_options = $block->getOptionList()):?>
                    <dl class="item-options">
                        <?php foreach ($_options as $_option) : ?>
                            <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
                            <dt><?= $block->escapeHtml($_option['label']) ?></dt>
                            <dd>
                                <?php if (isset($_formatedOptionValue['full_view'])): ?>
                                    <?= /* @escapeNotVerified */ $_formatedOptionValue['full_view'] ?>
                                <?php else: ?>
                                    <?= /* @escapeNotVerified */ $_formatedOptionValue['value'] ?>
                                <?php endif; ?>
                            </dd>
                        <?php endforeach; ?>
                    </dl>
                <?php endif;?>
                <?php if ($messages = $block->getMessages()): ?>
                    <?php foreach ($messages as $message): ?>
                        <div class="cart item message <?= /* @escapeNotVerified */ $message['type'] ?>"><div><?= $block->escapeHtml($message['text']) ?></div></div>
                    <?php endforeach; ?>
                <?php endif; ?>
                <?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
                <?php if ($addInfoBlock): ?>
                    <?= $addInfoBlock->setItem($_item)->toHtml() ?>
                <?php endif;?>
            </div>
        </td>

        <?php if ($canApplyMsrp): ?>
            <td class="col msrp" data-th="<?= $block->escapeHtml(__('Price')) ?>">
                <span class="pricing msrp">
                    <span class="msrp notice"><?= /* @escapeNotVerified */ __('See price before order confirmation.') ?></span>
                    <?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
                    <a href="#" class="action help map" id="<?= /* @escapeNotVerified */ ($helpLinkId) ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?= /* @escapeNotVerified */ $helpLinkId ?>","productName": "<?= /* @escapeNotVerified */ $product->getName() ?>","showAddToCart": false}}'>
                        <span><?= /* @escapeNotVerified */ __("What's this?") ?></span>
                    </a>
                </span>
            </td>
        <?php else: ?>
            <td class="col price" data-th="<?= $block->escapeHtml(__('Price')) ?>">
                <?= $block->getUnitPriceHtml($_item) ?>
            </td>
        <?php endif; ?>
        <td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
            <div class="field qty">
                <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
                    <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
                </label>
                <div class="control qty">
                    <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                           name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                           data-cart-item-id="<?= $block->escapeHtml($_item->getSku()) ?>"
                           value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                           type="number"
                           size="4"
                           title="<?= $block->escapeHtml(__('Qty')) ?>"
                           class="input-text qty"
                           data-validate="{required:true,'validate-greater-than-zero':true}"
                           data-role="cart-item-qty"/>
                </div>
            </div>
        </td>

        <td class="col subtotal" data-th="<?= $block->escapeHtml(__('Subtotal')) ?>">
            <?php if ($canApplyMsrp): ?>
                <span class="cart msrp subtotal">--</span>
            <?php else: ?>
                <?= $block->getRowTotalHtml($_item) ?>
            <?php endif; ?>
        </td>
    </tr>
    <!--<tr class="item-actions">
        <td colspan="100">
            <div class="actions-toolbar">
                <?/*= /* @escapeNotVerified */ $block->getActions($_item) */?>
            </div>
        </td>
    </tr>-->
</tbody>

Now, Please run below command in root directory

rm -rf pub/static/adminhtml/ pub/static/frontend/
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
php bin/magento cache:clean

Here, You can see the result https://www.screencast.com/t/k7yAng21I

2018-09-25_12-01-20.jpg

--
If my answer is useful, please Accept as Solution & give Kudos

 

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hi @gelanivishal.

I want to remove the label and edit the placeholder from the checkout page not from the cart page.

PFB the screenshot link for your reference.

https://codeminc-my.sharepoint.com/:i:/g/personal/anand_codem_com/Ebb4oF3byuBFuO8SLe97dZ4BiGUF7bp3Y0...

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hello @anand_v,

 

Above links required sign in microsoft, Can you please upload any other service or remove protection on it?

 

Thank you.

Re: Remove Label and Edit PlaceHolder in Checkout Page

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hello @anand_v,

 

Please add below files in your theme directory

app/design/frontend/{vendor}/{theme}/Magento_Ui/web/template/form/element/input.html

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: ( element.dataScope == 'shippingAddress.street.0' ? 'Street Address' : element.label ),
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />

app/design/frontend/{vendor}/{theme}/Magento_Ui/web/template/form/field.html

<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">



    <div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
        <!-- ko ifnot: element.hasAddons() -->
            <!-- ko template: element.elementTmpl --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.hasAddons() -->
            <div class="control-addon">
                <!-- ko template: element.elementTmpl --><!-- /ko -->

                <!-- ko if: element.addbefore -->
                    <label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
                <!-- /ko -->

                <!-- ko if: element.addafter -->
                    <label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
                <!-- /ko -->
            </div>
        <!-- /ko -->

        <!-- ko if: element.tooltip -->
            <!-- ko template: element.tooltipTpl --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.notice -->
            <div class="field-note" data-bind="attr: { id: element.noticeId }">
                <span data-bind="text: element.notice"/>
            </div>
        <!-- /ko -->

        <!-- ko if: element.error() -->
            <div class="field-error" data-bind="attr: { id: element.errorId }" generated="true">
                <span data-bind="text: element.error"/>
            </div>
        <!-- /ko -->

        <!-- ko if: element.warn() -->
            <div role="alert" class="message warning" data-bind="attr: { id: element.warningId }" generated="true">
                <span data-bind="text: element.warn"/>
            </div>
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->

After adding your theme, Please load checkout page and you will find above file in network section https://www.screencast.com/t/HCUNsFSFMBo Please open it and check view source, If not changed then remove that file at that location and hard refresh on it - Perform for both files. 

 

For make sure, You can change temporarily on core file for checking, here is the location of both files

- /vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html

- /vendor/magento/module-ui/view/frontend/web/templates/form/field.html

 

Please check result here https://www.screencast.com/t/e2v9FzJlDenn

 

--
If my answer is useful, please Accept as Solution & give Kudos

 

 

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hi @gelanivishal.

Whether this code is for all input text box or for one field ?

 

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hello @anand_v,


This is for all input box, Please check here https://www.screencast.com/t/e2v9FzJlDenn

 

--
If my answer is useful, please Accept as Solution & give Kudos

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hi @gelanivishal.

I have tried by changing the core file and flushed my cache. But the placeholder is not reflecting in the checkout page. 

Can you please provide a video for implementing these steps?

Re: Remove Label and Edit PlaceHolder in Checkout Page

Hello @anand_v,

 

I have already mentioned here. 

 

Have you tried it?

After adding your theme, Please load checkout page and you will find above file in network section https://www.screencast.com/t/HCUNsFSFMBo Please open it and check view source, If not changed then remove that file at that location and hard refresh on it - Perform for both files. 

 

 

Thank you.