Theming

Documents

• Make your theme compatible with Homepage Control

  Assuming your theme has a homepage consisting of several components, it can be made compatible with Homepage Control. The only stipulation is that each of those components must be called via function that is hooked into a homepage action in your index.php (or front-page.php/home.php). Here’s a quick guide: In our themes we have the following […]

• Set up and use a child theme

  Sometimes, you might need to customize your theme or WooCommerce beyond what is possible via the options. These guidelines will teach you the basics of how to go about customizing your site by using a child theme. What is a child theme? Before we start it’s important that you understand what a child theme is. […]

• Template structure & Overriding templates via a theme

  Overview WooCommerce template files contain the markup and template structure for frontend and HTML emails of your store. When you open these files, you will notice they all contain hooks that allow you to add/move content without needing to edit template files themselves. This method protects against upgrade issues, as the template files can be left completely untouched. Template list Template files can […]

• WooCommerce Store Editing

  Store Editing enables you to edit parts of your store without the need to code. It is a collection of features/elements that includes: You can find more information on each of these features and elements below. Blocks What are Blocks  Blocks are content elements that you add to your store. Each item you add to […]

• WooCommerce Theme Developer Handbook

  WooCommerce looks great with all WordPress themes as of version 3.3, even if they are not WooCommerce-specific themes and do not formally declare support. Templates render inside the content, and this keeps everything looking natural on your site. Non-WooCommerce themes, by default, also include: Zoom feature enabled – ability to zoom in/out on a product […]

• CSS Structure

  Structure Inside the assets/css/ directory, you will find the stylesheets responsible for the default WooCommerce layout styles. Files to look for are woocommerce.scss and woocommerce.css. woocommerce.css is the minified stylesheet – it’s the CSS without any of the spaces, indents, etc. This makes the file very fast to load. This file is referenced by the plugin and […]

• Template structure & Overriding templates via a theme

  Overview WooCommerce template files contain the markup and template structure for frontend and HTML emails of your store. When you open these files, you will notice they all contain hooks that allow you to add/move content without needing to edit template files themselves. This method protects against upgrade issues, as the template files can be left completely untouched. Template list Template files can […]

• Fixing Outdated WooCommerce Templates

  Template Updates and changes We sometimes update the default templates when a new version of WooCommerce is released. This applies to major releases (WooCommerce 2.6, 3.0, and 4.0) but also to minor releases (WooCommerce 3.8.0). Starting in WooCommerce version 3.3, most themes will look great with WooCommerce. Our developer focused blog will list any template […]

• Third party / custom / non-WC theme compatibility

  Overview WooCommerce looks great with all WordPress themes as of version 3.3, even if they are not WooCommerce-specific themes and do not formally declare support. Templates render inside the content, and this keeps everything looking natural on your site. Here’s a before and after of the same non-WooCommerce theme — on the left is the […]

• Image Sizes for Theme Developers

  To display images in your catalog, WooCommerce registers a few image sizes which define the actual image dimensions to be used. These sizes include: woocommerce_thumbnail – used in the product ‘grids’ in places such as the shop page. woocommerce_single – used on single product pages. woocommerce_gallery_thumbnail – used below the main image on the single […]