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 template 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 themefiles directory or any 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. |
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'); }
Customizing Checkout Template
You can use your WordPress template as the checkout and receipt template. Just create a page called “Checkout” and put this in your body text:
<link rel="stylesheet" href="https://^^store_domain^^/themes/text/styles.css" type="text/css" media="screen" charset="utf-8" /> ^^cart^^ ^^checkout^^
Then, go to the FoxyShop settings page and put “checkout” in the “Skip FoxyCart Includes On These Pages” box. This is because we can’t load those FoxyCart includes on the checkout pages as it will screw up the javascript. You can do the same for the Receipt template by creating a receipt page and changing the ^^checkout^^ to ^^receipt^^. Then, go to the FoxyShop Tools page and put the full urls for the checkout and receipt templates in the FoxyCart template section and update. If you have other things you need to yank out, you can put something like this in your functions.php file:
add_action('wp_head', 'my_template_skip', 2);
function my_template_skip() {
if (is_page('checkout') || is_page('receipt')) {
remove_action('wp_footer', 'stats_footer', 101); //remove wp stats from jetpack
remove_action('wp_head', 'stats_add_shutdown_action'); //remove wp stats from jetpack
}
}
