ACO Product Grid

Overview

ACO Product Grid is a premium WooCommerce plugin that radically redesigns the product loop/grid on shop pages, category pages, shortcodes, carousels, and page builder widgets. It replaces the default WooCommerce product card layout with a modern, style-driven design featuring hover effects, video support, badges, floating icon buttons, wishlist, compare, countdown timers, and more.

Once activated and licensed, the plugin automatically overrides the default WooCommerce product loop on:

• Shop / archive pages
• Category pages
• Tag pages
• Search results
• Any page using the native
  shortcode
• Elementor WooCommerce widgets
• Gutenberg WooCommerce blocks

Key Features

• 4 Pre-designed visual styles with distinct hover effects
• Sale badge with automatic percentage calculation
• OUT OF STOCK badge with customizable colors
• Custom badge per product (NEW, SELLING FAST, LIMITED)
• Hover image swap (simple or gallery slider)
• Product video support (MP4 autoplay/hover)
• BunnyCDN integration for video uploads
• Floating icon buttons (Wishlist, Quick View, Compare)
• Built-in native Wishlist system
• Built-in Compare system (up to 4 products)
• Quick View modal with Swiper gallery
• Quick Add modal for fast purchases
• Swatches limiter with "+N remaining" counter
• Grid column selector (2–6 columns)
• Marquee banner (animated scrolling text)
• Countdown timer for sales
• AJAX "Load More" pagination
• Native theme pagination support
• Native
  shortcode override
• Custom icon uploads for cart, wishlist, compare, quick view
• Full license management + OTA updates
• Elementor & Gutenberg widgets/blocks
• WPML / Multilingual ready (Spanish included)
• Optional data cleanup on uninstall

Requirements

Installation & Activation

1. Download the plugin ZIP file from your ACO Design account.
2. Log in to your WordPress admin dashboard.
3. Go to Plugins → Add New → Upload Plugin.
4. Choose the downloaded ZIP file and click Install Now.
5. Click Activate Plugin.

Upon activation, the plugin:

• Creates a default configuration with Style 1 active.
• Automatically creates a Wishlist page (slug: wishlist) with the [acodesign_wishlist] shortcode.
• Registers the Product Grid admin menu under the WordPress dashboard.

License Activation

ACO Product Grid is a premium plugin that requires a valid license key.

1. Go to Product Grid → License in the WordPress admin.
2. Enter your license key (format: ACO-PG-Tx-xxxxx).
3. Click Activate License.
4. The server validates the key and displays your license tier, status, and domain count.

License Tiers

Styles Overview

ACO Product Grid includes 4 pre-designed visual styles. Each style alters the product card layout, hover effects, and interaction patterns.

Style 1 — Mardox V9 (Default)

The original flagship design. Features:

• Clean image-first layout
• Hover reveals floating icons and add-to-cart button over the image
• Title and price below the image
• SVG icon buttons with hover color transitions

Style 2 — Hover Swatches on Image

Built for stores heavily using variation swatches. Features:

• Variation swatches displayed directly on the product image on hover
• Swatches become interactive — clicking a swatch replaces the product image
• Ideal for fashion, furniture, and color-variant products

Style 3 — Interactive Quantity Bar

Designed for high-volume or quick-buy stores. Features:

• Quantity selector integrated into the product card
• AJAX add-to-cart with quantity support
• Streamlined purchase flow without leaving the loop

Style 4 — Tooltips Above Icons

Refined, minimal design with tooltip labels. Features:

• Floating action icons display tooltip labels above them on hover
• Clean, label-driven interaction for better UX clarity

Admin Settings

Access settings via Product Grid in the WordPress admin menu. The settings page is organized into 9 tabs.

General Tab

BunnyCDN Setup Guide

This integration lets you upload heavy catalog videos directly to BunnyCDN, freeing up storage space, RAM, and bandwidth from your hosting server.

Step 1: Create and Configure the Storage Zone

1. Log in to your Bunny.net dashboard.
2. In the left sidebar, go to Storage and click + Add Storage Zone.
3. Fill in the following fields:
   • Name: Enter a unique name in lowercase with no spaces (e.g., mystore-videos).
   • Main Storage Region: Select the geographic region closest to your target audience.
