Bolding or changing the color of "Continue Shopping Url"

Question

I took the code from inside: vendor/magento/module-checkout/view/frontend/templates/cart/noItems.phtml

and i'm overiding it here: app/design/frontendvendor/namespace/module/Magento_Checkout/templates/cart/noItems.phtml

I usually don't work on a lot of frontend css stuff so i feel like this is a super dumb question. Here's what i've done below and it's not reflecting on the frontend.

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

/**  @var $block \Magento\Checkout\Block\Cart */
?>
<div class="cart-empty">
    <?= $block->getChildHtml('checkout_cart_empty_widget') ?>
    <p><?= $block->escapeHtml(__('You have no items in your shopping cart.')) ?></p>
    <p><?= $block->escapeHtml(
        __(
            'Click <a href="%1" style="color:red;">here</a> to continue shopping.',
            $block->escapeUrl($block->getContinueShoppingUrl())
        ),
        ['a']
    ) ?>
    </p>
    <?= $block->getChildHtml('shopping.cart.table.after') ?>
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Checkout/js/empty-cart": {}
    }
}
</script>

All I'm trying to do is make "here" more noticeable by turning it red or bold so i did some inline styling.. it doesn't matter but i've failed. Probably something to do with less i'd imagine???

Answer 1

escapeHtml will not allow style tag. So, if you want to forcefully add that style attribute inside a tag. You can do like this below way :

Old Content :

<p><?= $block->escapeHtml(
        __(
            'Click <a href="%1" style="color:red;">here</a> to continue shopping.',
            $block->escapeUrl($block->getContinueShoppingUrl())
        ),
        ['a']
    ) ?>

Replace Content :

<p><?= 
    __(
        'Click <a href="%1" style="color:red;">here</a> to continue shopping.',
        $block->escapeUrl($block->getContinueShoppingUrl())
    )
?>

After that clean cache and check it.

Answer 2

As you only need to highlight here text on the empty Shipping cart page, override .phtml file is not good idea because this file will be updated in the future by magento codebase and you are able to highlight here text by CSS: There are 2 options:

1. If you would like to implement on the theme, create < your theme dir>/Magento_Checkout/web/css/source/_extend.less file.

2. If you would like to implement on the module, create < your module dir>/view/frontend/web/css/source/_extend.less file.

Add this code:

& when (@media-common = true) {
.checkout-cart-index {
    .cart-empty {
        a {
           color: red;
        }
    }
}

Btw, your override file path is incorrect, so you can't see your override in frontstore. app/design/frontendvendor/namespace/module/Magento_Checkout/templates/cart/noItems.phtml

it should be: app/design/frontendvendor/namespace/Magento_Checkout/templates/cart/noItems.phtml

Answer 3

It should work, first check is that file correctly override change some content and cache flush and check (if your working on developer mode), if not change the content then check override path correctly it should be

app\design\frontend\<VENDOR_NAME>\<THEME_NAME>\Magento_Checkout\templates\cart\noItems.phtml