Samin Stone

Category: Custom WordPress · WooCommerce · Custom Plugins & Functionality · UI / Figma to WordPress
Project Type: Fully Custom WordPress Theme, WooCommerce Store & Core Plugin
Role: WordPress & WooCommerce Developer
Platform: WordPress + WooCommerce
Industry: Natural Stone, Construction & eCommerce
Development Approach: Static HTML → Fully Dynamic Custom WordPress & WooCommerce
Status: Development Completed — Pre-Launch

Project Overview

Stone Samin is a custom-built Persian eCommerce website developed for a natural-stone and decorative-stone business.

The project started from a static HTML interface and was transformed into a fully dynamic, responsive, and RTL WordPress and WooCommerce platform.

Instead of treating the website as a standard WooCommerce store, I created a product architecture specifically for the stone industry, including custom stone-material and usage taxonomies, product sale units, advanced product filtering, reusable product components, and a dedicated core plugin for project-specific business logic.

The Challenge

Natural-stone products cannot be represented effectively with a simple category structure.

A product may need to be classified simultaneously by its commercial category, stone material, intended usage, price, and unit of sale.

The original static frontend also contained hard-coded content, links, images, product data, and contact information, meaning website administrators could not manage the site through WordPress.

The project therefore required more than a visual WooCommerce conversion. It needed:

• A fully dynamic WordPress architecture
• A complete Persian RTL shopping experience
• Custom product classification
• Multi-dimensional product discovery
• Flexible product sale units
• Responsive WooCommerce flows from shop to checkout
• Reusable frontend components
• Separation between presentation and business logic
• A maintainable technical foundation for future development

The Solution

I converted the static frontend into a custom WordPress theme and integrated WooCommerce as the commerce layer.

The theme was divided into reusable template parts and components for the homepage, product listings, product pages, articles, navigation, account pages, cart, checkout, and other website sections.

Project-specific business and catalog logic was moved into a separate custom plugin called Stone Samin Core, allowing important product structures to remain independent from the presentation layer.

This separation makes future development easier while preventing the theme’s functions.php file from becoming a large collection of unrelated functionality.

Custom Product Architecture

To model the stone catalog more accurately, I created two hierarchical custom taxonomies for WooCommerce products:

Stone Material
Used for materials such as Travertine, Marble, Granite, Basalt, and other stone types.

Stone Usage
Used for applications such as façades, flooring, stairs, columns, and decorative stone products.

WooCommerce product categories remain available alongside these taxonomies, allowing each product to be described and filtered from multiple perspectives without creating an unnecessarily complex category hierarchy.

I also developed custom taxonomy image management using the WordPress Media Library.

Administrators can assign images to Stone Material and Stone Usage terms directly from WordPress, with secure term-meta storage, nonce and capability validation, previews, taxonomy-table thumbnails, and REST API availability.

Stone Samin Core Plugin

The project’s custom catalog functionality is maintained inside a dedicated WordPress plugin rather than being tightly coupled to the theme.

The plugin uses an object-oriented PHP architecture with:

• PHP namespaces
• Custom autoloading
• Module interfaces
• A central plugin bootstrap class
• Catalog modules
• Custom taxonomy registration
• Taxonomy image management
• WordPress Hooks

This modular structure provides a cleaner foundation for extending product functionality in the future.

Product Sale Units

Stone products are not always sold using the same measurement.

I added a custom WooCommerce product setting allowing administrators to define each product as being sold by:

• Square meter
• Linear meter
• Individual unit

The selected unit is displayed alongside the quantity controls on the product page, carried into the shopping cart, and stored with the order item.

This allows the store to represent industry-specific purchasing behavior rather than forcing every product into WooCommerce’s default quantity model.

Dynamic Homepage

The homepage was rebuilt as a collection of dynamic and reusable WordPress components.

It includes:

• Responsive Hero content and calls to action
• Dynamic Stone Material listings
• Dynamic Stone Usage listings
• Latest WooCommerce products
• Dedicated Travertine product listings
• Reusable product carousels
• Latest articles
• Brand and service information
• Consultation and contact calls to action

All product, taxonomy, article, and navigation links are connected to real WordPress and WooCommerce data instead of being hard-coded into the theme.

Advanced Product Archive & Filtering

A custom WooCommerce shop archive was developed to make large product collections easier to explore.

Customers can filter products by:

• Price range
• Stone material
• Stone usage
• Product category

The archive also includes multiple sorting options, custom pagination, result counts, search integration, and dedicated empty states.

On mobile and tablet devices, the filter system becomes an accessible off-canvas panel with overlay handling, Escape-key support, body scroll locking, ARIA state management, and responsive synchronization.

Product searches are also restricted to WooCommerce products while retaining the user’s search query when filters or sorting options are applied.

Custom Product Experience

The WooCommerce single-product experience was redesigned while preserving WooCommerce’s native hooks and core behavior.

The product page includes:

• Responsive product gallery
• WooCommerce Zoom, Lightbox, and Slider support
• Stone Material and Stone Usage information
• Sale percentage display
• Custom quantity controls
• Product sale-unit display
• Simple and variable product compatibility
• AJAX add-to-cart behavior
• Product description and technical information
• Reviews
• Related products