4. Click Add Storage Zone.
5. Once created, enter the zone, go to the Access section in the left sidebar, and copy:
   • Storage Zone Name (username).
   • Password (the FTP/API read-write password).

Step 2: Create the Pull Zone

It is critical to connect the Pull Zone to the Storage so that videos can be served publicly through the CDN.

1. In the left sidebar of Bunny, go to CDN (or Pull Zones) and click + Add Pull Zone.
2. Fill in the following fields:
   • Name: A descriptive name (e.g., video-aco).
   • Origin Type: Select Storage Zone.
   • Storage Zone: Choose the storage you created in Step 1 (mystore-videos).
     Important: Do NOT select "Custom Origin" or enter your website's address, as this will cause 404 errors when looking up videos.
3. Click Add Pull Zone.
4. Once finished, Bunny will provide a delivery hostname, usually in the format:
   https://[your-zone-name].b-cdn.net (e.g., https://video-aco.b-cdn.net). Copy it.

Step 3: Configure the Plugin in WordPress

1. In your WordPress admin, go to Product Grid → Settings → BunnyCDN Integration tab.
2. Check the Enable API Uploader box.
3. Fill in the details copied in the previous steps:
   • Storage Zone Name: The exact name of your Storage (e.g., mystore-videos).
   • Storage Password: The password from the Storage's Access tab.
   • Main Storage Region: Select in the dropdown the exact region where you created the Storage.
   • Pull Zone URL: Paste the full Pull Zone URL, including https:// (e.g., https://video-aco.b-cdn.net).
4. Click Test Connection. If everything is correct, you will see a green message: Connection successful!.
5. Click the blue Save Settings button.

Step 4: Upload Videos to Products

1. Edit any WooCommerce product.
2. In the product data panel, locate the Product Video (Catalog) section.
3. Click Upload to BunnyCDN, select your video file (.mp4 or .webm, up to 5 MB).
4. The plugin will process the upload and automatically fill the Video URL field with the final CDN URL.
5. Important! Click the Update button on the product to save the information.

Main Button Tab

Customize the add-to-cart button appearance on product cards.

Floating Icons Tab

Configure the floating action icons displayed on product card hover.

Product Card Tab

Fine-tune the appearance of the product card itself.

Wishlist Tab

Configure the built-in wishlist system.

Custom Icons Tab

Upload custom SVG or PNG icons to replace the default action buttons on product cards.

Shortcodes Tab

License Tab

Manage your license key activation, deactivation, and revalidation. Displays current tier, status, and domain information. The license server endpoint is https://acodesign.dev.

Shortcodes

[acodesign_products] — Product Grid

Displays a WooCommerce product grid with ACO styles and optional AJAX "Load More" or native theme pagination.

[acodesign_products columns="4" limit="8" total_limit="24" category="clothing" load_more="true" style="style_1"]

[acodesign_carousel] — Product Carousel

Displays a Swiper.js-powered product carousel with ACO styles.

[acodesign_carousel columns="4" limit="8" mobile_columns="2" autoplay="true" arrows="true" dots="true" style="style_2"]

[acodesign_wishlist] — Wishlist Page

Renders the full wishlist display. Place this on the page designated as your Wishlist page.

[acodesign_wishlist]

No parameters. The plugin automatically creates a Wishlist page with this shortcode on activation.

[acodesign_wishlist_counter] — Wishlist Counter

Displays a wishlist icon with an item count badge. Clicking it navigates to the wishlist page.

[acodesign_wishlist_counter]

No parameters. Typically used in the header via a widget, shortcode block, or theme hook.

[acodesign_wishlist_button] — Wishlist Button

Renders an "Add to Wishlist" / "Browse Wishlist" toggle button.

[acodesign_wishlist_button id="123"]

[acodesign_product_countdown] — Countdown Timer

Renders a countdown timer for a product's sale end date.

[acodesign_product_countdown id="123"]

Gutenberg Blocks

ACO Product Grid registers three Gutenberg blocks:

ACO Product Grid Block

