Add to Cart form on a non-product node in Drupal(7) Commerce

Add to Cart form on a non-product node in Drupal(7) Commerce

Often clients write pages to support a product they carry to provide further information on its use, general information on issues this product can help with etc.

Rather than simply provide a link to the Product page in question how much better would it be to have the relevant add to cart form display on this informational page?

Depending on your set up it can be done with no, or very little, coding.

  1. Create an 'Entity Reference' field on your chosen Page node type ( 'page/Basic page' for this example ).  This is the page type that you want the shopping cart to show up on, not the product itself. You will need the Entity Reference module enabled to do this. I'll be calling this field 'Product reference' and using a 'Select list' for this example. Settings: Target Type = Content; Entity Selection Mode = Simple; Target Bundles => select all the product types you'd like to be able to create add to cart forms on nodes with. You're then done with setting up this field, you can set a default on the next page if you'd like, otherwise just 'Save Settings'.
  2. If you leave it at that, you won't get much of use. We need to set up the Display, this is where you may need to do a little coding or additional set up.
  3. Select the 'Manage Display' tab ( eg admin/structure/types/manage/page/display ). Ensure 'Product reference' is not hidden. Change its 'Format' to 'Rendered Entity' and click the little gear icon that appears. I get to take a shortcut here, you may not. The 'Teaser' view mode on the site I'm working on already has the add to cart form in it ( this renders the add to cart form whenever & wherever a teaser is called ), so I can just set 'View mode' to Teaser, uncheck show links and I'm done. Well, there's a bit of CSS to sort out, but otherwise Drupal has done the heavy lifting for me already.
  4. What if your teaser doesn't contain the 'Add to cart' form and you can't modify the Teaser view? You'll need to create a new View mode that does contain the add to cart form. You can do this with Display Suite, but if you're not already using DS and don't want the extra weight then you can create a new view mode with minimal code. Once you've created the view you want to show up in your Product reference field just go back to your 'Basic page' and change the display of the 'Product reference' field to use your chosen view

That's it, job done.

Another option that adds the ability to embed Add to Cart buttons onto any page, without an entity reference field and even on other sites is https://www.drupal.org/project/commerce_express_checkout