CodeCanyon WooCommerce Sale Products Layout - WordPress Plugin

Guide to CodeCanyon WooCommerce Sale Products Layout for an Elementor Sale Products Showcase

CodeCanyon WooCommerce Sale Products Layout is not meant to replace your entire WooCommerce catalog. Its job is much narrower: to display discounted products in a controlled Elementor block. In this guide, we will look at where that kind of block is genuinely useful, what to check before installation, how to choose between a classic grid and a showcase-style display, and how to configure cards, columns, pagination, and result verification.

Public sources for this product reveal one important limitation: the official product page, the Envato Elements page, and the author's live preview are available, but no separate public documentation was found that breaks down every widget field. Because of that, the specific facts below rely on confirmed elements only: two widgets, six styles, pagination modes, 1-3 columns, responsive behavior, translations, and demo examples. Everything related to Elementor and WooCommerce troubleshooting is presented as safe best practice for this class of plugin, not as a hidden product feature.

The core idea is simple: first make sure WooCommerce itself correctly identifies which products are on sale, then place the sale block in Elementor, choose the display logic, and review the page as a customer would. If you skip that order, you can spend a long time tweaking colors and animations when the real problem is that the products do not have a genuine sale price or are hidden from the catalog.

Where This Addon Fits, and Where It Just Adds an Unnecessary Layer

This plugin is aimed at stores that need to present discounted products not as a standard archive page, but as a separate promotional section. That could be a homepage, a seasonal campaign landing page, a block below a banner, a curated collection page, or a small section at the bottom of an article. In those places, a standard catalog often feels too heavy: filters, sorting, and a full archive can distract from the goal, while the store owner just needs a compact block that keeps the focus on the discount.

The official description and live preview show two display families: Sale Products Layout and Sale Products Showcase. In practical terms, those serve two different roles. The first is closer to a product card grid, while the second behaves more like a showcase or carousel-style promo block. The plugin also advertises six styles for each direction, Numeric, Classic, and Load More pagination, more than two hundred animation effects, color controls, responsive support, translation readiness, and column layouts from one to three.

The best use case for this addon is a dedicated sale showcase, not an attempt to replace the entire store architecture. If you need to completely rebuild the shop page, filters, archive cards, product templates, cart, and checkout, a narrow sale-layout plugin will not be enough. But if the goal is to display already prepared sale products attractively in Elementor, this product sits comfortably in its niche.

What to Check Before Installation So the Block Does Not End Up Empty

Most issues with sale product blocks do not begin in Elementor. The widget may be connected correctly, the styles may load, and the page may still show nothing. The cause is often in the WooCommerce data: the product is unpublished, hidden from the catalog, missing a standard sale price, tied to a variable product with a non-obvious discount, or affected by a cached query.

Before installation, it is worth doing a short prep pass. It saves time because it separates store data issues from problems in the addon itself.

Check for Real Sale Prices

WooCommerce treats a product as on sale not because there is a badge drawn on the page, but because the product has a regular price and a sale price set through the standard product fields. For a simple product, that is easy to verify in the product editor. For a variable product, make sure the discount is applied to the right variations and not just described visually in the text.

If the store uses a separate plugin for dynamic discounts, coupons, or pricing rules, check whether it marks products as true on_sale items for WooCommerce queries. Some rules adjust the price only during cart calculation or display, but do not write to the standard sale price field. In that case, the sale block may not detect those products.

Check Product Visibility in the Catalog

A sale product may be published but hidden from the catalog and search. That is not always obvious on a normal product page, but it becomes critical for a block that pulls products automatically. If the product is supposed to appear in the showcase, verify its publication status, featured image, category, stock, and catalog visibility.

Practical check: create a temporary page and output the standard WooCommerce shortcode for sale products. If the standard output is empty too, fix the WooCommerce data first instead of the Elementor widget settings.

[products limit="4" columns="4" on_sale="true"]

