Theming

Docs

• 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: Blocks – content elements that you add to your store. Templates – designs for pages and posts. Block Themes – themes with templates entirely composed of blocks. The Block Editor – the […]

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

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

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