cancel
Showing results for 
Search instead for 
Did you mean: 

How do I add custom text under the price in frontend?

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

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

How do I add custom text under the price in frontend?

Hey Guys,

 

since I use Magento ver. 2.1.7. I Want to add a simple Text under every price in the frontend. 
The Text has to inform the customer, that the price includes 19% Taxes and has to include a link to the shippingcosts page. I need to do that, so my site fits to the german laws.

Can anybody help me with this issue, I'm struggling since a week to solve this problem. 

 

 

Thank you in advance! 

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How do I add custom text under the price in frontend?

Hi @BlackstoneFatih

 

Method - 1:  If you want to display custom text only in product view page, then create catalog_product_view.xml in your custom theme

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="Magento\Framework\View\Element\Template" name="custom.text" template="Magento_Catalog::view/customtext.phtml" after="product.info.price"/>
        </referenceContainer>
    </body>
</page>

 

Now create customtext.phtml and add your custom text

 

app/design/frontend/Vendor/theme/Magento_Catalog/templates/view/customtext.phtml

 

Now flush the cache and check

 

Method - 2: If you want to display custom text after price at everywhere then override final_price.phtml

 

FROM

vendor/magento/module-catalog/view/base/templates/product/price/final_price.phtml

TO

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/price/final_price.phtml

 

Method - 3: Last and the most simple way to do it with CSS

 

 

.product-info-price .price:after {
    content: 'Custom Text';
}

 

 If Issue Solved, Click Kudos/Accept As solutions.

 

View solution in original post

7 REPLIES 7

Re: How do I add custom text under the price in frontend?

Hi @BlackstoneFatih

 

Method - 1:  If you want to display custom text only in product view page, then create catalog_product_view.xml in your custom theme

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="Magento\Framework\View\Element\Template" name="custom.text" template="Magento_Catalog::view/customtext.phtml" after="product.info.price"/>
        </referenceContainer>
    </body>
</page>

 

Now create customtext.phtml and add your custom text

 

app/design/frontend/Vendor/theme/Magento_Catalog/templates/view/customtext.phtml

 

Now flush the cache and check

 

Method - 2: If you want to display custom text after price at everywhere then override final_price.phtml

 

FROM

vendor/magento/module-catalog/view/base/templates/product/price/final_price.phtml

TO

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/price/final_price.phtml

 

Method - 3: Last and the most simple way to do it with CSS

 

 

.product-info-price .price:after {
    content: 'Custom Text';
}

 

 If Issue Solved, Click Kudos/Accept As solutions.

 

Re: How do I add custom text under the price in frontend?

Thank you very much! This solved all my problems! 

 

Re: How do I add custom text under the price in frontend?

okay, I tried to display the Text in the product listing page also, but method 2 won't work for me :/

Re: How do I add custom text under the price in frontend?

Hello Prince I've been able to create a custom attribute and place the price under the text my issue is getting the attribute inline with the price like so.

 

per deadlock.PNG

Is there a way to add a custom attribute here

Magento/Catalog/Templates/Product/Price/Amount/Default.phtml

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

// @codingStandardsIgnoreFile

?>

<?php /** @var \Magento\Framework\Pricing\Render\Amount $block */ ?>

<span class="price-container <?= /* @escapeNotVerified */ $block->getAdjustmentCssClasses() ?>"
<?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>
<?php if ($block->getDisplayLabel()): ?>
<span class="price-label"><?= /* @escapeNotVerified */ $block->getDisplayLabel() ?></span>
<?php endif; ?>
<span <?php if ($block->getPriceId()): ?> id="<?= /* @escapeNotVerified */ $block->getPriceId() ?>"<?php endif;?>
<?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes() . '"' : '' ?>
data-price-amount="<?= /* @escapeNotVerified */ $block->getDisplayValue() ?>"
data-price-type="<?= /* @escapeNotVerified */ $block->getPriceType() ?>"
class="price-wrapper <?= /* @escapeNotVerified */ $block->getPriceWrapperCss() ?>">
<?= /* @escapeNotVerified */ $block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()) ?>
</span>

/*   If Code added here it falls in-line */ 


