Holiday Deals are Here!

UP TO

35%

Discounts

Ending in:

Get Yours Now!
wpmet-website-logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
wordpress plugin
Popular Search headermenumegafootermetform

Getting Started with ShopEngine

  • Getting Started
  • Enable All Widgets
  • Enable All Module
  • Getting started with ShopEngine RTL support
  • Guideline to Increase Your Server Performance by ShopEngine

ShopEngine Templates

  • Shop Page
  • Create Cart Page
  • Create Single Product Page
  • My Account Page
  • Create Checkout Page
  • Archive Page
  • Create Order/Thank You Page
  • Checkout Form – Billing
  • Order Thank You
  • Quick Checkout Template
  • Create Conditional Template
  • Empty Cart Template

ShopEngine Account Settings

  • My Account Page
  • Account Address
  • Account Dashboard
  • Account Navigation
  • Account Details
  • Account Order Details
  • Account Logout
  • Account Downloads
  • Account Form – Login
  • Account Form – Register

ShopEngine Modules

  • Quick View
  • Partial Payment
  • Flash Sale Countdown
  • Variation Swatches
  • Back-Order
  • Currency Switcher
  • Quick Checkout
  • Badges
  • Wishlist
  • Sales Notification
  • Preorder Module
  • Checkout Additional Field
  • Product Comparison
  • Sticky Fly Cart
  • Product Size Charts
  • Advanced Coupon
  • ShopEngine Vacation
  • Multistep Checkout
  • Cross Sell Popup
  • Avatar Module

ShopEngine General Widgets

  • Related Products
  • Product Rating
  • Product Excerpt
  • Additional Information
  • Order by Filter
  • Product Tabs
  • Product Meta
  • Product Tags
  • Product Stock
  • Breadcrumbs
  • Product Review
  • Recently Viewed Products
  • Add To Cart
  • Return To Shop
  • Currency Switcher
  • Product Image
  • Product Description
  • Product SKU
  • Order Confirm
  • Categories
  • Product Title
  • Order Details
  • Product Categories
  • Checkout Form – Payment
  • Checkout Form – Shipping
  • Product Category List
  • Filterable Product List
  • Product Share
  • Flash Sale Products
  • Checkout Form-Additional
  • Product Price
  • Empty Cart Message
  • Upsell
  • Cross-sell
  • My Account Orders
  • Product List
  • Thank You Address Details
  • Deal Products
  • Archive View Mode
  • Archive Description Widget
  • Archive Title Widget
  • Archive Products Widget
  • Archive Result Count
  • Cart Table Widget
  • Cart Total
  • Avatar Widget

ShopEngine Product widgets

  • Related Products
  • Product Rating
  • Product Excerpt
  • Product Tabs
  • Product Meta
  • Product Tags
  • Product Stock
  • Product Review
  • Recently Viewed Products
  • Product Image
  • Product Description
  • Product SKU
  • Product Title
  • Product Categories
  • Product Category List
  • Filterable Product List
  • Product Share
  • Flash Sale Products
  • Product Price
  • Product List
  • Products Per Page Filter
  • Deal Products
  • Advanced Search Widget

ShopEngine Archive Widgets

  • Product Filters
  • Archive View Mode
  • Archive Description Widget
  • Archive Title Widget
  • Archive Products Widget
  • Archive Result Count

ShopEngine Checkout Widgets

  • Checkout Form-Coupon
  • Checkout Form – Billing
  • Checkout Form – Payment
  • Checkout Form – Shipping
  • Checkout Form-Additional
  • Checkout- Order Review
  • Checkout Shipping Methods
  • Checkout Form Login

ShopEngine FAQ

  • ShopEngine FAQ

ShopEngine Support Hooks

  • Builder Templates Hooks
  • Theme Integration with ShopEngine

ShopEngine Gutenberg

  • ShopEngine Gutenberg Addon
  • ShopEngine Gutenberg Template
  • ShopEngine Gutenberg Modules

Multilingual Support - ShopEngine

  • Setup WPML and Translate WooCommerce Pages
  • WPML String Translation For ShopEngine
  • Multi-Language Templates with WPML
  • Multi-Language Templates with Polylang
  • ShopEngine Multilingual Hooks for Developers
  • Home
  • Doc
  • ShopEngine
  • ShopEngine General Widgets
  • Deal Products

Deal Products

Table of Contents
  • Step 1: Enable the Deal Products Widget
  • Step 2: Add Deal Products
  • Step 3: Content Settings of Deal Products
  • Step 4: Style Settings of Deal Products

Deal Products is a general widget of ShopEngine that you can use in any of the wooCommerce Templates. This widget highlights the products that are on sale with a sale start and end schedule, available products, the total number of sold items, and many more options.

Note: This widget only shows products that are on sale with a schedule. Sale products without schedules will not show up in this widget.

Let’s learn how you can use Deal Products Widgets on your wooCommerce site:

Step 1: Enable the Deal Products Widget #

To enable the widget,

  • Go to ShopEngine > Widgets > Deal Products
  • Turn on Deal Products under General section
  • Save changes
 Enable deal products

Note: You can also turn on Deal Products with a global setting that turns on all the widgets of ShopEngine.

Step 2: Add Deal Products #


Before you can add the widget you need create a ShopEngine WooCommerce Template first. Check out the documentation on how to create a template.

