Woo Foundation

CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.0] - 2025-12-27
+
+### Added - WooCommerce integration
+
+**WooCommerce Product Archive Support:**
+- **Custom Product Archive Template** - New `templates/archive-product.html` template for WooCommerce shop pages
+  - Responsive 3-2-1 column grid layout (3 desktop, 2 tablet, 1 mobile)
+  - Product collection block with breadcrumbs, sorting, and pagination
+  - Review testimonial pattern at bottom of shop page
+  - Integrates seamlessly with WooCommerce product displays
+  - Uses Elayne design system (spacing, colors, typography)
+
+**Responsive Product Grid CSS:**
+- Custom CSS Grid override for WooCommerce Product Collection block
+  - Overrides WooCommerce's default flexbox layout with CSS Grid
+  - Responsive breakpoints: 3 columns (>1024px), 2 columns (641px-1024px), 1 column (≤640px)
+  - Properly sized columns using `grid-template-columns: repeat(n, 1fr)`
+  - Removes WooCommerce's width constraints on list items (`width: auto !important`)
+  - Better responsive behavior than WooCommerce's default (which uses flexbox + percentage widths)
+  - Defined in `style.css` lines 223-246
+
+### Technical - WooCommerce implementation
+
+- Template references `elayne/two-column-review` pattern for social proof
+- CSS targets `.wc-block-product-template.is-flex-container` for grid conversion
+- Uses `!important` declarations to override WooCommerce's inline styles
+- Grid gap adjusts responsively (2rem desktop, 1.5rem tablet, 1rem mobile)
+- Compatible with WooCommerce Product Collection block (modern block-based approach)
+- No JavaScript required - pure CSS solution
+
 ## [1.1.2] - 2025-12-27
 
 ### Added - Elayne branding and logo assets

readme.txt

@@ -4,17 +4,18 @@ Tags: block-patterns, block-styles, blog, custom-colors, custom-logo, custom-men
 Requires at least: 6.6
 Tested up to: 6.9
 Requires PHP: 8.0
-Stable tag: 1.1.2
+Stable tag: 1.2.0
 License: GNU General Public License v3.0 (or later)
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
 == Description ==
 
-Launch a professional business website with the Elayne WordPress block theme! Elayne features 47 beautiful pattern designs and a fully-customizable design system with Global Styles. Elayne integrates seamlessly with all of the powerful WordPress editor features, giving you the most lightweight and powerful website builder — no expensive page builder plugin required!
+Launch a professional business website with the Elayne WordPress block theme! Elayne features 47 beautiful pattern designs, WooCommerce integration, and a fully-customizable design system with Global Styles. Elayne integrates seamlessly with all of the powerful WordPress editor features, giving you the most lightweight and powerful website builder — no expensive page builder plugin required!
 
 = Key Features =
 
 * 47 Professional Patterns - All 100% original, created specifically for Elayne
+* WooCommerce Integration - Custom product archive template with responsive 3-2-1 grid
 * 5 Style Variations - Complete design systems including new Spa & Wellness style
 * Flexible Layout System - Multiple page & post layout options (centered, sidebar, wide)
 * Business/Corporate Focus - Professional patterns for modern businesses
@@ -178,6 +179,13 @@ Elayne includes custom image sizes optimized for different layouts:
 
 == Changelog ==
 
+= 1.2.0 - 12/27/25 =
+* ADDED: WooCommerce Product Archive Template - New templates/archive-product.html for shop pages with responsive 3-2-1 column grid layout.
+* ADDED: Responsive Product Grid CSS - Custom CSS Grid override for WooCommerce Product Collection block (3 columns desktop, 2 tablet, 1 mobile).
+* ADDED: Product archive includes breadcrumbs, sorting, pagination, and review testimonial pattern for social proof.
+* CHANGED: WooCommerce grid now uses CSS Grid instead of WooCommerce's default flexbox layout for better responsive behavior.
+* TECHNICAL: CSS targets .wc-block-product-template.is-flex-container, removes width constraints, uses grid-template-columns with responsive breakpoints (1024px, 640px).
+
 = 1.1.2 - 12/27/25 =
 * ADDED: Elayne Logo Collection - Complete logo system with 4 variants (primary gold, dark, white, outline) in SVG and PNG formats with favicon sizes (16x16, 32x32, 48x48).
 * ADDED: Logo assets stored in assets/images/logos/ directory with SVG for scalability and PNG with drop shadows for raster use.

style.css

@@ -7,7 +7,7 @@ Description: A premium business block theme with advanced patterns for professio
 Requires at least: 6.6
 Tested up to: 6.9
 Requires PHP: 8.0
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: elayne
@@ -219,3 +219,28 @@ figure.is-avatar,
         column-count: 1;
     }
 }
+
+/* WooCommerce Product Collection responsive grid (3-2-1 columns) */
+.wc-block-product-template.is-flex-container {
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 2rem !important;
+}
+
+.wc-block-product-template.is-flex-container > li {
+    width: auto !important;
+}
+
+@media (max-width: 1024px) {
+    .wc-block-product-template.is-flex-container {
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: 1.5rem !important;
+    }
+}
+
+@media (max-width: 640px) {
+    .wc-block-product-template.is-flex-container {
+        grid-template-columns: 1fr !important;
+        gap: 1rem !important;
+    }
+}

templates/archive-product.html

@@ -0,0 +1,51 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true,"type":"constrained"}} -->
+<main class="wp-block-group"><!-- wp:woocommerce/breadcrumbs /-->
+
+<!-- wp:query-title {"type":"archive","showPrefix":false,"align":"wide"} /-->
+
+<!-- wp:woocommerce/store-notices /-->
+
+<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:woocommerce/product-results-count /-->
+
+<!-- wp:woocommerce/catalog-sorting /--></div>
+<!-- /wp:group -->
+
+<!-- wp:woocommerce/product-collection {"queryId":21,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":true,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[],"filterable":false,"relatedBy":{"categories":true,"tags":true}},"tagName":"div","displayLayout":{"type":"flex","columns":3},"dimensions":{"widthType":"fill"},"queryContextIncludes":["collection"],"__privatePreviewState":{"isPreview":false,"previewMessage":"Actual products will vary depending on the page being viewed."},"align":"wide"} -->
+<div class="wp-block-woocommerce-product-collection alignwide"><!-- wp:woocommerce/product-template -->
+<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
+
+<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
+
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+
+<!-- wp:woocommerce/product-button {"textAlign":"center","isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
+<!-- /wp:woocommerce/product-template -->
+
+<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:woocommerce/product-collection-no-results -->
+<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
+<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"medium"} -->
+<p class="has-medium-font-size"><strong>No results found</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>You can try <a class="wc-link-clear-any-filters" href="#">clearing any filters</a> or head to our <a class="wc-link-stores-home" href="#">store's home</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+<!-- /wp:woocommerce/product-collection-no-results --></div>
+<!-- /wp:woocommerce/product-collection --></main>
+<!-- /wp:group -->
+
+<!-- wp:pattern {"slug":"elayne/two-column-review"} /-->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->