---- dataentry ---- type : integration # do not change this line systems : WordPress # the system(s) that the integration is for, separated with commas if more than one name : WordPress + FoxyCart, Basic # the name of the integration description : A screencast + tutorial describing how to quickly and easiy set up Wordpress and FoxyCart together. tags : cms # tags, separated by commas. don't include the "system" here. date_dt : 2009-03-05 # the date in YYYY-MM-DD format version : # if you have a version for your code, enter it here developer_url : http://www.css-tricks.com/ # if you'd like a link back to your site, stick it here ---- ====== Wordpress + FoxyCart ====== //**Please note:**// The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please [[http://forum.foxycart.com/|post in our forum]], but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance. ===== Description ===== FoxyCart is easy to integrate with WordPress. In this example, we will: * Create a special WordPress Page Template that includes a FoxyCart "Add to Cart" button that we can control from WordPress * Include the FoxyCart CSS and JavaScript files (but only on the page template that needs them) * Publish a new page in WordPress using the new Template * Create a FoxyCart Checkout Template from WordPress ===== Screencast! ===== [[http://css-tricks.com/video-screencasts/56-integrating-foxycart-and-wordpress/|CSS Tricks: Integrating FoxyCart and Wordpress Screencast]] ===== Custom Page Template for Products ===== Since you are reading this, we can assume that your WordPress-powered site will be being home to your eCommerce activities. But it is likely that **every page** on your site isn't a page with products for sale on it. You may have a regular blog area, a home page, contact page, etc. What we can do is make a special page template for all the pages that **are** products. Your theme folder probably has a file called ''page.php'' in it. Duplicate that file, and name it ''page-product.php''. At the very top of that file, insert this bit of code:

Now when creating a new Page in WordPress, "Product" will appear in the dropdown menu for **Template**. We now have a special template that all of our products can use. This allows us to do anything we would like with these pages, such as have a special layout. Most importantly though, we can include a FoxyCart "Add to Cart" button in this template, and fill in the details about product name, price, and option directly from WordPress. We'll come back to this later. ===== Including the FoxyCart Files ===== FoxyCart needs a couple of CSS files and a JavaScript file in the '''' section to power and style the cart. In a WordPress theme, this '''' section resides in the ''header.php'' file. Copy the code you need from the [[https://www.foxycart.com/admin.php?ThisAction=SampleCode|Sample Code area]] (Step 1), and paste it in just above the '''' tag. But remember, we don't need these files on every single page on our site, only on the product pages. WordPress provides a function that allows us to check if we are on a page using a certain template. Here is an example bit of code:

Replace the ''YOURSTOREDOMAIN'' with your store domain or subdomain. If your domain is example.foxycart.com, just use ''example''. If you're using a custom subdomain like ''secure.example.com'', use that entire string. The CDN-style links are only available in FoxyCart v060+. If you're pre-v060 please use the code from the "sample code" section in your FoxyCart admin. ===== Using WordPress Custom Fields ===== Right below the standard write panel in WordPress resides the very powerful but oft-misunderstood Custom Fields. Custom Fields are are simply a way to attach extra data to a Post, that can be pulled out and used in any way whatsoever. These are **particularly useful** for something like a product. The page title and text area work great for the product title and description, but for things like **price**, **options**, and **photos**, custom fields are definitely the way to go. Simply choose a name for the field (be consistent!) and give it a value. You can give the same field multiple values. {{http://css-tricks.com/images/foxy-customfields.png}} ===== FoxyCart Buttons ===== In the [[https://www.foxycart.com/admin.php?ThisAction=SampleCode|Sample Code area]] (Step 2), there are some bits of code to create "Add to Cart" buttons on your pages. We will be using the "form" example, which should look a lot like this:



	
	
	Size

This code will create a dropdown menu (Small, Medium, Large) and a button that says "Add a Cool Example" on your page. Instead of hard-coding all these values, we will populate them by pulling information from our Page in WordPress. === Product Title === This line of code controls the product title: Let's replace "Cool Example" with the title of the Page instead: === Product Price === This line of code controls the price: Let's replace "10" with the price we set in our Custom Field: === Product Options === This bit of code creates the dropdown menu of product options:

Let's replace that with a new set of product options. In our case, T-Shirt colors (as we set up in the above image of Custom Fields):

===== Publishing a New Product ===== Now that we have done all this hard work, we are ready to capitalize on that because it will be so **easy** to publish new products! {{http://css-tricks.com/images/foxypagedemo.png}} - Create a New Page - Title the product (Title of Post = Title of Product) - Create product description (content of Post) - Add Custom Fields (price and product options) - Choose proper Page Template - Publish! ===== Customizing Your Cart ===== FoxyCart gives you the ability to have your Checkout page customized to look exactly like your site. [[http://wiki.foxycart.com/getting_started:templates|See Wiki Article on this]]. It does this by caching a URL that you give it that you prepare ahead of time to be the Checkout page. We can do this right from WordPress as well. You will likely want to create a special page template just for this. See "Custom Page Template" above for the specifics. You'll probably want to create something like ''page-checkout.php'' in your theme, then create a new page using that template and publish it. The resulting URL will be something like http://yoursite.com/checkout/ Either in your template or the body of the post, make sure you include these two bits of text:


^^cart^^
^^checkout^^

**IMPORTANT**: When you are giving FoxyCart the URL to cache for your Checkout page, add a hashtag to the end of the URL, like this: http://yoursite.com/checkout/#