• Block name: acodesign/product-grid
• Category: WooCommerce
• All shortcode parameters are exposed as block attributes in the inspector panel. Uses ServerSideRender for accurate preview in the editor.

ACO Product Carousel Block

• Block name: acodesign/product-carousel
• Category: WooCommerce
• Mirrors the [acodesign_carousel] shortcode parameters. Supports wide and full alignment.

ACO Product Archive Block

• Block name: acodesign/product-archive
• Category: WooCommerce
• Inherits the current taxonomy or shop loop. Provides ACO styling to archive pages via block attributes.

Elementor Widgets

Three Elementor widgets are registered when Elementor is active:

ACO Product Grid Widget

• Widget name: acodesign_product_grid
• Category: WooCommerce Elements
• Exposes all [acodesign_products] shortcode parameters as Elementor controls, including a style selector (Style 1–4).

ACO Product Carousel Widget

• Widget name: acodesign_product_carousel
• Category: WooCommerce Elements
• Exposes all [acodesign_carousel] shortcode parameters as Elementor controls.

ACO Product Archive Widget

• Widget name: acodesign_product_archive
• Category: WooCommerce Elements
• Automatically inherits the current WooCommerce query and applies ACO styling with a style selector (Style 1–4).

Product-Level Features

Product Video

Add an MP4 video to any product that plays in the product loop instead of the static image.

1. Edit a product in WooCommerce.
2. Scroll to the Product Video meta box.
3. Upload an MP4 video (via BunnyCDN if enabled, or enter a direct MP4 URL).
4. Save the product.

The video plays according to the Video Playback Mode setting:

• Autoplay: Video starts automatically when visible.
• Hover: Video plays only when the user hovers over the product card.

Video meta keys: _aco_video_url, _aco_video_playback_mode. The plugin adds the CSS class aco-has-video to video-enabled product cards.

Sale / OOS / Custom Badges

Three badge types appear on product cards:

• Sale Badge: Automatically applied to on-sale products. Can display the discount percentage (e.g., −25%) or the text "Sale!" based on the Badge Sale Mode setting.
• OUT OF STOCK Badge: Automatically applied to out-of-stock products.
• Custom Badge: Manually set per product. Edit a product → Custom Badge Text field (e.g., "NEW", "SELLING FAST").

All badge colors are configurable under Product Card → Badge Colors.

Marquee Banner

A horizontally scrolling text banner that overlays the product image.

• Globally enabled/disabled under Product Card → Enable Global Marquee.
• Default text configurable in settings.
• Per-product override: Edit a product → enable Enable Marquee and set Marquee Text.

Marquee meta keys: _aco_enable_marquee, _aco_marquee_text

Countdown Timer

A countdown timer displayed on product cards and optionally on single product pages.

• Global setting: Auto-show on single product pages under Product Card.
• Per-product setup: Edit a product → enable Enable Countdown and set Countdown Date/Time.
• Shortcode: Use [acodesign_product_countdown] to place the timer anywhere.

Countdown meta keys: _aco_enable_countdown, _aco_countdown_date, _aco_countdown_time

Hover Image Swap

When hovering over a product card, the image swaps to another product image.

Two modes (set under General → Hover Image Style):

• Simple Hover: Swaps to the second image in the product gallery.
• Gallery Slider: Cycles through all gallery images while the cursor hovers over the card.

Built-in Wishlist System

ACO Product Grid includes a fully native wishlist system — no third-party plugin required.

• Guests: Wishlist items stored in a cookie (acodesign_wishlist), valid for 30 days.
• Logged-in users: Wishlist items stored in user meta (_acodesign_wishlist).
• AJAX toggle: Clicking the heart icon adds/removes the product without page reload.
• Wishlist page: The [acodesign_wishlist] shortcode renders the full wishlist.
• Wishlist counter: The [acodesign_wishlist_counter] shortcode shows a floating icon with item count.

Built-in Compare System

Compare up to 4 products side by side.

• Guests: Compare items stored in a cookie (aco_compare), valid for 30 days.
• Logged-in users: Compare items stored in user meta (_aco_compare).
• Floating Compare Bar: Appears at the bottom-right (or left) when products are added.
• Compare Modal: Full-screen modal with a table comparing products side by side.

