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.

注記： 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 #

ウィジェットを有効にするには、

• に行く ShopEngine > Widgets > Deal Products
• オンにする Deal Products under General section
• 保存 変化

注記： You can also turn on Deal Products with a global setting that 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:

• に行く ShopEngine > テンプレート > 任意の ShopEngine テンプレート
• クリック Elementorで編集する

• 検索 for Deal Products on Elements Search option
• ドラッグアンドドロップ ウィジェット 
• クリック アップデート をクリックして変更を保存します。

Step 3: Content Settings of Deal Products #

Click on the edit icon and go to the コンテンツ tab to customize the following settings:

拡大する Layout and Product option to edit:

• 注文： You can set the order to ascending or descending.
• 注文方法: Choose from orde by options including ID, Title, Name, Date, and Popularity.
• 製品を表示: Set how many products you want to show in this deal products widget.
• カラム： Choose the number the product you want to show per column.
• 列のギャップ: Select the gap you want between columns.
• 行ギャップ: Here you can select the gap between each column.

を展開します。 設定 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.
• パーセンテージバッジ: You can use turn this option to show the sale percentage.
• Countdown Clock: Turn this option on to show the countdown clock.
• 日々： If you are giving for less than one day, then you can use this option to hide the day option from the countdown clock.

Step 4: Style Settings of Deal Products #

に行きます スタイル タブをクリックして、次のスタイル設定をカスタマイズします。

• Product wrapper
  • パディング: Adjust the top, right, bottom, and left padding.
  • 背景色: Change the background color for the widget.
  • Border WIdth: Select the border width you want around each of the product sections.
  • ボーダの色： Choose a color for the border.

• 製品イメージ
  • 身長： Select the height of the product image for the widget.
  • サイズ： You can select the image size as either content or cover.
  • 位置： 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.
• パーセンテージバッジ:
  • パディング: Adjust the top, right, bottom, and left padding.
  • 境界線の半径: 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.
  • 色：  Pick the color for the percentage text.
  • 背景： Choose a background color for the percentage badge background.
  • タイポグラフィ：  Click on edit typography to choose the font color and weight.
• Sale badge:
  • パディング: Adjust the top, right, bottom, and left padding. 
  • 境界線の半径: 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.
  • 色：  Pick the color for the sale text.
  • 背景： Choose a background color for the sale badge background.
  • タイポグラフィ：  Click on edit typography to choose the font color and weight.
• Countdown Clock:
  • 数字の色: 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.
  • ラベルのタイポグラフィ:  Here you can choose the font size, weight, transform style, and line-height for the labels.
  • 背景： Change the background color for the labels.
  • ボーダの色： Choose the border color.
  • 枠線の幅: Select the width size of the border.
  • パディング: 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.

• コンテンツスタイル:
  • タイトルカラー: Change the title color of the product.
  • タイトルホバーの色: 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.
• グローバルフォント
  • フォントファミリー： ここで、ウィジェット全体のフォント ファミリーを変更できます。

すべての変更が完了したらクリックします アップデート 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