Code Amp

<p>Build a list or grid layout of any post type (products, pages, posts + more).</p>
<p>The visual editing experience makes creating unique designs a breeze.</p>
<ul>
<li>Design post templates (cards) using our drag and drop builder</li>
<li>Built for both Gutenberg users and non Gutenberg users (blocks + shortcodes available)</li>
<li>Query builder – select from multiple post types or restrict by tags, categories, taxonomies, authors and more</li>
<li>Works with any theme</li>
<li>No coding required</li>
<li>Responsive options</li>
</ul>
<p><strong>Links</strong></p>
<ul>
<li><a href="https://customlayouts.com" rel="nofollow ugc">Website</a></li>
<li><a href="https://customlayouts.com/examples/" rel="nofollow ugc">Examples</a></li>
<li><a href="https://customlayouts.com/documentation/" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://twitter.com/wpcustomlayouts" rel="nofollow ugc">Follow us</a> for updates and tips</li>
</ul>
<h3>What can you make with this plugin?</h3>
<ul>
<li>Popular posts widget</li>
<li>Recent posts widget</li>
<li>A shop layout for listing products (*when combined WooCommerce, Easy Digital Downloads and other product plugins)</li>
<li>A post grid</li>
<li>A portfolio grid</li>
<li>Masonry layouts</li>
<li>Custom post type layouts<br />
And much more…</li>
</ul>
<h3>Layout Editor</h3>
<p>Build single column or grid based layouts using the visual editor.</p>
<ul>
<li>Supports Masonry out of the box</li>
<li>Tons of design options to build the layout you want</li>
<li>Choose to add numbered Pagination ( ‘Load more’ and ‘Infinite scroll’ options are planned )</li>
<li>Powerful query builder</li>
<li>Responsive columns (choose how many columns to show for each device size – and set your own breakpoints)</li>
</ul>
<h3>Query Builder</h3>
<p>Options include:</p>
<ul>
<li>Multiple post type selection</li>
<li>Tag, category and custom taxonomy restriction</li>
<li>Single author or multiple author restriction</li>
<li>Ordering by – post title, published date (for recent posts), modified date, post ID, comment count (for popular posts), author</li>
<li>Posts per page</li>
<li>Offset</li>
<li>Ignore sticky posts</li>
</ul>
<h3>Template Editor</h3>
<ul>
<li>Design individual templates (cards) using our drag and drop editor – creativity is your only limit</li>
<li>Link them with your layouts to build beautiful designs</li>
<li>Hundreds of design options</li>
<li>Unique blocks for building templates + template editor
<ul>
<li>granular control over the blocks you add to your design – choose from a growing list</li>
<li>to re-arrange blocks, just drag and drop</li>
<li>each block has it’s own sidebar full of options such as spacing, colors (including gradients + alpha transparencies), font settings, borders, and more.</li>
</ul>
</li>
<li>Currently available blocks: <strong>Post Title</strong>, <strong>Post Type</strong>, <strong>Post Excerpt</strong>, <strong>Post Author</strong>, <strong>Published + Modified Date</strong>, <strong>Custom Field</strong>, <strong>Taxonomies</strong>, <strong>Link</strong>, <strong>Basic Text</strong> (with shortcode support).<br />
<a href="https://customlayouts.com/documentation/template-elements/" rel="nofollow ugc">Find out more about our template blocks</a>.</li>
</ul>
<h3>Gutenberg integration</h3>
<ul>
<li>Custom blocks for building layouts</li>
<li>Seamlessly integrates with our Template Editor</li>
<li>UI built using 90% Gutenberg components 👍</li>
<li>Experimental FSE Query block support (drop our Post Template block into the Query block…)</li>
<li>Works with the version of Gutenberg shipped in WP core, and the Gutenberg plugin (using the latest stable build)</li>
</ul>
<h3>Built for speed</h3>
<ul>
<li>At its base – loads only 1 css file and 1 javascript file on the frontend – total bundle size approx 15kb.</li>
<li>CSS file dynamically created, saving resources and requests per page load (+ avoiding inline CSS)</li>
<li>Caches posts + queries for optimum performance</li>
<li>Not jQuery dependant</li>
</ul>
<h3>Includes 7 sample templates</h3>
<p>We’ve included a pack of templates ready for you to customise – check the installation tab for how to import these to your site.</p>
<h3>Multilingual ready</h3>
<p>Custom Layouts should support most multilingual plugins – we use a custom post type to store content that is not stored in the block editor.<br />
* We’ve also added specific support for WPML’s Advanced Translation Editor.</p>
<h3>Known Issues</h3>
<ul>
<li>Admin Template Editor only works on desktop computers (tablets + mobiles not supported)</li>
<li>Admin Template Editor does not work on IE, all other major browsers supported – ** the frontend of this plugin supports IE 11+, no sweat</li>
</ul>
<h3>Roadmap</h3>
<ul>
<li>Improve performance and load speed by providing an option to use CSS Grid for layouts + masonry</li>
<li>Support more CSS unit types in more places</li>
<li>Blocks for WooCommerce</li>
<li>Blocks for ACF</li>
<li>More template blocks (possibly use the block library)</li>
<li>Additional hover options</li>
<li>Additional font options.</li>
<li>Social/sharing blocks</li>
</ul>
<p><strong><a href="https://wordpress.org/support/plugin/custom-layouts/reviews/#new-post" rel="ugc">Reviews</a> help us improve (and climb the plugin rankings)</strong></p>


Custom Layouts – Post + Product grids made easy

...customize the default image and disable default image for posts that have none.

Does just what's needed, will give another star when I can...

Build a list or grid layout of any post type (posts, products, pages + more).

wpazleen

sambyte

bilkisdev

<p><strong>Store Display</strong> gives WooCommerce stores 12+ professional product layouts plus built-in wishlist analytics, product compare, quick view, direct shop page integration, layout cloning, and JSON export/import. One plugin instead of four or five.</p>
<p>Most store owners end up installing separate plugins for product grids, wishlists, comparison tables, and quick view popups. Store Display replaces all of them. Build WooCommerce product grids, sliders, masonry galleries, flip cards, product tables, and animated showcase layouts, then assign them directly to your shop, category, and tag pages. No coding required.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/M4T0jubp9h8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p><a href="https://wpazleen.com/product-display/" rel="nofollow ugc">Website</a> | <a href="https://wpazleen.com/docs/" rel="nofollow ugc">Documentation</a> | <a href="https://wpazleen.com/support/" rel="nofollow ugc">Pro Support</a></p>
<p><strong>The only free WooCommerce layout plugin with built-in wishlist analytics, shop page integration, layout clone, and JSON export/import.</strong></p>
<h4>What is included in the free version</h4>
<ul>
<li>12+ professional layouts: Product Grid, Card, Slider, Masonry, Product Gallery, Flip, Product Table, Product Showcase, Category Tabs, List, CTA, and Caption with 18+ hover effects</li>
<li>Shop Page Integration: assign any layout to your shop, category, or tag pages using 8 position options, including replacing the default WooCommerce product grid entirely</li>
<li>Layout Clone: duplicate any saved layout with one click</li>
<li>Export and Import (JSON): move layouts between sites, ideal for agencies and developers</li>
<li>Built-in Wishlist: floating button, modal, guest support, session persistence, and social sharing</li>
<li>Wishlist Analytics Dashboard: activity trend chart, top wishlisted products, restock opportunities, top user insights, live feed, and retention rate tracking</li>
<li>Product Compare: side-by-side table with attributes, ratings, and direct Add to Cart</li>
<li>Quick View Popup: product details, image gallery, variation selection, and Add to Cart without leaving the page</li>
<li>AJAX Filtering: filter by category, price, tag, attribute, stock, and custom taxonomy without page reload</li>
<li>Elementor Widget with live preview</li>
<li>Gutenberg Block with settings panel</li>
<li>WooCommerce HPOS compatible</li>
<li>Mobile-first responsive with independent column counts for desktop, tablet, and mobile</li>
</ul>
<h3>Shop Page Integration</h3>
<p>Take full control of how products appear across your store without touching any code.</p>
<p>Assign any saved layout to your store pages using 8 position options:</p>
<ul>
<li>Before Shop Content</li>
<li>After Shop Header</li>
<li>Before Product Grid</li>
<li>Between Products (Top)</li>
<li>Between Products (Middle)</li>
<li>After Product Grid</li>
<li>After Shop Content</li>
<li>Replace Product Grid (completely replaces the default WooCommerce product grid with your custom layout)</li>
</ul>
<p>Page conditions let you target the shop page, category pages, or tag pages independently. Select your layout, pick a position, choose your pages, and save.</p>
<h3>Layout Clone, Export and Import</h3>
<p>Build your layout once, then reuse it across your site or share it with any store.</p>
<ul>
<li>Clone Layout: duplicate any existing layout with one click; the copy is fully independent from the original</li>
<li>Export as JSON: download any layout as a JSON file</li>
<li>Import from JSON: bring that layout into any WordPress site running Store Display, ideal for agencies and multi-site setups</li>
</ul>
<h3>Wishlist Analytics Dashboard</h3>
<p>No other free WooCommerce product layout plugin includes a built-in wishlist analytics dashboard. The dashboard shows:</p>
<ul>
<li>Activity Trend Chart: daily wishlist adds and removes so you can spot demand patterns over time</li>
<li>Top Wishlisted Products: know which items customers want most before you restock</li>
<li>Restock Opportunities: out-of-stock products with high wishlist demand, flagged automatically</li>
<li>Top User Insights: your most engaged customers and how they interact with your store</li>
<li>Live Activity Feed: real-time stream of wishlist events</li>
<li>Retention Rate Tracking: how many users keep items wishlisted over time</li>
</ul>
<h3>Advanced Wishlist System</h3>
<ul>
<li>Floating wishlist button with live product count</li>
<li>Modal interface to manage saved items</li>
<li>Guest wishlist support, works without an account</li>
<li>Wishlist persists across browser sessions</li>
<li>Social sharing and email-your-wishlist</li>
</ul>
<h3>Product Compare</h3>
<ul>
<li>Side-by-side comparison of multiple products</li>
<li>Attribute, price, rating, and specification rows</li>
<li>Add to Cart directly from the compare modal</li>
<li>Compare list maintained across page navigation</li>
</ul>
<h3>Quick View</h3>
<ul>
<li>Instant product detail popup without page navigation</li>
<li>Full image gallery browsing inside the popup</li>
<li>Variation selection (size, color, and other attributes)</li>
<li>Add to Cart and related products inside the quick view</li>
</ul>
<h3>AJAX Product Filtering</h3>
<ul>
<li>Category, subcategory, and custom taxonomy filters</li>
<li>Price range slider (min and max)</li>
<li>Attribute filters: color, size, brand, and custom attributes</li>
<li>Tag, stock status, and on-sale filters</li>
<li>All filters update results without a page reload</li>
</ul>
<h3>WooCommerce Product Grid Layouts</h3>
<p>Create responsive WooCommerce product grids with three style variations: Basic, Enhanced, and Advanced. Customize columns, spacing, borders, shadows, hover effects, and typography. Assign directly to your shop page via Shop Page Integration.</p>
<h3>WooCommerce Product Slider and Carousel</h3>
<p>Product sliders and carousels with autoplay, navigation arrows, pagination dots, and full touch/swipe support. Three slider variations to match different store designs.</p>
<h3>WooCommerce Product Table</h3>
<p>Sortable product tables with bulk actions and built-in comparison mode. Designed for B2B stores and wholesale operations where buyers need to compare specifications before ordering.</p>
<h3>WooCommerce Product Gallery and Masonry</h3>
<p>Masonry grids and product gallery layouts with image hover effects, lightbox integration, and automatic adjustment for different image proportions.</p>
<h3>Flip Card Layouts</h3>
<p>Simple Flip, 3D Flip, Slide Flip, Fade Flip, and Creative Flip. Each reveals extra product information on hover or click for an interactive browsing experience.</p>
<h3>Caption Overlay Layouts (18+ Hover Effects)</h3>
<p>Blinds Vertical, Blocks Zoom, Book Open, Border Reveal, Bounce, Circle Transitions, Cube Rotations, Swiper Slides, Liquid Morph, Neon Glow, Origami Fold, Particle Burst, Hologram, Glass Shatter, Magnetic Pull, Quantum Tunnel, Fire Ignition, and Matrix Rain. The most extensive caption animation library in any free WooCommerce display plugin.</p>
<h3>Call-to-Action and Category Tab Layouts</h3>
<p>CTA layouts with prominent buttons for conversion-focused placements. Category tab layouts with horizontal, vertical, or animated navigation for stores with multiple product categories.</p>
<h4>Who uses Store Display</h4>
<ul>
<li>E-commerce stores replacing the default WooCommerce shop grid with a custom product layout</li>
<li>B2B and wholesale stores using product table layouts with compare and bulk features</li>
<li>Data-driven store owners using wishlist analytics to forecast demand before restocking</li>
<li>Agencies and developers cloning and exporting layouts across client sites</li>
<li>Mobile-first stores needing AJAX pagination and lazy loading</li>
<li>Multi-category stores using category tabs to keep large catalogues organized</li>
</ul>
<h4>Shortcode examples</h4>
<pre><code>[product_display layout="grid" columns="4" limit="12"]
[product_display layout="slider" autoplay="yes" arrows="yes"]
[product_display layout="table" show_compare="yes" show_quickview="yes"]<h3>Elementor Integration</h3>
</code></pre>
<p>1. Edit your page with Elementor<br />
2. Search for the “Product Display” widget<br />
3. Select your saved layout<br />
4. Configure settings with live preview<br />
5. Publish</p>
<h3>Gutenberg Block</h3>
<ol>
<li>Add the “Product Display” block from the block inserter</li>
<li>Select a layout from the dropdown</li>
<li>Configure block settings in the sidebar</li>
<li>Preview and publish</li>
</ol>
<h3>Performance and Compatibility</h3>
<ul>
<li>Lazy loading for faster initial page load</li>
<li>AJAX pagination without full page reloads</li>
<li>Minified CSS and JS assets</li>
<li>CDN-ready</li>
<li>Compatible with WP Rocket, W3 Total Cache, and LiteSpeed Cache</li>
<li>Tested with Astra, OceanWP, GeneratePress, Storefront, Divi, and Avada</li>
<li>Compatible with WPML, Polylang, and RTL languages</li>
<li>Works with WooCommerce currency switchers, subscriptions, and booking plugins</li>
<li>WooCommerce HPOS fully supported</li>
</ul>
<h3>External Libraries</h3>
<ul>
<li>Masonry.js (MIT License): <a href="https://masonry.desandro.com/" rel="nofollow ugc">masonry.desandro.com</a> – responsive grid layout</li>
<li>Slick.js (MIT License): <a href="https://kenwheeler.github.io/slick/" rel="nofollow ugc">kenwheeler.github.io/slick</a> – product carousels and sliders</li>
<li>toastmaster.js (MIT License): <a href="https://www.npmjs.com/package/toastmaster" rel="nofollow ugc">npmjs.com/package/toastmaster</a> – toast notifications and modals</li>
</ul>
<p>No data is sent to external services when using these libraries.</p>
<h3>Connect and Support</h3>
<ul>
<li><a href="https://wordpress.org/support/plugin/product-display/" rel="ugc">Support Forum</a></li>
<li><a href="https://wpazleen.com/docs/" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://wordpress.org/support/plugin/product-display/" rel="ugc">Report a Bug</a></li>
</ul>


StoreDisplay – Product Display Layouts for WooCommerce

WooCommerce product layout plugin: 12+ layouts, wishlist analytics, product compare, quick view, shop page integration, and JSON export/import.

Custom Layouts – Post + Product grids made easy vs StoreDisplay – Product Display Layouts for WooCommerce