Compare Versions and Environment

No separate public changelog was found for this product, and the available compatibility details appear limited. For a working store, that makes it especially important to test the plugin on a site copy or staging environment. Check WordPress, WooCommerce, Elementor, the theme, PHP, caching plugins, and other Elementor addons. If the site already depends on a large stack of WooCommerce extensions, do not connect a new visual addon directly to a live page.

Do not start configuration with animations and colors. First confirm that sale products are being found and rendered in a basic form. Visual styling only makes sense after that.

Installation and First Launch in Elementor Without Unnecessary Steps

Installing a commercial WordPress plugin is usually done through a ZIP archive in the admin panel. The standard path is Plugins, then Add New, then Upload Plugin, choose the ZIP file, click Install Now, and then Activate Plugin. Manual FTP upload is rarely needed and is better suited to experienced administrators when the admin panel does not allow archive uploads.

After activation, do not go straight to the live store homepage. Create a test page or draft, open it in Elementor, and look for the new widgets using keywords like Sale, WooCommerce, or the addon name. The official description mentions two Elementor widgets, so it is reasonable to expect separate options for the classic display and the showcase mode.

Initial Post-Activation Check

1. Open the WordPress admin area and make sure WooCommerce and Elementor are active.
2. Verify that the site has at least a few published products with a standard sale price.
3. Create a test page so you do not disrupt the current homepage or promo page.
4. Open the page in Elementor and locate the plugin widget in the elements panel.
5. Drag the widget onto the page, save the draft, and open the preview.
6. Check whether product cards appear, along with the sale badge, price, title, and the Add To Cart button.

If the Widget Does Not Appear

Start with the obvious checks: is Elementor active, were there any installation errors, and was the archive packaged incorrectly with another ZIP nested inside the main ZIP. Then clear the Elementor cache if your stack uses one, and reload the editor page. If the editor freezes or will not open, Elementor Safe Mode can help determine whether the theme or another plugin is blocking it. But it is important to remember that Safe Mode helps diagnose the editor, not fix issues on the public-facing site.

Detailed Setup After Installation: From WooCommerce Data to a Finished Product Card

After the first launch, do not try to configure everything in one pass. A sale block depends on three layers at once: product data in WooCommerce, widget settings in Elementor, and the theme's styling. If you change all three layers at the same time, it becomes hard to tell what actually produced a result or caused an issue. A much more reliable sequence is this: first the product query, then the card structure, then the visual style, and finally behavior across different screen sizes.

That order is especially helpful for CodeCanyon WooCommerce Sale Products Layout because the product is presented as a visual addon with multiple styles, pagination, columns, and animations, yet no open documentation was found for each widget field. That means setup should be driven by testable actions, not guesses about hidden capabilities.

First Pass: Get the Product Query Right

Start with the widget in a minimal state. Choose a basic style, set a small number of products, and temporarily disable more complex effects if your version includes that option. The goal of the first pass is to verify that the block is pulling discounted products specifically, not just any store products. If the widget includes filtering fields for category, tag, or item count, change one parameter at a time and refresh the preview after each change.

What Counts as a Normal Result

A good first result is a simple showcase where cards appear without errors, each card links to the correct product, the sale price differs from the regular price, and the action button does not disappear. At this stage, it is not a problem if the colors do not yet match the site's design. Right now you are validating the display logic, not the visuals.

When to Stop and Go Back to the Products

If the block shows nothing, mixes regular products with discounted ones, or outputs the wrong set, do not continue styling it. Go back to WooCommerce and inspect the specific products: publication status, price, discount, image, stock, visibility, and category assignment. The earlier you separate a data issue from a widget issue, the less time you will waste on configuration.

Second Pass: Configure the Card Structure

Once the products display correctly, decide which card elements you actually want to keep. For a sale block, the most important pieces are usually the image, title, price, discount marker, and button. Category labels help if the campaign includes different product types. A short description only makes sense when it genuinely helps users choose a product; in a small card, long text often creates visual noise.

Try not to overload the card with secondary details. The author's live preview shows card elements that look like category, title, price, a short text excerpt, and a button. That is a useful reference, but not something you need to copy pixel for pixel. In a real store, clarity matters more than element count: the customer should see the discount, understand the product, and move forward.

Price and Sale Badge

The sale price should be the easiest element to read after the image and product title. If the old price is struck through, the new price needs enough contrast to stand out. The Sale badge should not look like a primary button, or users may mistake it for an action. If you are translating the storefront interface into Russian, check whether the badge text can be changed through the theme, translation tools, or the plugin itself. Do not edit plugin files just to change a single label.

Action Button

For simple products, the Add To Cart button may be convenient, but for variable products it is often safer to send the user to the product page, where they can choose a size, color, or other variation. If the theme or WooCommerce shows different button text for simple and variable products, that is not necessarily an error. What matters is that the action is honest: if the product requires an option selection, the user should land where that selection can actually be made.

Third Pass: Match the Block to the Theme

Only after verifying the query and card structure should you move on to colors, spacing, animations, and columns. The product advertises custom color settings and animation effects, but that does not mean you should enable the maximum number of visual effects. For a commercial block, a calm and stable presentation is better than an effect that gets in the way of the button or slows down the first screen.

Compare the block with the surrounding parts of the site: heading height, button color, card corner radius, spacing between products, and the section background. If the sale block looks out of place, check the widget settings and theme settings first. Add CSS only in targeted cases, and only in a place where it can be disabled easily.

A Typical Starter Configuration

• On the homepage, use 4-6 products and two or three columns on a wide screen.
• On a promo page, you can show more products, but use simple pagination instead of an endless feed.
• For mobile, keep one column and check the card height.
• For the first launch, choose a subtle animation or disable it until you confirm page speed.
• For the sale badge, use a high-contrast but not overly loud color that does not compete with the main button.

Fourth Pass: Save a Reference Page

Once the configuration looks solid, save the link to the test page and record which parameters were chosen: Classic or Showcase, the number of columns, pagination type, card style, and important theme settings. That is especially useful if the store is managed by more than one person. A few weeks later, it will be much easier to understand what changed after a theme update, WooCommerce update, Elementor update, or changes to the product content itself.

A practical approach: a sale block is not truly finished after it looks good in preview. It is finished after you have checked the data, clicks, mobile behavior, cache, and a clear rollback path.

Classic or Showcase: How to Choose the Right Display Logic

This product has two key output directions, and the choice affects more than appearance. It also changes how visitors interact with the block. A classic grid works well when users need to compare several products quickly: see the price, title, category, and move toward purchase. Showcase mode behaves more like a promotional display: it fits a homepage, a block below a banner, or a limited set of products where emphasis matters more than a full overview.

Do not choose showcase mode just because it looks more dramatic. Carousels and animations require restraint: some users do not wait for automatic motion, some scroll quickly, and on mobile devices extra movement can get in the way. A grid is simpler, more stable, and better suited to sections where buyers need to compare products visually.

When Classic Works Better

Choose a classic grid if the promotion includes several products and users need to see them at the same time. It is a good fit for a sale page, a "Products of the Week" block, a category collection, or a section below a text-based campaign description. Columns from one to three help keep the block from becoming too dense: one column works for narrow content, two create a calmer showcase, and three fit a wide page with evenly sized images.

When Showcase Works Better

Showcase is the better fit when the block is supposed to function as a visual focal point. For example, on the homepage you may want to feature only a few of the strongest discounts rather than the full selection. This mode works best with a short heading and a clear callout, so the user immediately understands that this is a limited showcase, not the store's main catalog.

What Not to Hide Inside a Carousel

Do not hide products in showcase mode if users need to compare them by specs. If the discounts are similar and differences between models matter, a static grid is usually more usable. It is also unwise to make a carousel the only way to see all promotional products if the block sits on a commercially important page.

How to Keep Sale Products Separate from the Regular Catalog

The most important technical point with a plugin like this is that the sale showcase must rely on WooCommerce data, not visual assumptions. If a product card says "sale" manually but the standard sale price field is empty, the automatic block may not treat it as a discounted product. If the product is hidden from the catalog, you should not expect it to appear in a normal showcase either.

Sale Price and Discount Scheduling

For a simple product, check the regular price, sale price, and, if scheduling is used, the active date range. You do not need to document specific sale dates in the guide itself, but scheduling matters in the admin area: a product may be prepared in advance while the block stays empty until the sale starts. After the discount ends, the product may disappear from the sale query, and that would be normal behavior.

Categories, Tags, and Manual Selections

The public product page confirms sale-focused output, but it does not provide a complete public list of widget query settings. In a working setup, it is better to prepare the data so that any WooCommerce tool can understand it: use categories for themed promotions, tags for internal selections, and standard sale prices for the fact of the discount itself. If your widget version includes extra filters, test them first on a draft page with a small product set.

Variable Products

Be more careful with variable products. If only one variation is discounted while the parent product appears in the grid, the theme and widget may display the price less clearly than they would on a simple product card. Before publishing, check whether the button leads to the product page, whether the price range is shown correctly, and whether the sale badge could be misleading.

Reliable check: open the sale product as a regular customer, make sure the sale price is visible on the product page, then return to the Elementor block and confirm that the same product appears in the showcase.

Columns, Pagination, and Load More Without Breaking the User Journey

The plugin advertises one to three columns and three pagination modes: Numeric, Classic, and Load More. These are not just decorative variations. They change how users perceive the promotion and how long they stay engaged with the block.

One to Three Columns

One column works for narrow sections, sidebar promo blocks, and pages where each card should appear large. Two columns are the most balanced option for most landing pages: products do not feel too small, images stay readable, and the button remains visible. Three columns fit a full sale page or a wide homepage block, but they require tidy images and similarly sized product titles.

On mobile devices, the actual number of columns may depend on Elementor's responsive settings, the theme, and the plugin's CSS. So do not judge the block only inside the editor on a wide screen. Switch to tablet and phone views, then also open the published page in a separate browser window.

Numeric and Classic

Numeric works well when there are many products and users benefit from understanding the total size of the selection. Classic is simpler because it usually offers only previous and next navigation instead of a page list. For a small promotion, numeric pagination can feel excessive: it visually suggests a large catalog even when you only have a handful of products.

When to Choose Load More

Load More works well on promo pages where users stay in one context and gradually reveal more products. But this mode depends more heavily on scripts, cache, and correct dynamic loading. If the site already uses JavaScript optimizers, lazy loading, advanced caching, or multiple WooCommerce filters, test this mode especially carefully.

Card Design: Price, Badge, Button, and Colors Without Fighting the Theme

The product advertises color settings for each addon, and the live preview shows cards with a Sale badge, price, category, title, short description, and an Add To Cart button. That is a solid set for a promo block, but in WooCommerce a product card rarely exists in isolation. Its appearance can be affected by the theme, Elementor global typography, WooCommerce styles, cached CSS files, and other addons.

What to Style First

Do not start with effects. First configure and verify basic readability: image, product title, old and new price, sale badge, and button. Customers should instantly understand that the product is being sold at a discount, where to click, and how one product differs from another. If you enable complex animations too early, they can hide issues with card height, title wrapping, or price contrast.

Animations and Performance

More than two hundred effects may sound tempting, but that is not a reason to turn on motion everywhere in a store. Animation should help users notice the block, not distract them from the product. On a page that already has several heavy sections, sliders, and promotional elements, extra animation can make the site feel slower. For the first version, choose a subtle effect or disable animation altogether, then test the page on a mobile device.

Consistent Card Height

A showcase looks polished when images have similar proportions, titles do not spill into five lines, and buttons align neatly. If your catalog includes products with very different photography, prepare the images in advance or choose a style that can handle uneven content. A broken grid almost always looks like a technical mistake, even if the customer cannot explain why.

Practical Scenario: A Products of the Week Section on the Homepage

Let us walk through a real task: you want to show a "Products of the Week" block on the store homepage with several discounted products. The goal is not to build the whole catalog, but to give visitors a fast entry point into the promotion: see the discount, open the product, add a simple item to the cart, or move to the full product page.

Goal

Create a compact Elementor section with products that truly have a sale price set in WooCommerce. For desktop, use two or three columns; for mobile, verify a single-column layout. If there are only a few products, choose a grid. If you want a more promotional look, you can test showcase mode, but only after confirming the basic grid works correctly.

Preparation

1. Select 6-8 products that are actually part of the promotion.
2. Check their regular price and sale price in WooCommerce.
3. Make sure the products are published, have images, and are not hidden from the catalog.
4. Prepare a short section title and a short explanation if the promotion needs context.
5. Create a homepage draft or duplicate the section so you do not edit the live block without testing.

Steps in Elementor

1. Open the page in Elementor and add a dedicated section for the sale block.
2. Insert the sale layout or showcase widget from the plugin set.
3. Choose a style that does not clash with the store theme or overload the card.
4. Set the number of columns: two for a calmer showcase or three for a wider promo section.
5. If there are more products than fit on the first screen, choose a pagination mode. For a landing page, try Load More; for a catalog-style page, use Numeric or Classic.
6. Adjust the badge, price, and button colors so the discount is clearly visible without breaking the overall site style.
7. Save the page, open the preview, and test clicks on both the card and the button.

Expected Result

The customer sees a dedicated section with discounted products, and the cards include images, titles, sale prices, badges, and action buttons. The cards do not look out of place, do not collapse in height, and do not display products that are not actually on sale. If Load More is used, the button loads additional items without visual glitches or duplicates.

A Detail People Often Miss

If one product disappears from the block after publishing, do not rush to change the style. First check whether its discount expired, whether it went out of stock, whether catalog visibility changed, and whether the cache was cleared after the price update. For sale blocks, data matters more than presentation.

Checking the Result Before Publishing

Verification needs to happen separately from setup, because the Elementor editor and the live public page can behave differently. In the editor, you see a working state as an administrator. The customer sees a page with cache, optimized scripts, theme styles, and sometimes different button behavior.

Editor Check

• The widget loads without an endless spinner or editor errors.
• Cards appear immediately after you choose the style and number of columns.
• The editor shows products that actually have a valid sale price.
• Switching between desktop, tablet, and mobile does not break the grid.
• Animation does not cover buttons or make the card inaccessible.

Live Page Check

• Open the page in incognito mode or in another browser.
• Check whether the product set matches the expected promotion.
• Open 2-3 product cards and make sure the links go to the correct pages.
• Click Add To Cart for a simple product and verify the cart.
• If there is a variable product, make sure the customer lands where they can choose the variation.
• Clear the site cache and repeat the check after changing the price of one test product.

What to Look for on Mobile

On a phone, the sale block should feel usable, not merely smaller. Product titles should not crowd out the price, buttons should not become too small, and a carousel should not hijack page scrolling. If the block feels cramped, it is better to reduce the number of products on the first screen, disable nonessential card elements, or switch to a single-column layout.

Short publishing rule: the block is only ready to publish once three things line up: the right products, a clear card layout, and a working customer action.

How to Manage the Sale Block After Publishing

A sale showcase does not end at the moment of publication. Unlike a static block, it depends on current prices, discount schedules, stock levels, categories, and cache behavior. If the block changes over time, that does not always mean the plugin is broken. Sometimes a product simply stopped being on sale, went out of stock, was hidden from the catalog, or received a new category.

Checks After Price Changes

After a bulk price update, review at least one page that uses CodeCanyon WooCommerce Sale Products Layout. Make sure products appear or disappear as expected. If the store uses caching, clear the page cache, WooCommerce cache, and, if applicable, the CDN cache. For high-traffic promo pages, it helps to keep a short launch checklist: update prices, verify standard WooCommerce output, open the Elementor page, and check the public version.

Checks After Design Changes

Changing the theme, global typography, Elementor buttons, or WooCommerce styles can alter how the cards look. So after a redesign, do not stop at the homepage. Open every page that uses sale blocks: the homepage, promo landing page, category collection, and content pages with product inserts. Make sure prices, badges, and buttons have not shifted and that the grid has not become too dense.

Checks After Updates

Before updating WooCommerce, Elementor, the theme, or a group of Elementor addons, create a backup and test the block on a site copy if the store is commercially important. After the update, repeat the basic scenario: the editor opens, the widget is visible, discounted products display correctly, pagination works, and buttons lead where they should. If an issue appears only after the update, temporarily disable the questionable mode first, such as Load More or animation, and return the block to its last stable version.

When It Is Better to Rebuild the Block Instead of Fixing It

Sometimes rebuilding the section is cheaper than chasing a conflict for hours. If the old block uses a complex style, multiple animations, unstable dynamic loading, and has not been reviewed in a long time, create a new test section with minimal settings. Transfer only the necessary products and the basic design. If the new block works reliably, add the visual styling back in gradually. This method quickly shows whether the problem is in the old section's specific settings or in a broader plugin conflict.

How to Hand the Block Off to a Content Manager

If discounts are managed by someone other than a developer, leave the editor a short internal instruction: where the sale price is set, which products belong in the block, which page controls the promo section, and what must be checked after a promotion changes. The instruction does not need complex code or technical guesswork. A simple sequence is enough: update products, open the test page, confirm the correct price, check the button, and only then update the published section. That kind of workflow lowers the risk of accidentally showing regular products as discounted or leaving an empty block on the homepage after a sale ends.

Compatibility, Performance, and SEO for a Sale Block

A sale block affects more than appearance. It adds images, styles, scripts, buttons, and internal links to products. In a small store that may go unnoticed, but on a heavy homepage even one extra carousel can make the page feel slower.

Performance

Use only as many products as the task requires. A block with 4-8 products often performs better than a long stream of dozens of cards. Prepare product images properly, avoid overly heavy photos, and test the page after clearing cache. If animations are enabled, make sure they do not interfere with the first screen or scrolling.

SEO

A sale showcase does not guarantee higher rankings on its own. It can improve the page if it helps users find products and move into product pages. But if the block creates duplication, hides important text, or loads products unreliably, it will not replace a sound structure for categories, product pages, descriptions, and internal links.

Security and Support

Because no public documentation or open changelog was found for this product, do not install it directly on a critical page without testing first. Create a backup, test on a site copy, and compare behavior against your current Elementor and WooCommerce setup. If errors appear on a modern stack, do not try to fix them with random code snippets from forums.

When CodeCanyon WooCommerce Sale Products Layout Is a Good Fit

This product works best for a store that already has properly configured discounted products and just needs a fast visual block in Elementor: a grid, a showcase, several styles, basic pagination, color settings, and responsive output. It is not supposed to fix WooCommerce data, replace the catalog, build filters, or solve dynamic pricing problems.

Before using it in production, test the product on a site copy, build a test section, compare its output with the standard WooCommerce result, review the mobile version, and make sure the buttons send customers to the right place. If that matches your use case, you can download CodeCanyon WooCommerce Sale Products Layout and test it on a prepared page.

The key selection rule is simple: if you need a clean sale products showcase in Elementor, this plugin may save you time. If you need a new store logic, advanced filters, or guaranteed support for a modern stack without extra verification, compare it with broader solutions first.