Articles

• 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 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 […]

• 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 […]

• 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 […]

• Display Category Image on Category Archive

  This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters Show hidden characters /** * Display category image on category archive */ add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 ); function woocommerce_category_image() […]

• Overriding the product search box (widget)

  The product search box widget loads the search box using the template function: get_product_search_form() For more info, see: Function get_product_search_form. It then looks for the product search form in the file ‘product-searchform.php’ or uses its default markup. You can override the default WooCommerce template product-searchform.php by customizing the markup. For reference, the default markup is: This […]

• 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 […]

• Conditional Tags

  What are “conditional tags”? The conditional tags of WooCommerce and WordPress can be used in your template files to change what content is displayed based on what conditions the page matches. For example, you may want to display a snippet of text above the shop page. With the is_shop() conditional tag, you can. Because WooCommerce uses custom post […]

• 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 […]