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 %}