Quantity controls respect WooCommerce’s minimum, maximum, and step values and update correctly when product variations change.

AJAX Cart Experience

A custom off-canvas Mini Cart was developed using WooCommerce Cart Fragments and native WooCommerce AJAX events.

After a product is added, the cart panel can open automatically and update without requiring a page refresh.

The system includes:

• Live cart-content updates
• Live cart-count badge
• Product removal feedback
• Order subtotal
• Empty-cart state
• Cart and Checkout actions
• Overlay and Escape-key closing
• Body scroll locking
• Focus trapping
• Focus restoration
• Accessible dynamic labels

The implementation builds on WooCommerce’s own events and fragment system rather than replacing the platform’s cart logic.

Cart, Checkout & Account

The complete shopping flow was visually integrated with the Stone Samin interface.

The Cart experience includes responsive product layouts, quantity management, sale prices, product sale units, totals, and a custom empty-cart state.

For Checkout, I retained WooCommerce’s Classic Checkout architecture so native validation, shipping, payment, address fields, and third-party field-management functionality could continue to work correctly.

My Account pages were also redesigned for the RTL interface, including:

• Login and registration
• Customer dashboard
• Orders
• Addresses
• Account details
• Password recovery
• WooCommerce notices and validation states

RTL WooCommerce Improvements

One of the most challenging areas was achieving consistent Persian price presentation across WooCommerce.

Price output could behave differently between classic templates, Mini Cart components, and WooCommerce Blocks.

I standardized the interface to correctly display values such as:

780,000 تومان

The solution involved WooCommerce price settings, wc_price arguments, thousands separators, decimal behavior, and CSS direction / unicode-bidi rules.

Additional RTL refinements were applied to forms, navigation, mobile panels, quantity controls, and other interface components.

Blog & Content System

The website also contains a WordPress-native content publishing system.

It includes:

• Custom article archive
• Reusable article cards
• Featured images and article metadata
• Pagination
• Single article layouts
• Related and recent articles
• WordPress comments
• Tags and social sharing
• Responsive long-form RTL typography

A custom contact form was also implemented with mobile-number validation, Persian / Arabic digit normalization, nonce protection, honeypot spam prevention, sanitized input handling, and WordPress email delivery.

Responsive & Accessible Interface

The interface was designed for desktop, tablet, and mobile rather than simply shrinking desktop layouts.

Examples include converting multi-column product grids into smaller responsive layouts, turning the desktop shop filter into an off-canvas mobile interface, adapting product carousels, restructuring Checkout and Cart, and protecting layouts from price or control overflow.

Accessibility improvements include semantic HTML, screen-reader labels, ARIA attributes, keyboard Escape support, visible focus states, and focus management inside interactive panels.

Performance & Maintainability

The project uses a modular structure designed for future maintenance.

Technical decisions include:

• Reusable WordPress Template Parts
• Shared product and article components
• Conditional CSS and JavaScript loading
• Asset versioning using file modification times
• Lazy-loaded product and taxonomy images
• Optimized product queries
• WooCommerce lookup-table usage for price ranges
• Sanitization and escaping
• Nonce and capability verification
• Separation of theme and business logic

Key Technical Highlights

Fully Custom WordPress & WooCommerce Theme
A custom RTL WooCommerce theme created from a static HTML frontend and connected to dynamic WordPress and WooCommerce data.

Modular WordPress Core Plugin
A dedicated OOP PHP plugin using namespaces, interfaces, autoloading, modules, custom taxonomies, and term metadata.

Industry-Specific Product Architecture
Custom Stone Material, Stone Usage, product-category, sale-unit, and pricing structures tailored to natural-stone products.

Advanced Product Discovery
Custom multi-taxonomy filtering, price ranges, sorting, pagination, search integration, and responsive off-canvas filters.

Custom WooCommerce Shopping Experience
Customized product pages, AJAX cart interactions, live Cart Fragments, Cart, Classic Checkout, and My Account interfaces.

Responsive Persian RTL Development
Extensive handling of RTL pricing, forms, mobile navigation, WooCommerce components, and responsive layouts.

Technology Stack

• WordPress
• WooCommerce
• PHP 8
• OOP PHP
• WordPress Hooks API
• WooCommerce APIs
• JavaScript ES6
• jQuery
• AJAX
• HTML5
• CSS3
• Bootstrap Grid
• CSS Grid & Flexbox
• Swiper
• AOS
• GSAP
• ScrollTrigger
• WooCommerce Cart Fragments
• Git & GitHub

Development Story

Static HTML Interface → Custom WordPress Theme + WooCommerce Platform + Modular Core Plugin

Stone Samin demonstrates a deeper WooCommerce development approach where WordPress is used not only as a CMS but as the foundation of a purpose-built commerce platform.

The final development combines a custom theme, custom plugin architecture, industry-specific product modeling, advanced product discovery, WooCommerce-native commerce workflows, AJAX interactions, and a responsive Persian RTL interface.

Live Website
Regional availability may be limited.