#56: Integrating FoxyCart and WordPress

FoxyCart is a very adaptable eCommerce system. Products are built on-the-fly as part of add to cart buttons that are just simple HTML. This means that you can integrate it with just about any CMS. In this screencast, we integrate it with WordPress. We make a special page template just for products. This page template loads the necessary FoxyCart files and automatically has an add to cart button that is controlled with custom fields in WordPress.

Links from Video:


  1. User Avatar
    Permalink to comment#

    Why of course! WordPress is my favourite programming language, next to Movable Type and Joomla!.

    Enough joking around, thanks for the helpful tutorial. I also enjoyed your calculator tut on tuts+.

  2. User Avatar
    joyoge designers' bookmark
    Permalink to comment#

    thanks for the helpful tutorial.

  3. User Avatar
    Permalink to comment#

    Thanks for the addendum – I’d run into the Foxycart not caching wordpress problem, so I’ll have to try the hash trick next time I make some changes. Incidentally, i’d gotten around it by putting the ^^checkout^^ stuff on the home page (temporarily), as that seemed to work.

  4. User Avatar
    Permalink to comment#

    Thanks for covering this Chris!

  5. User Avatar
    Permalink to comment#

    Hi Chris,

    Just a quick slightly off-topic question about the WordPress custom fields; is there any user-friendly way to add images as custom field values (instead of typing )?

    As I’d like to create such an option to the blog of my wife, and she’s not too much into HTML :)

    Best regards,

  6. User Avatar
    Permalink to comment#

    hey Chris,

    excellent tutorial. eerie timing too, got something cooking that this definitely helped with!

    got a question about how you copied the WP generated html and uploaded it. does the new checkout page then become static and independent of any global changes you make it WP i.e. changing the header section or navigation?

    you rock,

  7. User Avatar
    Permalink to comment#

    thank you so much chris. this is exactly what i was looking for. now i can sleep. lol

  8. User Avatar
    Permalink to comment#

    What a great Tutorial, can’t wait to get started on my fishing lure site project.

  9. User Avatar
    David Jones
    Permalink to comment#

    Just thought you might like to know there is an error in the Code Samples / Written Tutorial link.

  10. User Avatar
    todd valentine
    Permalink to comment#

    Thanks again, Chris. I really enjoy your blog and screen casts!

  11. User Avatar
    Permalink to comment#

    Good stuff! Thanks Chris.

  12. User Avatar
    Matt Haltom
    Permalink to comment#

    Chris. I’m stoked you got a chance to do a tut on this. Its an easy e-commerce solution even I can understand. Great video!

  13. User Avatar
    Permalink to comment#

    Maybe I missed it but if I wanted to create a page that users could see all the current products, then link to a product page for more info like you have set up. Would I want a ul in the content section..or would I want a custom field for each product? Looking for the easiest to manage after set up. Or should I use a foreach in the page template to get that info? Any help would be great.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Since I showed building a page template for each products, I think you best bet would be to make them all a child of another page. Then on that parent page, use a WP function like wp_list_pages to list out pages that are child_of that page:


  14. User Avatar
    Conor P
    Permalink to comment#

    Hey guys, any ideas on an inventory system using Wordress and Foxycart? I can’t think of any way to work it myself…

  15. User Avatar
    Permalink to comment#

    Is FoxyCart also mobile friendly? Thanks for the video!

  16. User Avatar

    Nice Video and thanks!!!
    Is Foxy cart is mobile friendly?
    I am creating the mobile version fo the current live site which used the Foxycart.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.