The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

#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. Matt
    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. joyoge designers' bookmark
    Permalink to comment#

    thanks for the helpful tutorial.

  3. kyle
    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. Brian
    Permalink to comment#

    Thanks for covering this Chris!

  5. Antti
    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. talon
    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. ruben
    Permalink to comment#

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

  8. Nicholas
    Permalink to comment#

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

  9. David Jones
    Permalink to comment#

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

  10. todd valentine
    Permalink to comment#

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

  11. Ariyo
    Permalink to comment#

    Good stuff! Thanks Chris.

  12. 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. justin
    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.

    • 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. 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. Jana
    Permalink to comment#

    Is FoxyCart also mobile friendly? Thanks for the video!

  16. Bijoy

    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed