Back to Documentation

Theme Customization

FoxyShop makes it easy to change the look of your store by editing theme files. These theme files are used by FoxyShop to format and display your products and categories.

By default, FoxyShop looks for theme files in your WordPress theme directory. If it doesn’t find them there, it will use the ones in /wp-content/plugins/foxyshop/themefiles/. If you are using a child theme, the plugin will check in your child theme folder and then the parent theme folder before resorting to the defaults. Don’t modify the files in the foxyshop/themefiles directory or any plugin upgrades you make will blow away your changes. Keep edited files in your theme directory to keep them safe. Additionally, it’s usually a good idea to only copy the files you will be editing instead of copying all of them. This way, if any of the default theme files are changed in future versions you’ll have the latest and greatest code without having to make any manual changes. (This falls under the heading of “best practices”.)

Here’s a list of all the template files and what you can do with them:

Single Product foxyshop-single-product.php Shows a product’s main details (/products/xyz-product/)
Single Product Shortcode
foxyshop-single-product-shortcode.php Shows a product’s main details when called from a shortcode
Category Home foxyshop-all-categories.php Shows top-level categories (/product-cat/)
Category Page foxyshop-single-category.php Shows the products in a category (/product-cat/category-name/)
Category Page Shortcode
foxyshop-single-category-shortcode.php Shows the products in a category when called from a shortcode
All Products
foxyshop-all-products.php Shows all products (/products/)
Search Products
foxyshop-search.php Controls the product search display (/product-search/)
Store Header
foxyshop-header.php Shows above the store on all FoxyShop pages
Store Footer
foxyshop-footer.php Shows below the store on all FoxyShop pages – useful for loading scripts or styles only on FoxyShop pages
Product Loop foxyshop-product-loop.php Shows the product information on the category and search pages
Datafeed Endpoint foxyshop-datafeed-endpoint.php Roll your own checkout integration or add third-party feeds
Printable Receipt foxyshop-receipt.php Add your own logo or message to the customizable packing slip
Custom File Upload
foxyshop-custom-upload.php Access the scripts that make the customer product upload work. You can disable swfobject if necessary here.
Checkout Template
foxyshop-checkout-template.php Has the basics for a clean checkout template
Receipt Template
foxyshop-receipt-template.php Has the basics for a clean receipt template

CSS

FoxyShop loads a default style sheet from /wp-content/plugins/foxyshop/css/foxyshop.css. This style sheet is designed to be as unobtrusive as possible. It simply sets floats and basic styles and is as generic as possible so that it won’t interfere with your site-wide stylesheet. There are a few basic colors and widths specified at the top which you can easily overwrite with your stylesheet by either calling your stylesheet after wp_head() or specifying your overwrite styles as “body .theclassname” so that they have a higher context. It should be noted that the default FoxyShop installation was designed for a container that is 900px wide.

If you would like to get rid of the default FoxyShop stylesheet completely, you can do so by sticking this in your functions.php file:

add_action('init', 'my_foxyshop_dequeue', 11);
function my_foxyshop_dequeue() { wp_dequeue_style('foxyshop_css'); }

If you want to add a custom FoxyShop stylesheet, put your css in a file called foxyshop.css, drop that file in your theme folder, and add this code to your functions.php file.

add_action('wp_print_scripts', 'custom_add_css', 999);
function custom_add_css() {
	echo '	<link href="' . get_bloginfo("stylesheet_directory") . '"/foxyshop.css" rel="stylesheet" media="all" type="text/css" />' . "\n";
}

Customizing the Checkout and Receipt Template

FoxyShop 4.4 introduces a default checkout and receipt template. These files are preset to make the checkout look good with most installations. To get started, go to yoursite/foxycart-checkout-template and preview the page to make sure it looks okay. Check the page title as well and adjust in the FoxyShop settings as necessary. If you need to make any adjustments, you can edit the foxyshop-checkout-template.php file. Cache the templates from the FoxyShop tools page and then test a checkout.

If you want to use FoxyCart advanced Google Analytics integration, this is all hard-coded into these template files. Just check the “Advanced” checkbox in the FoxyShop admin and the appropriate tracking code will be automatically added the checkout and receipt templates. You’ll still need to set up your Analytics account with the appropriate goals.

Here are a few key points to keep in mind when building a checkout template.

  • After making a change to your site’s menu or layout structure you should always re-cache your checkout and receipt template.
  • It’s a good idea to specify to a favicon. If your theme doesn’t already do this, there is some commented code in the templates. Favicons won’t be cached but they don’t have to be secure.
  • If you are having trouble caching your stylesheets, make sure that there are no relative paths as the automagic cacher can’t figure that out. Also be sure that rel=”stylesheet” is the first declaration in your link tag.
  • Custom fonts must be secure and FoxyCart can’t cache them. Google and TypeKit fonts work great because you can simply specify a secure link. If you are self-hosting a custom font you can either adjust your template to use secure fonts or embed the fonts directly in the CSS. Font Squirrel is helpful here.
  • Some JS libraries (Modernizer among them) have some code in there that kills the Twig parser. It’s a good idea to wrap these libraries in a raw tag like this: {% raw %} and {% endraw %}

Back to Documentation