Quick View & Quick Add Modals

Quick View

Clicking the eye icon opens a modal with:

• Full Swiper.js product image gallery
• Title, price, rating
• Product description excerpt
• Variation swatches (if variable product)
• AJAX add-to-cart (with quantity selector)

Quick Add

A simplified modal for quick purchases with product image, title, price, quantity selector, and AJAX add-to-cart button.

Swatches Limiter

When using Variation Swatches for WooCommerce, the plugin can limit the number of swatches shown per product card. Configure under Product Card → Swatches Limit. Set to any number (e.g., 3) to show only the first N swatches. Remaining swatches display a "+N" count indicator. Set to 0 for unlimited.

Grid Column Selector

A user-facing toolbar above the shop loop that lets visitors choose how many columns to display.

• Toggle: Product Card → Enable Column Selector
• Options: 2, 3, 4, 5, or 6 columns
• Persistence: The user's choice is saved in localStorage

Compatibility

Theme Compatibility

ACO Product Grid implements a five-layer theme compatibility system:

• Template override: Forces content-product.php from the plugin via wc_get_template filters.
• Hook purging: Removes all WooCommerce loop hooks originating from theme directories.
• Hook restoration: Re-adds core WooCommerce loop hooks if the theme removed them.
• Hook rescue: Moves plugin hooks from theme-specific custom hooks back to native WooCommerce hooks.
• Global assassin: In-memory purging of Kadence/Blocksy-specific hooks and closures.

Tested themes: Kadence, Blocksy, Astra, Storefront, and most WooCommerce-compatible themes.

Variation Swatches for WooCommerce

The plugin integrates with Variation Swatches for WooCommerce by CartFlows (free):

• Forces swatches position to woocommerce_after_shop_loop_item_title
• Enables swatches on related products and product pages
• Forces CFVSW assets on all frontend pages for modal support
• Disables CFVSW native swatch limitation to let ACO's limiter handle it
• Offers one-click installation from the admin notices area

YITH Plugins

The plugin is compatible with:

• YITH WooCommerce Wishlist — forced to shortcode mode; loop injection disabled.
• YITH WooCommerce Quick View — button reused inside ACO's floating icons wrapper.
• YITH WooCommerce Compare — button reused inside ACO's floating icons wrapper.

WPML / Multilingual

The plugin is WPML compatible. Translation files included:

• acodesign-product-loop-styles.pot (template)
• acodesign-product-loop-styles-es_ES.po / .mo (Spanish)

AJAX Load More

The [acodesign_products] shortcode supports AJAX "Load More" pagination. When load_more="true" is set, a Load More button appears below the grid. Clicking it loads the next batch of products via AJAX without a page reload. The button disappears when all products are loaded.

Native Theme Pagination

The [acodesign_products] shortcode also supports native numbered pagination via paginate="true". This renders standard WooCommerce pagination links below the grid, styled to match your theme.

Data Storage & Privacy

Uninstall & Cleanup

The plugin includes an optional deep cleanup setting under General → Delete on Uninstall.

When enabled:

• All plugin options (acodesign_pls_settings, license data) are removed.
• All user meta (_acodesign_wishlist, _aco_compare) is deleted.
• All product meta (_aco_video_url, _aco_marquee_text, _aco_countdown_date, etc.) is removed via the centralized meta keys registry.
• The Wishlist page is not deleted (it becomes a normal page).

When disabled (default): no data is removed on uninstall.

Support

For support, bug reports, or feature requests:

• Email: hello@acodesign.dev
• Website: acodesign.dev/acodesign-product-grid
• Documentation: acodesign.dev/docs/product-grid
• FAQs: acodesign.dev/acodesign-product-grid/aco-product-grid-faqs

Before contacting support:

1. Ensure your license is active (Product Grid → License).
2. Try revalidating your license if you see issues.
3. Check that WooCommerce is updated to the latest version.
4. Temporarily switch to a default theme (Storefront) to rule out theme conflicts.
5. Disable other plugins one by one to identify conflicts.