<?php if ($block->hasAdjustmentsHtml()): ?>
<?= $block->getAdjustmentsHtml() ?>
<?php endif; ?>
<?php if ($block->getSchema()): ?>
<meta itemprop="price" content="<?= /* @escapeNotVerified */ $block->getDisplayValue() ?>" />
<meta itemprop="priceCurrency" content="<?= /* @escapeNotVerified */ $block->getDisplayCurrencyCode() ?>" />
<?php endif; ?>
</span>

Any suggestions?

Re: How do I add custom text under the price in frontend?

How to apply this condition for all pages?

Re: How do I add custom text under the price in frontend?

@Prince Patel I just created a static cms block, how to call this into below product price?

 

app/design/frontend/Codazon/fastest/grocery_gourmet/Magento_Catalog/layout/catalog_product_view.xml

 

	<referenceContainer name="content"> 
        <block class="Magento\Cms\Block\Block" name="block_identifier"> 
            <arguments> 
            	<argument name="block_id" xsi:type="string">usa_delivery_message</argument> 
            </arguments> 
        </block> 
	</referenceContainer>

The text display but displayed at bottom of the description box, how to show below the price?

Re: How do I add custom text under the price in frontend?

@Prince Patel  I am created a custom static CMS Block and call from the product page, how can i exactly place under price but currently showing under description box.

 

Path : app/design/frontend/Codazon/fastest/grocery_gourmet/Magento_Catalog/layout/catalog_product_view.xml

 

code: (custom code added Botton of the code - usa_delivery_message )

 

 

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="product.info.sku" destination="page.main.title" />
        <move element="product.info.review" destination="page.main.title" after="product.info.sku"/>
        <move element="product.info.stock.sku" destination="product.info.main" after="page.main.title"/>
	<referenceBlock name="catalog.leftnav" remove="true"/>
	<move element="product.info.overview" destination="product.info.main" after="product.info.review" />	
	
	<referenceBlock name="product.info.overview" template="product/view/short_description.phtml">
		<arguments>
            <argument name="at_call" xsi:type="string">getShortDescription</argument>
            <argument name="at_code" xsi:type="string">short_description</argument>
            <argument name="css_class" xsi:type="string">overview</argument>
            <argument name="at_label" translate="true" xsi:type="string">Overview</argument>
            <argument name="title" translate="true" xsi:type="string">Overview</argument>
            <argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
        </arguments>
	</referenceBlock>
	<referenceBlock name="product.info.addto"/>
	<move element="product.info.addto" destination="product.info" after="-" />
	<referenceContainer name="product.info.social">
		<block class="Magento\Catalog\Block\Product\View" name="product.info.social.links" as="social" template="product/view/social.phtml" after="-" />
	</referenceContainer>
	<referenceContainer name="product.info">
		<container name="product.info.staticblock" label="Product Static Block" htmlTag="div" htmlClass="product-info-staticblock" before="-" />							
	</referenceContainer>
	<referenceContainer name="content">
		<container name="product.main.content" htmlTag="div" htmlClass="product-main-content" before='-'></container>					
	</referenceContainer>
	<referenceContainer name="product.main.content">
		<container name="product.info.row" htmlTag="div" htmlClass="row">
			<container name="product.info.left" label="Product Content Left" htmlTag="div" htmlClass="product-info-left col-sm-19" />
			<container name="product.info.right" label="Product Content Right" htmlTag="div" htmlClass="product-info-right col-sm-5" />
		</container>
	</referenceContainer>
	<move element="product.info.media" destination="product.info.left" before='-'/>
	<move element="product.info.main" destination="product.info.left" />

	<referenceContainer name="content"> 
	 		<block class="Magento\Cms\Block\Block" name="block_identifier" after="product.info.price"> 
            	<arguments> 
            		<argument name="block_id" xsi:type="string">usa_delivery_message</argument> 
           		</arguments> 
     		</block> 
    </referenceContainer>
    <move element="block.identifier" destination="product.info.main" after="product.info.price"/>

    </body>
</page>

 

 

Now display under https://i.imgur.com/VjKTKQp.png