<p data-start="254" data-end="306"><strong data-start="254" data-end="306">Design Product Pages That Convert — Without Code</strong></p>
<p data-start="308" data-end="550">Mosaic Product Layouts makes it easy to create custom WooCommerce layouts that look and feel like your brand. Skip the standard grid and unlock creative freedom with flexible, drag-and-drop layouts built right into the WordPress block editor.</p>
<p data-start="552" data-end="726">Whether showcasing featured products, product categories, or a single item, Mosaic Product Layouts helps bring unique product stories to life—no templates or coding required.</p>
<h3 data-start="728" data-end="766">Why Choose Mosaic Product Layouts?</h3>
<ul data-start="768" data-end="1484">
<li data-start="768" data-end="920">
<p data-start="770" data-end="920"><strong data-start="770" data-end="811">Build Visually, Not Just Functionally</strong><br data-start="811" data-end="814" />Design product grids and showcases with full control over layout and style—directly in the block editor.</p>
</li>
<li data-start="922" data-end="1050">
<p data-start="924" data-end="1050"><strong data-start="924" data-end="944">Get Started Fast</strong><br data-start="944" data-end="947" />Use starter layouts and style presets as a foundation, then customize to match any brand or campaign.</p>
</li>
<li data-start="1052" data-end="1187">
<p data-start="1054" data-end="1187"><strong data-start="1054" data-end="1078">Customize Everything</strong><br data-start="1078" data-end="1081" />Adjust layout and style per product or category block, or reuse saved styles across pages and templates.</p>
</li>
<li data-start="1189" data-end="1344">
<p data-start="1191" data-end="1344"><strong data-start="1191" data-end="1221">Flexible Product Selection</strong><br data-start="1221" data-end="1224" />Display bestsellers, recent items, or handpicked products—individually or by category—with advanced filtering options.</p>
</li>
<li data-start="1346" data-end="1484">
<p data-start="1348" data-end="1484"><strong data-start="1348" data-end="1368">Boost Engagement</strong><br data-start="1368" data-end="1371" />Turn static listings into visually rich shopping experiences that encourage more clicks and higher conversions.</p>
</li>
</ul>
<p><span class="embed-youtube" style="text-align:center"></span></p>
<h3 data-start="1486" data-end="1505">What’s Included</h3>
<p data-start="1507" data-end="1584">Mosaic Product Layouts comes with four blocks built for creative flexibility:</p>
<ul data-start="1586" data-end="1949">
<li data-start="1586" data-end="1668">
<p data-start="1588" data-end="1668"><strong data-start="1588" data-end="1607">Products Layout</strong> – Build custom product grids with flexible item placement.</p>
</li>
<li data-start="1669" data-end="1754">
<p data-start="1671" data-end="1754"><strong data-start="1671" data-end="1692">Categories Layout</strong> – Showcase selected product categories with unique layouts.</p>
</li>
<li data-start="1755" data-end="1844">
<p data-start="1757" data-end="1844"><strong data-start="1757" data-end="1782">Single Product Layout</strong> – Highlight individual products with full creative control.</p>
</li>
<li data-start="1845" data-end="1949">
<p data-start="1847" data-end="1949"><strong data-start="1847" data-end="1862">WC Carousel</strong> – Nest products or categories in a swipeable carousel for mobile-friendly experiences.</p>
</li>
</ul>
<p data-start="1951" data-end="2096">Lightweight, responsive, and built for modern WordPress standards, Mosaic Product Layouts works seamlessly with your favorite themes and plugins.</p>
<p data-start="1951" data-end="2096">How to create a beautiful, catalog print-like layout for webpage with Mosaic Product Layouts</p>
<p><span class="embed-youtube" style="text-align:center"></span></p>

Mosaic Product Layouts

<p>Create flexible, free-form, and creative layouts for WooCommerce products, product categories and single products.</p>

<h2>Attract Your Customers’ Attention with Custom Product Labels</h2>
<p>With the <strong>Advanced Product Labels</strong> extension, you can quickly and easily create eye-catching labels to promote your products. Highlight freebies, emphasize “Free Shipping,” or showcase exclusive discounts for specific products or product groups.</p>
<p>Using the extension’s easy-to-use conditions, you can target specific products in your shop to display a label.</p>
<p><img class="aligncenter size-large wp-image-2265018" src="https://woocommerce.com/wp-content/uploads/2015/02/screen-shot-2017-03-24-at-15-31-13.png?w=650" alt="Advanced Product Page Labels in action" width="650" height="691" /></p>
<p><img class="wp-image-2531209 size-medium aligncenter" src="https://woocommerce.com/wp-content/uploads/2015/02/woocommerce-advanced-product-labels-example.png?w=342" alt="" width="342" height="548" /></p>
<div class="twocol-one last">
<h3>Grab Attention</h3>
<p>Use product labels to draw the attention of the customer to a product. Having the same ‘Sale’ or ‘Promo’ label everywhere does not attract customers anymore, your customers will overlook those. Create your own targeted and unique labels using the conditional framework to show labels for a targeted group of products only.</p>
</div>
<h3>Example usages</h3>
<ul>
<li>Add a ‘New’ label to products added less then X days ago</li>
<li>Show a ‘Sale’ label for products that are on sale</li>
<li>30% OFF / $5 OFF (amount will be calculated automatically)</li>
<li>T-shirts in the new summer collection 8)</li>
<li>HD films in the films category</li>
<li>Show customers which products have free shipping</li>
<li>Show which products are your Bestsellers</li>
</ul>
<h3>What does Advanced Product Labels do?</h3>
<ul>
<li>Add product labels</li>
<li><strong>Global labels</strong>; Target multiple products at once</li>
<li><strong>Single labels</strong>; Labels created in the product edit screen</li>
<li>Let the plugin fill in variable parts of a label, such as the sale price or percentage of discount, with <a href="https://woocommerce.com/document/woocommerce-advanced-product-labels/#h-smart-labels"><strong>smart labels</strong></a></li>
<li>Choose from <strong>6 different types</strong> of product labels.</li>
<li>Or upload and use your own <strong>Custom Image</strong></li>
<li>Select from predefined colors or <strong>pick your own custom colors</strong></li>
<li>Align labels individually</li>
</ul>
<h3>Extension back-end</h3>
<p>The extension has two main interfaces, the global labels and the single labels.</p>
<h3>Global Labels Interface</h3>
<p>The global labels can be found under the <em>WooCommerce</em> -> <em>Settings</em> -> <em>Product labels</em> settings tab. Here, you can target a group of products with the following conditions.</p>
<div class="twocol-one">
<p><a href="https://s3.amazonaws.com/f.cl.ly/items/183h3o2F2p050U3T3Y1l/Image%202014-12-30%20at%201.24.56%20pm.png"><img class="size-medium wp-image-14034" title="" src="https://s3.amazonaws.com/f.cl.ly/items/183h3o2F2p050U3T3Y1l/Image%202014-12-30%20at%201.24.56%20pm.png" alt="" /></a></p>
</div>
<div class="twocol-one last">
<p><a href="https://s3.amazonaws.com/f.cl.ly/items/2f1u2o1Q0v3r0K020n2C/Image%202014-12-30%20at%201.29.29%20pm.png"><img class="size-medium wp-image-14034" title="" src="https://s3.amazonaws.com/f.cl.ly/items/2f1u2o1Q0v3r0K020n2C/Image%202014-12-30%20at%201.29.29%20pm.png" alt="" /></a></p>
</div>
<h3>Conditions included</h3>
<p>The following conditions are included by default. These conditions can be easily modified and/or extended with hooks.</p>
<div class="twocol-one">
<ul>
<li>Product</li>
<li>Product category</li>
<li>Product type</li>
<li>In sale</li>
<li>Bestsellers</li>
<li>Product age</li>
<li>Price</li>
</ul>
</div>
<div class="twocol-one last">
<ul>
<li>Sale price</li>
<li>Stock status</li>
<li>Stock quantity</li>
<li>Shipping class</li>
<li>Tag</li>
<li>Total sales</li>
<li>Featured product</li>
</ul>
</div>
<div class="woo-sc-divider flat"></div>
<h3>Single Label Interface</h3>
<p>The single label interface has the same settings as the global label, only these settings only go for the current product. As an extra setting, you can exclude that product from the global labels.</p>
<p>Both label interfaces offer a live preview of the label, so you can see how it will look before saving.</p>

Advanced Product Labels

<p>Create custom product labels that promote your free products, emphasise “Free Shipping” or other exclusive discounts.</p>

Mosaic Product Layouts vs Advanced Product Labels