Magento 2 - How to move the product price block before addtocart button?
-
14-04-2021 - |
Frage
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
.
Lösung
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
Andere Tipps
To achieve this you may need to add your code in separate layout file for respective product type.
Try creating catalog_product_view_type_configurable.xml
file for configurable product and then add below code in it.
<move element="product.info.price" destination="product.info.addtocart.additional" />
Note: Please check all product page by product type, there is default separate layout for bundle products. So if it is not working for any product type you can add separate layout file for that product type like above for configurable products also the referenceBlock/referenceContainer name may vary for product type.
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
What worked for me is following:
At location
app/design/frontend/Vendor/mytheme/Magento_Catalog/layout/catalog_product_view.xml
<move element="product.info.price" destination="product.info.options.wrapper.bottom" before="-" />