Remove Label and Edit PlaceHolder in Checkout Page

[anand_v]

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.

[gelanivishal]

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

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

[anand_v]

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...

[gelanivishal]

Hello @anand_v,

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

Thank you.

[anand_v]

Hi @gelanivishal.

Please use the below link.

https://www.screencast.com/t/f5NLUj3VU

[gelanivishal · Accepted solution]

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

[anand_v]

Hi @gelanivishal.

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

[gelanivishal]

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

[anand_v]

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?

[gelanivishal]

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.