Overriding templates via a theme

“Overriding templates via a theme” Documentation by “WPWeb”

Overriding templates via a theme

The template files of WooCommerce Collections contain the markup and template structure for the front-end of your site. If you open these files you'll notice they all contain many hooks which will allow you to add/move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.

Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /woocommerce/woocommerce-collections, keeping the same file structure.

Example: To override the collection listing design, copy: woocommerce-collections/includes/templates/collection-listing/collection-listing.php to yourtheme/woocommerce/woocommerce-collections/collection-listing/collection-listing.php

The copied file will now override the WooCommerce Collections default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

The following template files can be found within the /woocommerce-collections/includes/templates/ directory:

Templates
  • add-to-collection/
    • add-to-collection-content.php
    • add-to-collection-footer.php
    • add-to-collection-header.php
    • add-to-collection.php
    • success-message/
      • add-to-collection-success.php
  • collection-button/
    • collection-button.php
  • collection-edit/
    • collection-edit-content.php
    • collection-edit.php
    • popups/
      • collection-delete.php
      • cover-image.php
      • item-details.php
      • status.php
  • collection-item-listing/
    • collection-item-image-listing-content.php
    • collection-item-listing-content.php
    • collection-item-listing-loop-content.php
    • collection-item-listing.php
  • collection-listing
    • collection-listing-content.php
    • collection-listing-loop-content.php
    • collection-listing.php
  • css/
    • woo-cl-coll-dropdown.css
    • woo-cl-collection-edit.css
    • woo-cl-collection-listing.css
    • woo-cl-email-share.css
    • woo-cl-featured-collections.css
    • woo-cl-item-listing.css
    • woo-cl-popup.css
    • font-awesome/
      • css/
        • font-awesome.min.css
      • fonts/
        • fontawesome-webfont.eot
        • fontawesome-webfont.svg
        • fontawesome-webfont.ttf
        • fontawesome-webfont.woff
        • fontawesome-webfont.woff2
        • FontAwesome.otf
    • fonts/
      • Roboto-Light.ttf
    • images/
      • close_icon.png
      • deleteicon.png
      • icon.png
      • lock.png
      • present.png
      • round.png
      • smallicon.png
      • woocl_read_more.png
  • emails/
    • collection-share.php
    • plain/
      • collection-share.php
  • featured-collection-listing/
    • featured-collection-listing-content.php
    • featured-collection-listing.php
  • social-buttons/
    • email.php
    • facebook.php
    • google.php
    • linkedin.php
    • social-button.php
    • twitter.php
    • popup/
      • email-share-success.php
      • email-share.php

These files contain the markup and template structure for the front-end (and HTML emails) of your store. If you want to edit one of these templates simply copy it into a directory within theme named /woocommerce/woocommerce-collections, keeping the same file structure, e.g. move "/templates/collection-listing/collection-listing.php" to "yourtheme/woocommerce/woocommerce-collections/collection-listing/collection-listing.php". The copied file will now override the WooCommerce Collections default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customisations will be lost.