HypertroLab

Dark minimal e-commerce store for sports supplements, built with WordPress + WooCommerce.

Quick Start

git clone https://github.com/your-username/hypertrolab-store.git
cd hypertrolab-store
docker compose up -d

• Store: http://localhost:8080
• Admin: http://localhost:8080/wp-admin (user: admin / pass: admin)
• phpMyAdmin: http://localhost:8082

Screenshots

Tech Stack

Layer	Choice	Why
Local dev	Docker (Apache + MariaDB + phpMyAdmin)	Reproducible, no XAMPP/MAMP
CMS	WordPress 6.8.1	Industry standard, large plugin ecosystem
E-commerce	WooCommerce 9.8.1	Free, native WordPress integration
Theme	Blocksy child theme	Free, performance-focused, well-maintained
CSS	Custom hl-dark.css overrides on Blocksy	No page builder, pure CSS
PHP	8.3 (via Docker image)	Latest stable

What Was Built

• Docker stack (Apache + MariaDB + phpMyAdmin) with bind-mounted WordPress
• Blocksy child theme with ~1830 lines of custom dark mode CSS
• Custom front-page.php homepage template (hero, stats, features grid, CTA)
• 6 products with categories, SKUs, and variations
• Shipping logic: flat rate (25 RON) + free shipping (500 RON+) with programmatic hiding
• Payment: PayU sandbox (card, Apple Pay, Google Pay) + BACS + COD
• SVG product image support via mu-plugin
• Toast notifications replacing native alert()
• Responsive layout (mobile hamburger menu, stacked cards)

Payment & Shipping

PayU (Romanian market): Most widely used gateway in Romania. Configured sandbox with OAuth credentials (POS ID, MD5 key, client_id, client_secret). Test card: 4444333322221111. Production requires a signed merchant agreement.

Shipping: Flat rate (25 RON) hidden programmatically via woocommerce_package_rates filter when free shipping threshold (500 RON) is met. Courier APIs (Fan Courier, SameDay, Cargus) require merchant contracts with no sandbox available.

Debugging Notes

Issue	Root Cause	Solution
Blocksy palette invisible on dark theme	Blocksy inline :root overrides child theme	Override with !important in hl-dark.css
PayU invalid_client error	Public sandbox credentials rotated	Register fresh sandbox account
PayU not appearing at checkout	Plugin uses different option key suffixes with/without WMPL	Store credentials without _RON suffix
Flat rate + free shipping both visible	WC uses instance IDs (flat_rate:1) not slugs	Filter by instance IDs
WC blocks text invisible	Blocksy WooCommerce CSS loaded after child theme	Targeted .wc-block-components-* selectors
Order-received notice invisible	Blocksy light background on .woocommerce-notice	Inline <style> in wp_footer hook

Project Structure

hypertrolab-store/
├── docker-compose.yml
├── db-export.sql
├── screenshots/
├── .gitignore
├── README.md
└── wordpress/
    ├── .htaccess
    ├── wp-config.php
    └── wp-content/
        ├── mu-plugins/
        │   └── allow-svg.php
        └── themes/
            └── hypertrolab/
                ├── style.css
                ├── functions.php
                ├── front-page.php
                ├── hl-dark.css
                └── hl-product.js

License

Personal learning project. Not for commercial use.