Change PayPal Express Logo In Shopping Cart

[col_b2]

Hi,

We turned on PayPal Express in our shopping cart page, Magento 2.3.2 Site.

The PayPal button that is displaying is an old small pill style button, like this:

But I want to change it to the more modern style, like this:

 How can I do this?  I have gone thru the settings in backend PayPal admin to customize smart buttons, - I have it as a horizontal rectange responsive gold - button, but the changes aren't taking effect on front end.  

I have deployed static content.

Locale is en_GB.

[Vimal Kumar]

Hi @col_b2 

Can you share the public url?

BTW it can be changed from admin panel.

[col_b2]

Hi,

You can see it here.

I've tried changing it in admin panel, changes don't take effect.  Unless I need to do more than re-deploy static content on front end?

[Vimal Kumar]

Hi @col_b2,

Yes, It looks like it is not reflecting on frontend.

I hope you have already flushed the cache.

php bin/magento cache:flush

Meanwhile you can try alternative below solution:

You can get the template path from where the image is rendering, in the phtml file you can give the "src" path of new image from your theme. Override the phtml file in your custom theme. 

You can get the template path using following way:
https://docs.magento.com/m2/ce/user_guide/system/template-path-hints.html

OR using command line:

Now you can enable or disable Template path hints via Command Line Go to Magento 2 root folder and run the following command:
Enable

php bin/magento dev:template-hints:enable

Disable

php bin/magento dev:template-hints:disable

Then flush cache:

php bin/magento cache:flush

I hope it will help you!

[col_b2]

Thanks,

I have found the file here:

vendor/magento/module-paypal/view/frontend/templates/express/shortcut.phtml

and in it there is the img src:

<img src="<?= $block->escapeHtml($linkImage['src']) ?>" />

which i will change to 

<img src="mysite.com/myimg.jpg"/>

Sound correct?

[Vimal Kumar]

Yes, it should work.

BTW you can also add image path using magento function.  how-to-get-media-url-static-url-link-url-and-base-url-in-magento-2/ 

You should override your phtml file in your custom theme. Otherwise this file will be override when upgrade the magento.

I hope it will help you!

[col_b2]

Ok, let me try that.

Just to be sure, if the original url is

vendor/magento/module-paypal/view/frontend/templates/express/shortcut.phtml

what would be the path in the theme?  I want to make sure I get the path correct.

[Vimal Kumar]

HI @col_b2 

You can test once with the same file once. Then you can override to your theme.

It looks like this file is not exist in your custom theme. You can copy in your theme as mentioned in below utl.

https://magento.stackexchange.com/a/116463

I hope it will help you!

[col_b2]

I fully expected that to work, but it' still showing the old paypal logo.

I have flushed system cache, browser cache, and deployed static content.

This is the code from express/shortcut.phtml

<?php
$labelPosition = '';
if ($block->isOrPositionBefore()) {
    $labelPosition = ' before';
} elseif ($block->isOrPositionAfter()) {
    $labelPosition = ' after';
}
$shortcutHtmlId = $block->escapeHtml($block->getShortcutHtmlId());
$isInCatalogProduct = false;
if ($block->getIsInCatalogProduct()) {
    $isInCatalogProduct = $block->getIsInCatalogProduct();
}
?>
<div data-label="<?= $block->escapeHtml(__('or')) ?>"
     class="paypal checkout <?= /* @noEscape */ $labelPosition ?> paypal-logo
        <?= /* @noEscape */ $shortcutHtmlId ?>"
     data-mage-init='{
     "paypalCheckout": {
                "isCatalogProduct": "<?= /* @noEscape */ !empty($isInCatalogProduct) ? (bool)$isInCatalogProduct : false ?>",
                "shortcutContainerClass": "<?= /* @noEscape */ "." . $shortcutHtmlId ?>"
            }
     }'
    >
    <input type="image" data-action="checkout-form-submit"
           data-checkout-url="<?= $block->escapeUrl($block->getCheckoutUrl()) ?>"
           src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
           alt="<?= $block->escapeHtml(__('Checkout with PayPal')) ?>"
           title="<?= $block->escapeHtml(__('Checkout with PayPal')) ?>"/>
    <?php if ($block->getAdditionalLinkImage()): ?>
        <?php $linkImage = $block->getAdditionalLinkImage(); ?>
        <a href="<?= $block->escapeUrl($linkImage['href']) ?>">
            <img src="{{media url="wysiwyg/pearl_theme/paypallogo.svg"}}" />
        </a>
    <?php endif; ?>
</div>

I can't see why that's not working.

[col_b2]

So it turns out the src had to be in the input, like this

<input type="image" data-action="checkout-form-submit"
           data-checkout-url="<?= $block->escapeUrl($block->getCheckoutUrl()) ?>"
           src="https://yoursite.com/paypallogo.png"
           style="width:100%"
           alt="<?= $block->escapeHtml(__('Checkout with PayPal')) ?>"
           title="<?= $block->escapeHtml(__('Checkout with PayPal')) ?>"/>