From 6a94bcf17da4bcae9db4c6ad7536b8d2524c6245 Mon Sep 17 00:00:00 2001 From: Jasper Frumau Date: Sat, 27 Dec 2025 13:46:44 +0700 Subject: [PATCH] WooCommerce Foundation --- CHANGELOG.md | 30 ++++++++++++++++++++ readme.txt | 12 ++++++-- style.css | 27 +++++++++++++++++- templates/archive-product.html | 51 ++++++++++++++++++++++++++++++++++ 4 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 templates/archive-product.html diff --git a/CHANGELOG.md b/CHANGELOG.md index b16fda7..d4e8360 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/readme.txt b/readme.txt index ac52d11..1716cb6 100644 --- a/readme.txt +++ b/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. diff --git a/style.css b/style.css index 7657f7e..0671ad2 100644 --- a/style.css +++ b/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; + } +} diff --git a/templates/archive-product.html b/templates/archive-product.html new file mode 100644 index 0000000..b4abc3b --- /dev/null +++ b/templates/archive-product.html @@ -0,0 +1,51 @@ + + + +
+ + + + + + +
+ +
+ + + +
+ + + + + + + + + + + + + + + + + + + +
+

No results found

+ + + +

You can try clearing any filters or head to our store's home

+
+ +
+
+ + + + +