To add Deal Products:

  • Go to ShopEngine > Templates > Any ShopEngine Template
  • Click on Edit with Elementor
Edit single product template
  • Search for Deal Products on Elements Search option
  • Drag and drop the widget 
  • Click on Update to save changes.
 drag and drop deal products

Step 3: Content Settings of Deal Products #

Click on the edit icon and go to the Content tab to customize the following settings:

Expand Layout and Product option to edit:

  • Order: You can set the order to ascending or descending.
  • Order By: Choose from orde by options including ID, Title, Name, Date, and Popularity.
  • Show Product: Set how many products you want to show in this deal products widget.
  • Column: Choose the number the product you want to show per column.
  • Column Gap: Select the gap you want between columns.
  • Row Gap: Here you can select the gap between each column.

settings_of_deal_products_widget
layout_and_product_settings_of_deal_products_widget.png

Expand the Settings option to edit:

  • Enable Sale Badge: You can choose to show or hide the sale badge.
  • Title Word Limit: Customize the title of the sale badge.
  • Percentage Badge: You can use turn this option to show the sale percentage.
  • Countdown Clock: Turn this option on to show the countdown clock.
  • Days: If you are giving for less than one day, then you can use this option to hide the day option from the countdown clock.

settings_of_deal_products_widget

Step 4: Style Settings of Deal Products #

Go to the Style tab to customize the following style settings:

style_settings_of_deal_products_widget

  • Product wrapper
    • Padding: Adjust the top, right, bottom, and left padding.
    • Background Color: Change the background color for the widget.
    • Border WIdth: Select the border width you want around each of the product sections.
    • Border Color: Choose a color for the border.
  • Product Image
    • Height: Select the height of the product image for the widget.
    • Size: You can select the image size as either content or cover.
    • Position: If you decide to choose a cover, then you will get another option to choose the position. Here you can choose the position to be top, center, or bottom.
  • Percentage Badge:
    • Padding: Adjust the top, right, bottom, and left padding.
    • Border radius: CHoose the top, right, bottom, and left values for the border radius.
    • Position left:  Here you can adjust the horizontal position of the percentage badge.
    • Position top: Adjust the vertical position of the percentage badge.
    • Color:  Pick the color for the percentage text.
    • Background: Choose a background color for the percentage badge background.
    • Typography:  Click on edit typography to choose the font color and weight.
  • Sale badge:
    • Padding: Adjust the top, right, bottom, and left padding. 
    • Border radius: Choose the top, right, bottom, and left values for the border-radius.
    • Position left:  Here you can adjust the horizontal position of the sale badge.
    • Position top: Adjust the vertical position of the sale badge.
    • Color:  Pick the color for the sale text.
    • Background: Choose a background color for the sale badge background.
    • Typography:  Click on edit typography to choose the font color and weight.
  • Countdown Clock:
    • Number Color: Pick a color for the numbers in the countdown clock.
    • Number Typography: Here you can choose the font size, weight, and transform style.
    • Label Color: Choose the color for the label day, hour, min, and sec.
    • Label Typography:  Here you can choose the font size, weight, transform style, and line-height for the labels.
    • Background: Change the background color for the labels.
    • Border Color: Choose the border color.
    • Border Width: Select the width size of the border.
    • Padding: Adjust the top, right, bottom, and left padding 
    • Space Bottom: Here you can choose the bottom space.
    • Countdown Wrapper Width:  Choose the width for the whole countdown section.
  • Content Style:
    • Title Color: Change the title color of the product.
    • Title Hover Color: Pick a hover color for the title.
    • Title typography: Here you can change the font size, weight, transform and line height for the title.
    • Title margin: Choose the top, right, bottom, and left margin for the title.
    • Price row margin: Select the top, right, bottom, and left margin for the price row.
    • Regular price color: Choose a color for the regular price.
    • Regular price typography: Here you can select the font size, weight, and transform it for the regular price.
    • Sale price color: Choose a color for the sale price.
    • Sale price typography: Here you can select the font size, weight, and transform it for the sale price.
  • Stock and Progress Bar
    • Text color: Change the color for the available and sold options.
    • Text typography:  Here you can select the font size, weight, transform, and line height for the available and sold option.
    • Line Cap Style: You can choose the round cap style to be round or square.
    • Normal line color: Chose the color of the border of each stock section.
    • Normal line height: Select the line-height.
    • Active line color: Change the active line color here.
    • Active line-height: Here you can chose the active line height.
  • Global Font
    • Font family: Here you can change the font family for the whole widget.

After making all the changes click update to save. Now Deal Products should be visible on the storefront with all the customization and styling.

Here is the preview of how Deal Products Widget looks like

Preview of Deal Products Widget by ShopEngine
Preview of Deal Products
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on March 27, 2022
Thank You Address DetailsArchive View Mode
Table of Contents
  • Step 1: Enable the Deal Products Widget
  • Step 2: Add Deal Products
  • Step 3: Content Settings of Deal Products
  • Step 4: Style Settings of Deal Products

Get Subscribed Today!

wpmet-website-logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.
Elements Kit
ShopEngine
GetGenie AI
Metform
WP Social
Wp Ultimate Review
Wp Fundraising
About us
Contact us
Support
Login/Register
Collaborate
Affiliates
Affiliate Area
Privacy Policy
Terms and Conditions
Refund Policy
Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT