Jump to Navigation Jump to Main Content Jump to Footer
Home » Docs » Features » Woocommerce support

Woocommerce support

Chsel provides first‑class WooCommerce integration via custom Twig templates, helper utilities, and selective hook overrides.

Overview

  • Theme support: woocommerce, product gallery zoom/lightbox/slider enabledSource: inc/Plugin/Woocommerce.php::add_woocommerce_support()
  • Custom templates:
    • Archive: views/woocommerce/archive-product.twig
    • Single: views/woocommerce/single-product.twig
    • Loop item: views/woocommerce/content-product.twig
    • Category item: views/woocommerce/content-product-cat.twig
    • Linked products (upsells/related): views/woocommerce/linked-products.twig
    • Entry point: woocommerce.php
  • Twig hooks preserved: Templates call Woo hooks (e.g., woocommerce_before_main_content, woocommerce_single_product_summary) via do action(...), but the theme removes some default outputs to replace layout/markup.
  • Sidebar: Dedicated “WooCommerce” sidebar registered via filter. Source: inc/Plugin/Woocommerce.php::register_sidebars()

Hook customizations

  • Removed default actions (theme reimplements layout/markup):
    • Wrapper and breadcrumb around main content Removed: woocommerce_output_content_wrapper, woocommerce_output_content_wrapper_end, woocommerce_breadcrumb
    • Loop product/category link wrappers and default thumbnails Removed: woocommerce_template_loop_product_link_open/close, woocommerce_subcategory_thumbnail, woocommerce_template_loop_product_thumbnail
    • Archive pagination (theme may use its Load More) Removed: woocommerce_pagination
    • Single product upsells/related default placement (theme renders via Twig) Removed: woocommerce_upsell_display, woocommerce_output_related_products Source: inc/Plugin/Woocommerce.php::remove_actions()
  • Sort bar container: Injected before/after shop loop to wrap count/order controls Source: inc/Plugin/Woocommerce.php::before_shop_loop_div_open() / before_shop_loop_div_close() Triggered by Woo hook: woocommerce_before_shop_loop
  • Customizer: Removes “both” display choice for shop/category archives Source: inc/Plugin/Woocommerce.php::modify_customizer()

Assets

  • Removes Woo’s woocommerce-layout stylesheet to avoid conflicts. Filter: woocommerce_enqueue_styles in inc/Plugin/Woocommerce.php::enqueue_styles()
  • Registers theme style handle woocommerce via chisel_frontend_styles. Source: inc/Plugin/Woocommerce.php::register_custom_styles()

Helpers

  • WoocommerceHelpers (inc/Helper/WoocommerceHelpers.php)
    • is_woocommerce_active() — guard code paths
    • timber_set_product($post) — ensure correct global $product context in loops; exposed to Twig as timber_set_product(post)
    • get_products_grid_classnames($products, $has_sidebar) — returns responsive o-grid classes with max 4 columns

Example usage in PHP (archive context):

woocommerce.php computes and passes:

  • items (posts or terms), categories, show_products
  • loop_columns_class via WoocommerceHelpers::get_products_grid_classnames($products, $has_sidebar)
  • load_more config for AJAX pagination: { per_page, post_type: 'product' }

Templates: data flow and extension

  • Archiveviews/woocommerce/archive-product.twig
    • Uses Woo hooks (woocommerce_before_main_content, woocommerce_before_shop_loop, etc.)
    • Renders either content-product.twig or content-product-cat.twig based on show_products
    • Appends Load More control when products present:
      • Includes components/pagination.twig with { type: 'load-more' }
      • Front‑end JS module src/scripts/modules/load-more.js uses REST endpoint load-more
    • Grid classes injected via loop_columns_class
  • Singleviews/woocommerce/single-product.twig
    • Uses standard Woo hooks for gallery/summary/tabs
    • Theme renders custom linked products sections via linked-products.twig using:
      • Context vars from woocommerce.php: upsells_products, related_products
    • post_classes(post.class) and wrapper_class used for consistent BEM classes
  • Entry logicwoocommerce.php
    • Single product:
      • Sets post, product
      • Controls upsells/related via filters:
        • chisel_woocommerce_upsell_display (bool)
        • chisel_woocommerce_output_related_products (bool)
      • Computes grid_classnames and renders single-product.twig
    • Archive:
      • Honors Woo “display type” (products vs subcategories)
      • Builds items (posts or terms), categories, show_products
      • Computes loop_columns_class, and load_more per page via wc_get_loop_prop('columns') * wc_get_default_product_rows_per_page()
      • Renders archive-product.twig

Theme filters for Woo behavior

  • Toggle upsells/related on single (in woocommerce.php):
    • chisel_woocommerce_upsell_display → default true
    • chisel_woocommerce_output_related_products → default true Example:
add_filter('chisel_woocommerce_output_related_products', '__return_false');
add_filter('chisel_woocommerce_upsell_display', '__return_false');
PHP

AJAX “Load more” for products

  • Archive integrates with the theme’s REST AJAX pattern.
    • Client: src/scripts/modules/load-more.js calls Utils.ajaxRequest('load-more', { post_type: 'product', ... })
    • Server: inc/WP/AjaxEnpoints.php::load_more() prepends Woo template views/woocommerce/content-product.twig for post_type === 'product'

Sidebars

  • Add a “WooCommerce” sidebar via filter chisel_sidebars (merged in inc/Plugin/Woocommerce.php).Twig includes sidebar-woocommerce.twig or sidebar-woocommerce-product.twig when sidebar is present in the context.

How to extend

  • Override markup: Copy any views/woocommerce/*.twig file into a child theme with the same path/name to customize.
  • Grid/tile layout: Adjust columns via Woo settings; helper caps at 4 columns. For custom breakpoints, adapt WoocommerceHelpers::get_products_grid_classnames().
  • Disable/enable pieces via filters listed above.
  • Register extra CSS/JS for shop pages via asset filters.

Do you like Chisel?

Give it a star on GitHub!