I have tried the following code to move add to cart buttons below image in catalog_product_view.xml

Button has moved below that element but Add to Cart Button is not Working anymore.

  <move element="product.info.addtocart" destination="product.info.media" after="product.media"/>
  • Do you getting any console error? Is that shows cursor pointer while hover on button?
    – kunj
    Jun 20, 2018 at 2:27
  • No there is no console error, and it shows cursor point while on hover, add to cart button is clickable as well, but it is not adding product to cart.
    – Vinay
    Jun 20, 2018 at 6:00

1 Answer 1


Try this:

    <move element="product.info" destination="product.info.media" after="product.media"/>

Actually, in your code button out from add to cart form so form could not submit.

  • Welcome, happy to help you!
    – kunj
    Jun 20, 2018 at 12:01
  • Hi kunj, on configurable products swatches are also coming before add to cart button after putting the above code, how can i move only add to cart button below images on configurable products. and swatches in product.info.main element. Help in this please.
    – Vinay
    Jun 20, 2018 at 12:31
  • Solved, by adding, the following code " <move element="product.info.options.wrapper" destination="product.info.main" after="product.info.price"/> "
    – Vinay
    Jun 20, 2018 at 13:42
  • Add to Cart is still not working in this case :( Still Confused. Please help @kunj
    – Vinay
    Jun 20, 2018 at 14:20
  • Actually, color swatch adding custom input field in that form so we can not move that swatch by XML.
    – kunj
    Jun 20, 2018 at 14:21

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.