CatCraft for WooCommerce

Àpèjúwe

CatCraft for WooCommerce is a Gutenberg block plugin by WPCraftHub that lets you showcase product categories in responsive grid or slider layouts with advanced filtering and sorting options.

The block shows a live preview inside the editor Ìtumọ̀ Yorùbá: — exactly as it will appear on the frontend Ìtumọ̀ Yorùbá: — so you always know what your visitors will see.

CatCraft for WooCommerce is not affiliated with or endorsed by WooCommerce or Automattic.

Key Features

• Grid Layout Ìtumọ̀ Yorùbá: — Responsive grid with 1-6 columns
• Slider Layout Ìtumọ̀ Yorùbá: — Touch-enabled carousel with navigation and pagination
• Live Editor Preview Ìtumọ̀ Yorùbá: — See real categories directly in the block editor
• Category Limit Ìtumọ̀ Yorùbá: — Show all or limit to a specific number
• Sort Options Ìtumọ̀ Yorùbá: — Sort by name, count, ID, or slug
• Order Control Ìtumọ̀ Yorùbá: — Ascending or descending
• Product Count Ìtumọ̀ Yorùbá: — Show/hide product count per category
• Hide Empty Categories Ìtumọ̀ Yorùbá: — Toggle categories with no products
• Fully Responsive Ìtumọ̀ Yorùbá: — Mobile, tablet, and desktop optimised
• Native Gutenberg Ìtumọ̀ Yorùbá: — No page builder required
• Lightweight Ìtumọ̀ Yorùbá: — Swiper.js bundled locally, no CDN dependency
• SEO Friendly Ìtumọ̀ Yorùbá: — Clean semantic HTML with lazy-loaded images
• Translation Ready Ìtumọ̀ Yorùbá: — Fully internationalised (i18n)

Customisation

CSS classes for custom styling:

• .cat-display-block Ìtumọ̀ Yorùbá: — Main container
• .cat-display-layout-grid Ìtumọ̀ Yorùbá: — Grid layout
• .cat-display-layout-slider Ìtumọ̀ Yorùbá: — Slider layout
• .cat-display-item Ìtumọ̀ Yorùbá: — Individual category card
• .cat-display-title Ìtumọ̀ Yorùbá: — Category name
• .cat-display-count Ìtumọ̀ Yorùbá: — Product count

Source Code & Build Instructions

The full source code for this plugin is publicly available on GitHub:

https://github.com/jenish-wordpress/catcraft-for-woocommerce

The build/index.js file is compiled from the source files in the src/ directory using @wordpress/scripts (webpack).

To build from source:

1. Clone the repository
2. Run npm install
3. Run npm run build

The src/ directory contains all human-readable source files:

• src/index.js Ìtumọ̀ Yorùbá: — Block registration entry point
• src/edit.js Ìtumọ̀ Yorùbá: — Block editor component (JSX)
• src/style.scss Ìtumọ̀ Yorùbá: — Frontend styles
• src/editor.scss Ìtumọ̀ Yorùbá: — Editor-only styles
• src/block.json Ìtumọ̀ Yorùbá: — Block metadata
• src/render.php Ìtumọ̀ Yorùbá: — PHP server-side render callback

Third Party Libraries

Swiper.js Ìtumọ̀ Yorùbá: — bundled locally inside /assets/
* Purpose: Slider / carousel functionality
* License: MIT
* Homepage: https://swiperjs.com

No data is sent to any external server. Swiper is served from the pluginÌtumọ̀ Yorùbá: ’s own asset folder.