7

I am using custom theme and trying to move the "product.info.price" block before the addtocart button.

I have tried, direct into addtocart.phtml file but not working.

<?php echo $this->getPriceHtml($_product) ?>

app\design\frontend\my_package\my_theme\Magento_Catalog\templates\product\view\addtocart.phtml

If I used :

<move element="product.info.price" destination="product.info.addtocart" />

Then it moves the price but it only appears on simple products without custom options.

If I used :

<move element="product.info.price" destination="product.info.addtocart.additional" />

Then it moves the price but it only appears on simple products with custom options.

So, How I can show the price block for both simple product and simple product with custom options.

Improve this question
0

4 Answers 4

Reset to default
20

Go to below location

Magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view

Copy file with Name addtocart.phtml & paste it to below location in your theme

Magento_root/app/design/frontend/{Package}/{theme}/Magento_Catalog/templates/product/view

Put the below code into the file above this <div class="actions"> present at around line no.31 .

<?php echo $this->getLayout()
          ->createBlock('Magento\Catalog\Pricing\Render',
                  "product.price.final",
                    [
                        'data' => [
                            'price_render' => 'product.price.render.default',
                            'price_type_code' => 'final_price',
                            'zone' => 'item_view'
                        ]
                   ]
                  )
          ->toHtml();?>

Now go to the below location

Magento_root/app/design/frontend/Package/theme/Magento_Catalog/layout/

Put the below code into the file with name 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>
         <referenceBlock name="product.price.final" remove="true"/>
    </body>
</page>

Note: Put your cache disabled or run the below command while you are doing this changes

php bin/magento cache:flush
Improve this answer
2
  • 1
    Thanks, this solution works well. Please upvote this question so other can get help.
    – Suman Singh
    Commented Feb 26, 2018 at 4:42
  • This work for me, but how to add the Incl Tax and Excl Tax text after the each price.
    – kiran kumar
    Commented Sep 22, 2021 at 12:04
3

Follow Below given two instructions

1.Go to the below file

Magento_root/app/design/frontend/Package/theme/Magento_Catalog/layout/

Open/create file with name catalog_product_view.xml

Put below code into it

<?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>
         <move element="product.info.price" destination="product.info.addtocart" before="-"/>
    </body>
</page>

2.Go to the below file

Magento_root/app/design/frontend/Package/theme/Magento_ConfigurableProduct/layout/

Open/create file with name catalog_product_view_type_configurable.xml

Put below code into it

<?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>
         <move element="product.info.price" destination="product.info.addtocart.additional" before="-"/>
    </body>
</page>

Note: Put your cache disabled or run the below command while you are doing this changes

php bin/magento cache:flush
Improve this answer
6
  • I am working on simple product and simple product with custom options not configurable products.
    – Suman Singh
    Commented Feb 23, 2018 at 9:27
  • Is it okay for you to have the product.info.extrahint below the Add-to cart button & above the Add-to-wishlist,Add-to-Compare,E-mail ?
    – Abhishek Tripathi
    Commented Feb 24, 2018 at 6:12
  • I have already applied it and it works but I do not want to use it
    – Suman Singh
    Commented Feb 24, 2018 at 6:27
  • It place the price after addtocart button.
    – Suman Singh
    Commented Feb 24, 2018 at 6:27
  • You want to move only price or you want to move the price with stock & sku details also?
    – Abhishek Tripathi
    Commented Feb 24, 2018 at 6:33
3

To achieve this you may need to add your code in a separate layout file for the respective product type.

Try creating catalog_product_view_type_configurable.xml file for configurable product and then add the below code in it.

<move element="product.info.price" destination="product.info.addtocart.additional" />

Note: Please check all product pages by product type, there is a default separate layout for bundle products. So if it is not working for any product type you can add a separate layout file for that product type like above for configurable products also the referenceBlock/referenceContainer name may vary for product type.

Improve this answer
8
  • I am working on simple product and simple product with custom options not configurable products.
    – Suman Singh
    Commented Feb 23, 2018 at 9:25
  • It is not working for simple products without custom options
    – Suman Singh
    Commented Feb 23, 2018 at 9:26
  • you have to add for both destinations, for configurable add product.info.addtocart.additional and for simple add product.info.addtocart
    – Piyush
    Commented Feb 23, 2018 at 9:30
  • How it related with configurable? Please explain. Even working only for simple products
    – Suman Singh
    Commented Feb 23, 2018 at 9:37
  • then you can do it vice versa, add product.info.addtocart.additional code in catalog_product_view.xml and create catalog_product_view_type_simple.xml and add code for destination product.info.addtocart
    – Piyush
    Commented Feb 23, 2018 at 9:42
0

DO NOT follow the instructions above if you are using Magento2 EE

"Copy file with Name addtocart.phtml & paste it to below location in your theme"

this will break your catalog product page with an error "An element with a "product.price.final" ID already exists."

instead can try moving it like this

    <move element="product.price.final" destination="product.info.addtocart" before="-"/>

and then using CSS / flex grid you can do a column-reverse and adjust the sort order top to bottom for example.. the other solution is just REPEATING the "product.price.final" in a template causing other layout XML implementation to become a duplicate and error

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.