Arik Dynamic Table & Addons for Elementor
| 开发者 | wcblogs87 |
|---|---|
| 更新时间 | 2026年5月28日 21:18 |
| PHP版本: | 8.0 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Arik Dynamic Table & Addons for Elementor is a comprehensive collection of premium-quality widgets and content elements designed to extend Elementor's capabilities. Whether you're building eCommerce stores, business websites, or content-rich pages, this plugin provides the tools you need to create stunning, professional layouts without coding.
Perfect for WooCommerce stores, this addon pack includes specialized product display widgets, category grids, and hierarchy views alongside versatile content elements like dynamic tables, galleries, pricing tables, and more.
🚀 22 Free Premium Elementor Widgets
Data Display & Tables
- Dynamic Table - Create beautiful, responsive tables with unlimited rows, column spans, and advanced styling
- Pricing Table - Showcase pricing plans with customizable features and call-to-action buttons
- Price Menu - Perfect for restaurants and service providers to display menu items and prices
- Product Category Grid Style - Display product categories in elegant grid layouts
- Product Categories Card - Circular icon/image category cards with badge, label, sub-label, and per-item link (Shop-by-Category style)
- Product Category Hierarchy Grid Two - Alternative hierarchy display with advanced styling
- Product Category Inline Style - Horizontal inline category presentation
- Product Hierarchy One Style - Single-column product hierarchy display
- Product Magazine Style - Magazine-inspired product showcase layouts
- Product Table Style - Display products in organized table formats
- Product Tags Style - Stylish product tag clouds and lists
- Gallery - Create stunning image galleries with multiple layout options
- Grid Image Box - Display images in customizable grid layouts with overlays
- Text Grid Box - Organize text content in responsive grid structures
- Image Captions - Add beautiful, styled captions to your images
- Image Or Video - Flexible media display for images and embedded videos
- Tabs - Organize content in clean, accessible tabbed interfaces
- Heading - Advanced heading styles with custom typography and effects
- Site Logo & Text - Dynamic site branding with customizable logo and text
- Dynamic Page Title - Automatically display page titles with custom styling
- Authors Card - Showcase author information with avatars and bio
- Contact Info - Display contact details in styled formats
- Fully Dynamic & Intuitive - Build complex layouts with Elementor's visual editor
- WooCommerce Optimized - Specialized widgets for product and category display
- Advanced Styling Controls - Customize colors, typography, spacing, borders, and effects
- Responsive Design - All widgets are mobile-friendly and adapt to any screen size
- Performance Focused - Lightweight code following WordPress and Elementor best practices
- HPOS Compatible - Full support for WooCommerce High-Performance Order Storage
- Multilingual Ready - Translation-ready with included .pot file
- Regular Updates - Continuous improvements and new features
- Developer Friendly - Clean, well-documented code following WordPress coding standards
- WooCommerce store owners
- Web designers and agencies
- Business websites
- Portfolio sites
- Restaurant and menu sites
- Content publishers
- Bloggers and content creators
- Email Support: helpwcblog@gmail.com
- Website: https://gernx.com/
- Support Forum: WordPress.org Support
- LinkedIn: Gernx IT
安装:
Automatic Installation
Log in to your WordPress dashboard
Navigate to Plugins → Add New
Search for "Arik Dynamic Table & Addons for Elementor"
Click "Install Now" and then "Activate"
Open Elementor editor to access all new widgets
Manual Installation
Download the plugin zip file
Log in to your WordPress dashboard
Navigate to Plugins → Add New → Upload Plugin
Choose the downloaded zip file and click "Install Now"
After installation, click "Activate Plugin"
Open Elementor editor - widgets will appear in the elements panel
After Activation
Edit any page with Elementor
Look for "Arik" widgets in the left sidebar elements panel
Drag and drop widgets onto your page
Customize using the intuitive controls in the left panel
Preview and publish your page
常见问题:
Does this plugin require Elementor Pro?
No, Arik Dynamic Table & Addons for Elementor works perfectly with the free version of Elementor. However, it's also fully compatible with Elementor Pro if you have it installed.
Is this compatible with WooCommerce?
Yes! The plugin includes multiple WooCommerce-specific widgets for displaying products, categories, tags, and hierarchies. It's fully compatible with WooCommerce and supports High-Performance Order Storage (HPOS).
Will this slow down my website?
No. Arik Dynamic Table & Addons for Elementor is built with performance in mind. Assets are loaded conditionally - only when widgets are used on a page. The code follows WordPress and Elementor best practices for optimal performance.
Can I use multiple widgets on the same page?
Absolutely! You can use as many Arik widgets as you need on any page. Each widget instance can have completely different styling and settings.
Is the plugin translation-ready?
Yes, the plugin is fully translation-ready and includes a .pot file. You can translate it to any language using tools like Loco Translate or WPML.
Does it work with my theme?
Yes! Arik Dynamic Table & Addons for Elementor works with any WordPress theme that supports Elementor. The widgets inherit your theme's styling and can be customized to match your design.
Can I customize the widget styles?
Yes. Each widget includes extensive styling controls within Elementor's interface. You can customize colors, typography, spacing, borders, backgrounds, and more without writing any code.
Is there documentation available?
Yes, comprehensive documentation is available on our website with tutorials, examples, and best practices for each widget.
How do I get support?
You can reach us via email at helpwcblog@gmail.com or through our website contact form. We're committed to providing timely and helpful support.
What happens to my content if I deactivate the plugin?
If you deactivate the plugin, pages using Arik widgets will display Elementor's default "widget not found" message. Your content settings are preserved, so reactivating the plugin will restore everything.
更新日志:
2.0.2 - 2026-05-25
New widget, expanded query controls, WordPress 7.0 / WooCommerce 10.7 / Elementor 4.0.9 readiness, and a round of CSS fixes around image aspect ratio and content alignment.
DONE
New widget
- New widget: Arik Product Categories Card — circular icon / image / SVG / icon-picker category cards with badge, label, sub-label, per-item link, and per-item color overrides. Includes full Style sections: Grid Wrapper, Card, Icon / Image, Label & Sub-Label, Hover Effects, and Badge. Layout & Grid section with responsive Columns, Gap, Card Alignment, Text Alignment, and Icon Position (top / left / right). Link & Accessibility section with three switches: Wrap Entire Card in Link, Show Sub-Label, Show Badge, plus an ARIA Label Fallback.
- The new widget includes a Backbone
content_template()for editor live preview, using the officialview.addRenderAttribute()API. wp_ksesallowlist for inline SVG content added so SVG icon markup is sanitized before output.- Repeater image uses
wp_get_attachment_image()withloading="lazy"anddecoding="async"when an attachment ID is available, falling back to an escaped URL otherwise. -
Icon control uses a
recommendedsubset to reduce the Elementor icon picker's initial paint cost in the editor. Compatibility -
Tested with WordPress 7.0 —
Tested up toraised from 6.9 → 7.0;Requires at leastraised from 5.8 → 6.6. - Tested with WooCommerce 10.7 —
WC tested up toraised from 10.4.2 → 10.7; minimum raised to 8.0. - Tested with Elementor 4.0.9 —
Elementor tested up toraised from 3.35.6 → 4.0.9; added explicit minimum-version check (3.20.0) with a non-fatal admin notice when below. - Added explicit minimum-PHP runtime check with a non-fatal admin notice when below 8.0.
-
Declared compatibility with WooCommerce
cart_checkout_blocks(alongside the existingcustom_order_tables/ HPOS declaration). Order By — controls added / corrected - Term-based widgets (Product Category Grid, Product Category Inline, Product Tag): Order By now includes Menu Order, Name, Slug, Product Count, Term ID, Description, Parent, and None. Menu Order moved to the first position and set as the default.
- Post / product widgets (Product Table, Product Hierarchy Grid, Product Hierarchy One): Order By now includes Menu Order, Date, Last Modified, Title, Slug, ID, Author, Random, and Comment Count. Menu Order moved to the first position and set as the default.
- Render-side allowlists tightened to match each query type (
get_terms()vsWP_Query) — no invalid orderby values can reach the database. - Fixed: Product Hierarchy One and Product Hierarchy Grid had
'default' => 'menu_order'on the Order (ASC/DESC) control, which is not a valid value for that field. Default corrected toASC. -
Magazine Grid widget: previously had no Order By or Order control at all. Both added, with Menu Order / Date / Modified / Title / Price / Popularity / Rating / Random. Price/Popularity/Rating map to the correct WooCommerce meta keys (
_price,total_sales,_wc_average_rating) withmeta_value_numorderby. Custom product reordering (Product Hierarchy One, Product Hierarchy Grid, Product Magazine Grid) - New control: Offset — skip N products from the start of the query result.
- New control: Reverse Final Order — flips the result list end-to-end after the query runs (last product becomes first).
- New control: Move First Product to Last — rotates the front of the list to the back.
- New control: Shift Count — pairs with the rotate switch; rotate any N products from front to back.
- These controls are applied post-query in PHP, so they work with every Query Type (Recent, Featured, Sale, Best Selling, Top Rated, Manual Selection). Image Aspect Ratio (Product Hierarchy One, Product Hierarchy Grid, Product Category Hierarchy Two)
- Fixed: in the previous build, an internal Order By patch incorrectly overwrote the Image Aspect Ratio dropdown options in Product Hierarchy One and Product Hierarchy Grid with order-by values (Menu Order / Date / Title / Slug / etc.). Aspect Ratio is now restored to actual aspect values.
- New options: Auto, 1:1, 4:3, 3:2, 16:9, 21:9, 3:4, 2:3, 9:16, and Custom.
- Custom mode adds a slider (0.25 – 4.0, step 0.01) for any free ratio, with responsive overrides per breakpoint.
- Render-side allowlist tightened so only valid CSS aspect-ratio classes can be emitted. Image fit / "gray strip below product card" fix
-
Fixed: aspect-ratio CSS was applied to the inner
<img>(withposition: absolute; min-height: 100%), causing the image to render shorter than its card and leaving a visible gray strip at the bottom of the card on certain layouts (Product Hierarchy Grid / Hierarchy One Featured layouts). - Aspect-ratio CSS is now applied to the card link wrapper instead of the image. The image stays
100% × 100%; object-fit: coverand fills the wrapper completely regardless of source dimensions. -
New
.aspect-ratio-3-2,.aspect-ratio-2-3, and.aspect-ratio-customCSS rules added to support the expanded ratio set. Horizontal Alignment fixes (6 widgets) -
Fixed: in Product Hierarchy One, Product Hierarchy Grid, Product Magazine Grid, Product Tag, Product Category Hierarchy Grid, and Product Category Hierarchy Two, the Horizontal Alignment control only emitted one of
text-alignoralign-items— but the target content blocks aredisplay: flex; flex-direction: column;, where neither property alone produces the expected result. Each widget's control now usesselectors_dictionaryto emit BOTHalign-items(the flex cross-axis property that actually moves children) ANDtext-align(for text inside any 100%-width child). -
Removed hard-coded
align-items: flex-start; text-align: left;from.arik-prod-content,.arik-prod-one-content,.arik-product-content, and.arik-hierarchy-contentin the frontend stylesheet — those were overriding the Horizontal Alignment control. Defaults are now driven by the widget controls themselves. Categories Card widget — bugs fixed in same release window -
Fixed: editor's left-side Elements panel went blank when a Categories Card was on the page. Root cause was a
TypeError: C.replace is not a functionin Elementor'sControlIconsView— the icon control had'fa4compatibility' => 'icon', which made Elementor's FA4→FA5 string migration run against an array value. Removedfa4compatibilityand gave the control an explicit empty default of{ value: '', library: '' }. - Fixed: the Backbone
content_template()had a barereturn;at the top level (illegal inside Underscore'swith(obj){…}wrapper), a malformed<# } } #>chained brace, an incorrect 5th argument toelementor.helpers.renderIcon(), and aprint()call that isn't exposed in the template scope. All four were causing JS SyntaxErrors that propagated up and blanked the Elements panel. Template rewritten with a single empty-state<# if … else … #>block, separate<# if #>branches per icon type, and atry/catcharound the icon render. A JS template compiler/parser check is now part of the build to prevent recurrence. - Fixed: when a Font Awesome SVG with no intrinsic
width/height(onlyviewBox) was picked, it filled the entire circle wrap. CSS containment box added:.arik-pcc-iconis now 60% × 60% of the wrapper withoverflow: hidden;<svg>,<img>, and<i>inside fit viaobject-fit: containor font-size driven by container. Badge still overflows on top of the outer wrap (which keepsoverflow: visible). -
Text Alignment in the Categories Card was using
text-alignonly on.arik-pcc-text(a column flex). Fix usesselectors_dictionaryto emit bothalign-itemsandtext-align, same approach as the 6 widgets above. Hardening -
All
@versiondocblocks across the codebase bumped to 2.0.2 in a single pass. -
New widget's PHP and JS template are checked at build time:
php -lon every file, a stub-Elementor harness that loads every widget class without fatal, and a custom Underscore template compiler that parses thecontent_template()JS body through the V8 parser. Removed widgets - Removed: Arik Product Hierarchy Grid Style — superseded by Arik Product Hierarchy One Style and Arik Product Magazine Style which cover the same use cases with fewer responsive edge cases.
- Removed: Arik Product Category Hierarchy Grid — superseded by Arik Product Category Hierarchy Grid Two and Arik Product Categories Card. Total widget count is now 22 (was 24).
- The corresponding entries were removed from the admin widget toggles panel and the plugin's widget registry. Existing pages that placed these widgets will render Elementor's "widget not found" message; the stored settings remain in the database but cannot be displayed. Editor search & widget title alignment
-
Fixed: six product widgets had a
get_title()that did not match the title shown in the admin "Active Widgets" settings panel. Searching for the admin name (e.g. "Arik Product Category Inline Style") returned "No widget found" in the Elementor Elements panel. All widget titles are now identical to their admin labels: - Arik Product Category Grid Style
- Arik Product Category Hierarchy Grid Two
- Arik Product Category Inline Style
- Arik Product Hierarchy One Style
- Arik Product Magazine Style
- Arik Product Tags Style
-
Expanded
get_keywords()on the same six widgets so partial searches ("inline", "magazine", "hierarchy", "tag") also surface them in the Elements panel. Image Aspect Ratio — Arik Product Category Hierarchy Grid Two -
Fixed: the Image Aspect Ratio dropdown in Style → Image Settings had no visible effect because the rule was written to
.arik-cat-img, an absolute-fill<img>element whosewidth: 100%; height: 100%overrode theaspect-ratiodeclaration. The rule is now written to the card item itself (scoped to the "grid" layout only — magazine layout cells keep their grid-area-driven shape). The image inside still fills viaobject-fit: cover. Item Min Height continues to act as a floor. Image Position (Left / Right) — Arik Grid Image Box -
Fixed: when Image Position was set to Left or Right, the image area expanded to fill the entire card and pushed the title, description, and button out of view. The base CSS now reserves 40% of the card width for the image area when it sits beside the content, with a responsive Image Width control (default desktop 40%, tablet 45%, mobile 100% so the card collapses to vertical on phones). The content area receives
min-width: 0so its text can wrap inside the flex container.!importantremoval -
Removed every
!importantdeclaration from the plugin frontend stylesheet and admin stylesheet. Specificity bumps were added in their place (.elementor-widgetprefix for frontend rules,.wrapprefix for admin rules, full ancestor chains where the rule needs to beat both Elementor's reset CSS and an external theme). Third-party stylesheets shipped with the plugin (Swiper) are untouched. NOT DONE — pending for a follow-up release - Product Table widget did NOT receive the new Offset / Reverse / Move First to Last / Shift Count controls. Different render structure (table rows, not cards) and no immediate bug report against it.
- The 18 widgets outside this turn's scope have NOT had a full CSS or responsive audit. Only widgets with a specific reported bug or screenshot from the customer were modified.
- No PHPCS / WordPress Coding Standards sniff run on the codebase. Conventions followed by hand (tab indent, long array syntax, escape-on-output, sanitize-on-input, type declarations) but not machine-verified.
- No
content_template()was added to the other product widgets (Product Hierarchy One, Hierarchy Grid, Magazine) — they still re-render on save rather than live in the editor. Only the new Categories Card has live preview. - Icon-picker performance lag in the admin is mitigated (Categories Card uses the
recommendedsubset and a strictconditionon the control) but not eliminated. The underlying cost is inside Elementor'sControlIconsViewSVG fetch, not in this plugin. - The CSS aspect-ratio fix and the gray-strip fix have been written and shipped but have not been visually verified on a live staging site by the plugin author. Customer testing required.
- Fixed: Removed erroneous double backslashes throughout all three widgets (\Elementor\ → \Elementor) that caused fatal PHP class-not-found errors on strict autoloaders
- Fixed: Renamed deprecated _register_controls() to register_controls() across all three widgets (the underscore-prefixed method is removed in Elementor 3.x and triggers PHP deprecation notices)
- Fixed: Added PHP 8.x return type declarations (: string, : array, : void) to all public and protected methods for strict-type compatibility with PHP 8.0–8.4
- Fixed: Replaced all short array syntax [] with long array() syntax to comply with WordPress Coding Standards (WPCS)
- Removed: Redundant @access phpdoc tags — visibility is already declared by the method keyword Security Fixes
- Fixed: $title_tag (Text Grid Box, Site Logo & Text) was passed directly to esc_attr() without being validated first; now allowlisted against a ALLOWED_TITLE_TAGS constant before output, preventing unexpected tag injection
- Fixed: $wrapper_tag (Site Logo & Text) and $display_type were not allowlisted; both are now validated against defined constant arrays before use in HTML output
- Fixed: custom_css_class (Text Grid Box) was only run through esc_attr() — added a sanitize_css_classes() helper that strips non-CSS characters ([^a-zA-Z0-9\s_-]) before escaping
- Fixed: Button link attributes in Text Grid Box had class="arik-text-box-button" set as a raw inline attribute alongside print_render_attribute_string(), producing a duplicate class attribute in the DOM; class is now registered on the same handle via add_render_attribute() and merged correctly
- Fixed: External links in content_template() JS templates were missing rel="noopener noreferrer"; a relParts[] accumulator now builds the rel attribute correctly for external and nofollow combinations Control Registration Fixes
- Fixed: Opacity SLIDER controls (Site Logo & Text, normal and hover tabs) had a flat range array (range => [min, max, step]) instead of the required unit-keyed structure (range => [px => [min, max, step]]); the flat structure is silently ignored by Elementor, meaning the slider had no enforced range limits in the editor
- Fixed: Tabs widget content section was missing an explicit tab => TAB_CONTENT declaration, causing it to appear outside the Content tab in some Elementor versions
- Fixed: nav_border_radius in the Tabs widget used add_control() instead of add_responsive_control(), preventing per-breakpoint border-radius overrides on tablet and mobile Render & Editor Fixes
- Fixed: render() in the Tabs widget output class and data-* attributes via raw string concatenation inside HTML; replaced with add_render_attribute() / print_render_attribute_string() to properly integrate with Elementor's attribute pipeline (CSS animations, dynamic tags, motion effects)
- Fixed: Inline editing in Site Logo & Text used two separate render-attribute handles for the same element (title_text and custom_text); consolidated into a single title_element handle using add_render_attribute() array syntax to prevent duplicate or missing attributes on the title tag
- Fixed: Empty $settings['text_boxes'] / $settings['tabs'] check silently returned with no output; replaced with a visible printf() editor notice so content authors see actionable feedback instead of a blank widget in the Elementor panel New: content_template() — Backbone JS Live Preview
- Added: content_template() to all three widgets (was entirely absent), enabling live preview updates in the Elementor editor without a page reload
- All three JS templates use view.addRenderAttribute() / view.getRenderAttributeString() — the official Elementor JS API — instead of manual string concatenation for safe attribute output
- Site Logo & Text: view.addInlineEditingAttributes('custom_text', 'none') correctly wires up double-click-to-edit in the editor (replaces manual data-* attribute strings)
- Text Grid Box: Applies an inline grid-template-columns style in the JS template so column-count changes are reflected in real time before the Elementor dynamic stylesheet is regenerated
- Tabs & Text Grid Box: Uses _.each() for repeater iteration, {{ }} double-mustache for plain-text titles (HTML-escaped), and {{{ }}} triple-mustache for WYSIWYG content (raw HTML rendered)
- All JS templates include allowlist guards for title tags and wrapper tags to mirror the PHP render() security model on the editor side Refactoring
- Refactored: Monolithic register_controls() split into focused protected helper methods in all three widgets — register_content_controls(), register_nav_style_controls(), register_box_style_controls(), etc. — for improved readability and maintainability
- Added: ALLOWED_TITLE_TAGS and ALLOWED_WRAPPER_TAGS as protected const on relevant widget classes, making the allowlists reusable across both render() and content_template()