diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json
new file mode 100644
index 000000000..b1d0ba19d
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json
@@ -0,0 +1,71 @@
+{
+ "style": {
+ "families": {
+ "fontFamily": "lato",
+ "tabletFontFamily": null,
+ "mobileFontFamily": null
+ },
+
+ "customCSS": "",
+
+ "fontStyle": "paragraph",
+ "fontFamilyType": "google",
+ "fontSize": 12,
+ "fontSizeSuffix": "px",
+ "fontWeight": 700,
+ "lineHeight": 1.8,
+ "letterSpacing": 2,
+ "variableFontWeight": 700,
+ "fontWidth": 100,
+ "fontSoftness": 0,
+ "bold": false,
+ "italic": false,
+ "underline": false,
+ "strike": false,
+ "uppercase": true,
+ "lowercase": false,
+
+ "colorHex": "#ffffff",
+ "colorOpacity": 1,
+ "colorPalette": "",
+
+ "tempColorOpacity": 1,
+ "tempColorPalette": "",
+
+ "tabletFontStyle": "",
+ "tabletFontFamilyType": null,
+ "tabletFontSize": 11,
+ "tabletFontSizeSuffix": "px",
+ "tabletFontWeight": 700,
+ "tabletLineHeight": 1.8,
+ "tabletLetterSpacing": 1,
+
+ "mobileFontStyle": "",
+ "mobileFontFamilyType": null,
+ "mobileFontSize": 11,
+ "mobileFontSizeSuffix": "px",
+ "mobileFontWeight": 700,
+ "mobileLineHeight": 1.8,
+ "mobileLetterSpacing": 1,
+
+ "bgColorType": "solid",
+ "bgColorHex": "#95a5a6",
+ "bgColorOpacity": 1,
+ "bgColorPalette": "",
+
+ "tempBgColorOpacity": 1,
+ "tempBgColorPalette": "",
+
+ "borderRadiusType": "grouped",
+ "borderRadius": 3,
+ "borderTopLeftRadius": 3,
+ "borderTopRightRadius": 3,
+ "borderBottomRightRadius": 3,
+ "borderBottomLeftRadius": 3,
+ "borderRadiusSuffix": "px",
+ "borderTopLeftRadiusSuffix": "px",
+ "borderTopRightRadiusSuffix": "px",
+ "borderBottomRightRadiusSuffix": "px",
+ "borderBottomLeftRadiusSuffix": "px"
+ }
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx
new file mode 100644
index 000000000..084160fb1
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx
@@ -0,0 +1,108 @@
+import classnames from "classnames";
+import React from "react";
+import CustomCSS from "visual/component/CustomCSS";
+import Toolbar from "visual/component/Toolbar";
+import EditorComponent from "visual/editorComponents/EditorComponent";
+import { DynamicContentHelper } from "visual/editorComponents/WordPress/common/DynamicContentHelper";
+import { makePlaceholder } from "visual/utils/dynamicContent";
+import { attachRefs } from "visual/utils/react";
+import { Wrapper } from "../../tools/Wrapper";
+import defaultValue from "./defaultValue.json";
+import * as sidebarConfig from "./sidebar";
+import { style } from "./styles";
+import * as toolbarConfig from "./toolbar";
+
+export default class WOOOutOfStockBadge extends EditorComponent {
+ static defaultValue = defaultValue;
+
+ static get componentId() {
+ return "WOOOutOfStockBadge";
+ }
+
+ renderForEdit(v, vs, vd) {
+ const className = classnames(
+ "brz-woo-out-of-stock-badge",
+ v.className,
+ this.css(
+ this.getComponentId(),
+ this.getId(),
+ style({
+ v,
+ vs,
+ vd,
+ store: this.getReduxStore(),
+ contexts: this.getContexts()
+ })
+ )
+ );
+
+ const placeholder = makePlaceholder({
+ content: "{{editor_product_archive_out_of_stock_badge}}"
+ });
+
+ return (
+
+ {({ ref: toolbarRef }) => (
+
+ {({ ref: cssRef }) => (
+ attachRefs(el, [toolbarRef, cssRef])
+ })}
+ >
+
+
+
+
+ )}
+
+ )}
+
+ );
+ }
+
+ renderForView(v, vs, vd) {
+ const className = classnames(
+ "brz-woo-out-of-stock-badge",
+ v.className,
+ this.css(
+ this.getComponentId(),
+ this.getId(),
+ style({
+ v,
+ vs,
+ vd,
+ store: this.getReduxStore(),
+ contexts: this.getContexts()
+ })
+ )
+ );
+
+ const placeholder = makePlaceholder({
+ content: "{{editor_product_archive_out_of_stock_badge}}"
+ });
+
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js
new file mode 100644
index 000000000..d312ebfd3
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js
@@ -0,0 +1,60 @@
+import { t } from "visual/utils/i18n";
+
+export const title = () => t("Out of Stock Badge");
+
+const getHtml = () => {
+ return `
+${t(
+ "You can use the following selectors to create targeted CSS."
+ )}
+
+ element {...}
+
+ element .child-element {...}
+
`;
+};
+
+export function getItems() {
+ return [
+ {
+ id: "sidebarTabs",
+ type: "sidebarTabs",
+ tabs: [
+ {
+ id: "styles",
+ title: t("Styling"),
+ label: t("Styling"),
+ options: [
+ {
+ id: "settingsTabs",
+ type: "tabs",
+ config: {
+ align: "start"
+ },
+ devices: "desktop",
+ tabs: [
+ {
+ id: "moreSettingsAdvanced",
+ label: t("Advanced"),
+ icon: "nc-cog",
+ options: [
+ {
+ id: "customCSS",
+ label: t("Custom CSS"),
+ type: "codeMirror",
+ position: 45,
+ display: "block",
+ devices: "desktop",
+ helper: { content: getHtml() },
+ placeholder: `element { ${t("CSS goes here")} }`
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ];
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts
new file mode 100644
index 000000000..10bf4ed27
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts
@@ -0,0 +1,30 @@
+import { ElementModel } from "visual/component/Elements/Types";
+import { DynamicStylesProps } from "visual/types";
+import { renderStyles } from "visual/utils/cssStyle";
+
+export function style(data: DynamicStylesProps) {
+ const styles = {
+ ".brz && .brz-woo-out-of-stock-badge__container": {
+ standart: ["cssStyleBorderRadius"]
+ },
+ ".brz &&:hover .brz-woo-out-of-stock-badge__container": {
+ standart: ["cssStyleBgColor", "cssStyleBgGradient"]
+ },
+ ".brz && .brz-woo-out-of-stock-badge__label": {
+ standart: [
+ "cssStyleTypography2FontFamily",
+ "cssStyleTypography2FontSize",
+ "cssStyleTypography2LineHeight",
+ "cssStyleTypography2FontWeight",
+ "cssStyleTypography2LetterSpacing",
+ "cssStyleTypography2FontVariation",
+ "cssStyleTextTransforms"
+ ]
+ },
+ ".brz &&:hover .brz-woo-out-of-stock-badge__label": {
+ standart: ["cssStyleColor"]
+ }
+ };
+
+ return renderStyles({ ...data, styles });
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js
new file mode 100644
index 000000000..4243559df
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js
@@ -0,0 +1,91 @@
+import { getColorToolbar } from "visual/utils/color";
+import { t } from "visual/utils/i18n";
+import { defaultValueValue } from "visual/utils/onChange";
+import { HOVER, NORMAL } from "visual/utils/stateMode";
+
+export function getItems({ v, device, state }) {
+ const dvv = (key) => defaultValueValue({ v, key, device, state });
+
+ const bgColor = getColorToolbar(
+ dvv("bgColorPalette"),
+ dvv("bgColorHex"),
+ dvv("bgColorOpacity")
+ );
+
+ return [
+ {
+ id: "toolbarTypography",
+ type: "popover",
+ config: {
+ icon: "nc-font",
+ size: device === "desktop" ? "large" : "auto",
+ title: t("Typography")
+ },
+ roles: ["admin"],
+ position: 70,
+ options: [
+ {
+ id: "",
+ type: "typography",
+ config: {
+ fontFamily: device === "desktop"
+ }
+ }
+ ]
+ },
+ {
+ id: "toolbarColor",
+ type: "popover",
+ config: {
+ size: "medium",
+ title: t("Colors"),
+ icon: {
+ style: {
+ backgroundColor: bgColor
+ }
+ }
+ },
+ roles: ["admin"],
+ devices: "desktop",
+ position: 80,
+ options: [
+ {
+ id: "tabsColor",
+ type: "tabs",
+ tabs: [
+ {
+ id: "tabBg",
+ label: t("Bg"),
+ options: [
+ {
+ id: "",
+ type: "backgroundColor",
+ devices: "desktop",
+ states: [NORMAL, HOVER]
+ }
+ ]
+ },
+ {
+ id: "tabText",
+ label: t("Text"),
+ options: [
+ {
+ id: "color",
+ type: "colorPicker",
+ devices: "desktop",
+ states: [NORMAL, HOVER]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ id: "advancedSettings",
+ type: "advancedSettings",
+ devices: "desktop",
+ position: 110
+ }
+ ];
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json
new file mode 100644
index 000000000..186b16e57
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json
@@ -0,0 +1,71 @@
+{
+ "style": {
+ "families": {
+ "fontFamily": "lato",
+ "tabletFontFamily": null,
+ "mobileFontFamily": null
+ },
+
+ "customCSS": "",
+
+ "fontStyle": "paragraph",
+ "fontFamilyType": "google",
+ "fontSize": 12,
+ "fontSizeSuffix": "px",
+ "fontWeight": 700,
+ "lineHeight": 1.8,
+ "letterSpacing": 2,
+ "variableFontWeight": 700,
+ "fontWidth": 100,
+ "fontSoftness": 0,
+ "bold": false,
+ "italic": false,
+ "underline": false,
+ "strike": false,
+ "uppercase": true,
+ "lowercase": false,
+
+ "colorHex": "#ffffff",
+ "colorOpacity": 1,
+ "colorPalette": "",
+
+ "tempColorOpacity": 1,
+ "tempColorPalette": "",
+
+ "tabletFontStyle": "",
+ "tabletFontFamilyType": null,
+ "tabletFontSize": 11,
+ "tabletFontSizeSuffix": "px",
+ "tabletFontWeight": 700,
+ "tabletLineHeight": 1.8,
+ "tabletLetterSpacing": 1,
+
+ "mobileFontStyle": "",
+ "mobileFontFamilyType": null,
+ "mobileFontSize": 11,
+ "mobileFontSizeSuffix": "px",
+ "mobileFontWeight": 700,
+ "mobileLineHeight": 1.8,
+ "mobileLetterSpacing": 1,
+
+ "bgColorType": "solid",
+ "bgColorHex": "#e74c3c",
+ "bgColorOpacity": 1,
+ "bgColorPalette": "",
+
+ "tempBgColorOpacity": 1,
+ "tempBgColorPalette": "",
+
+ "borderRadiusType": "grouped",
+ "borderRadius": 3,
+ "borderTopLeftRadius": 3,
+ "borderTopRightRadius": 3,
+ "borderBottomRightRadius": 3,
+ "borderBottomLeftRadius": 3,
+ "borderRadiusSuffix": "px",
+ "borderTopLeftRadiusSuffix": "px",
+ "borderTopRightRadiusSuffix": "px",
+ "borderBottomRightRadiusSuffix": "px",
+ "borderBottomLeftRadiusSuffix": "px"
+ }
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx
new file mode 100644
index 000000000..6c393f309
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx
@@ -0,0 +1,108 @@
+import classnames from "classnames";
+import React from "react";
+import CustomCSS from "visual/component/CustomCSS";
+import Toolbar from "visual/component/Toolbar";
+import EditorComponent from "visual/editorComponents/EditorComponent";
+import { DynamicContentHelper } from "visual/editorComponents/WordPress/common/DynamicContentHelper";
+import { makePlaceholder } from "visual/utils/dynamicContent";
+import { attachRefs } from "visual/utils/react";
+import { Wrapper } from "../../tools/Wrapper";
+import defaultValue from "./defaultValue.json";
+import * as sidebarConfig from "./sidebar";
+import { style } from "./styles";
+import * as toolbarConfig from "./toolbar";
+
+export default class WOOSaleBadge extends EditorComponent {
+ static defaultValue = defaultValue;
+
+ static get componentId() {
+ return "WOOSaleBadge";
+ }
+
+ renderForEdit(v, vs, vd) {
+ const className = classnames(
+ "brz-woo-sale-badge",
+ v.className,
+ this.css(
+ this.getComponentId(),
+ this.getId(),
+ style({
+ v,
+ vs,
+ vd,
+ store: this.getReduxStore(),
+ contexts: this.getContexts()
+ })
+ )
+ );
+
+ const placeholder = makePlaceholder({
+ content: "{{editor_product_archive_sale_badge}}"
+ });
+
+ return (
+
+ {({ ref: toolbarRef }) => (
+
+ {({ ref: cssRef }) => (
+ attachRefs(el, [toolbarRef, cssRef])
+ })}
+ >
+
+
+
+
+ )}
+
+ )}
+
+ );
+ }
+
+ renderForView(v, vs, vd) {
+ const className = classnames(
+ "brz-woo-sale-badge",
+ v.className,
+ this.css(
+ this.getComponentId(),
+ this.getId(),
+ style({
+ v,
+ vs,
+ vd,
+ store: this.getReduxStore(),
+ contexts: this.getContexts()
+ })
+ )
+ );
+
+ const placeholder = makePlaceholder({
+ content: "{{editor_product_archive_sale_badge}}"
+ });
+
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js
new file mode 100644
index 000000000..d60b65187
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js
@@ -0,0 +1,60 @@
+import { t } from "visual/utils/i18n";
+
+export const title = () => t("Sale Badge");
+
+const getHtml = () => {
+ return `
+${t(
+ "You can use the following selectors to create targeted CSS."
+ )}
+
+ element {...}
+
+ element .child-element {...}
+
`;
+};
+
+export function getItems() {
+ return [
+ {
+ id: "sidebarTabs",
+ type: "sidebarTabs",
+ tabs: [
+ {
+ id: "styles",
+ title: t("Styling"),
+ label: t("Styling"),
+ options: [
+ {
+ id: "settingsTabs",
+ type: "tabs",
+ config: {
+ align: "start"
+ },
+ devices: "desktop",
+ tabs: [
+ {
+ id: "moreSettingsAdvanced",
+ label: t("Advanced"),
+ icon: "nc-cog",
+ options: [
+ {
+ id: "customCSS",
+ label: t("Custom CSS"),
+ type: "codeMirror",
+ position: 45,
+ display: "block",
+ devices: "desktop",
+ helper: { content: getHtml() },
+ placeholder: `element { ${t("CSS goes here")} }`
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ];
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts
new file mode 100644
index 000000000..b0d8d4525
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts
@@ -0,0 +1,30 @@
+import { ElementModel } from "visual/component/Elements/Types";
+import { DynamicStylesProps } from "visual/types";
+import { renderStyles } from "visual/utils/cssStyle";
+
+export function style(data: DynamicStylesProps) {
+ const styles = {
+ ".brz && .brz-woo-sale-badge__container": {
+ standart: ["cssStyleBorderRadius"]
+ },
+ ".brz &&:hover .brz-woo-sale-badge__container": {
+ standart: ["cssStyleBgColor", "cssStyleBgGradient"]
+ },
+ ".brz && .brz-woo-sale-badge__sale": {
+ standart: [
+ "cssStyleTypography2FontFamily",
+ "cssStyleTypography2FontSize",
+ "cssStyleTypography2LineHeight",
+ "cssStyleTypography2FontWeight",
+ "cssStyleTypography2LetterSpacing",
+ "cssStyleTypography2FontVariation",
+ "cssStyleTextTransforms"
+ ]
+ },
+ ".brz &&:hover .brz-woo-sale-badge__sale": {
+ standart: ["cssStyleColor"]
+ }
+ };
+
+ return renderStyles({ ...data, styles });
+}
diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js
new file mode 100644
index 000000000..4243559df
--- /dev/null
+++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js
@@ -0,0 +1,91 @@
+import { getColorToolbar } from "visual/utils/color";
+import { t } from "visual/utils/i18n";
+import { defaultValueValue } from "visual/utils/onChange";
+import { HOVER, NORMAL } from "visual/utils/stateMode";
+
+export function getItems({ v, device, state }) {
+ const dvv = (key) => defaultValueValue({ v, key, device, state });
+
+ const bgColor = getColorToolbar(
+ dvv("bgColorPalette"),
+ dvv("bgColorHex"),
+ dvv("bgColorOpacity")
+ );
+
+ return [
+ {
+ id: "toolbarTypography",
+ type: "popover",
+ config: {
+ icon: "nc-font",
+ size: device === "desktop" ? "large" : "auto",
+ title: t("Typography")
+ },
+ roles: ["admin"],
+ position: 70,
+ options: [
+ {
+ id: "",
+ type: "typography",
+ config: {
+ fontFamily: device === "desktop"
+ }
+ }
+ ]
+ },
+ {
+ id: "toolbarColor",
+ type: "popover",
+ config: {
+ size: "medium",
+ title: t("Colors"),
+ icon: {
+ style: {
+ backgroundColor: bgColor
+ }
+ }
+ },
+ roles: ["admin"],
+ devices: "desktop",
+ position: 80,
+ options: [
+ {
+ id: "tabsColor",
+ type: "tabs",
+ tabs: [
+ {
+ id: "tabBg",
+ label: t("Bg"),
+ options: [
+ {
+ id: "",
+ type: "backgroundColor",
+ devices: "desktop",
+ states: [NORMAL, HOVER]
+ }
+ ]
+ },
+ {
+ id: "tabText",
+ label: t("Text"),
+ options: [
+ {
+ id: "color",
+ type: "colorPicker",
+ devices: "desktop",
+ states: [NORMAL, HOVER]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ id: "advancedSettings",
+ type: "advancedSettings",
+ devices: "desktop",
+ position: 110
+ }
+ ];
+}
diff --git a/public/editor-src/editor/js/editorComponents/index.wp.ts b/public/editor-src/editor/js/editorComponents/index.wp.ts
index e89af6cda..62eab4e6d 100644
--- a/public/editor-src/editor/js/editorComponents/index.wp.ts
+++ b/public/editor-src/editor/js/editorComponents/index.wp.ts
@@ -110,6 +110,8 @@ import WOOAddToCart from "./WordPress/WOOAddToCart";
import WOOAttributes from "./WordPress/WOOAttributes";
import WOOCart from "./WordPress/WOOCart";
import WOOCategories from "./WordPress/WOOCategories";
+import WOOOutOfStockBadge from "./WordPress/WOOOutOfStockBadge";
+import WOOSaleBadge from "./WordPress/WOOSaleBadge";
import WOOExcerpt from "./WordPress/WOOExcerpt";
import WOOGallery from "./WordPress/WOOGallery";
import WOOPages from "./WordPress/WOOPages";
@@ -664,6 +666,14 @@ function getShortcodes(config: ConfigCommon) {
WOORating: {
id: ElementTypes.WOORating,
component: WOORating
+ },
+ WOOSaleBadge: {
+ id: ElementTypes.WOOSaleBadge,
+ component: WOOSaleBadge
+ },
+ WOOOutOfStockBadge: {
+ id: ElementTypes.WOOOutOfStockBadge,
+ component: WOOOutOfStockBadge
}
}
: {})
diff --git a/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts b/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts
index b17ccac90..704535fe9 100644
--- a/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts
+++ b/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts
@@ -88,6 +88,8 @@ export enum ElementTypes {
WOOCategories = "WOOCategories",
WOOPages = "WOOPages",
WOOCart = "WOOCart",
+ WOOSaleBadge = "WOOSaleBadge",
+ WOOOutOfStockBadge = "WOOOutOfStockBadge",
WPPostContent = "WPPostContent",
WPPostInfo = "WPPostInfo",
WPBreadcrumbs = "WPBreadcrumbs",
diff --git a/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts b/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts
index bf70f6720..61feb8661 100644
--- a/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts
+++ b/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts
@@ -134,6 +134,8 @@ import getWOOProductContent from "./pro/WOOProductContent";
import getWOOProductMeta from "./pro/WOOProductMeta";
import getWOOProductTitle from "./pro/WOOProductTitle";
import getWOORating from "./pro/WOORating";
+import getWOOSaleBadge from "./pro/WOOSaleBadge";
+import getWOOOutOfStockBadge from "./pro/WOOOutOfStockBadge";
import getWOOSku from "./pro/WOOSku";
import getWOOStock from "./pro/WOOStock";
import getWOOUpsell from "./pro/WOOUpsell";
@@ -313,6 +315,8 @@ export function getProShortCodes(
WOOSku: true,
WOOProductMeta: true,
WOORating: true,
+ WOOSaleBadge: true,
+ WOOOutOfStockBadge: true,
WOOAttributes: true,
WOOUpsell: true,
WOOBreadcrumbs: true,
@@ -481,6 +485,8 @@ export const ShortCodesKeywords: Record = {
WOOSku: "product SKU, stock keeping unit, identifier",
WOOProductMeta: "product meta data, additional information, details",
WOORating: "product rating, reviews, feedback",
+ WOOSaleBadge: "sale badge, discount, on sale",
+ WOOOutOfStockBadge: "out of stock badge, unavailable, sold out",
WOOAttributes: "product attributes, variations, options",
WOOUpsell: "upsell, related products, recommendations",
WOOBreadcrumbs: "product breadcrumbs, navigation, path",
@@ -639,6 +645,8 @@ export function getSampleShortCodes(config: ConfigCommon) {
WOOProductMeta: getWOOProductMeta(),
WOOProductTitle: getWOOProductTitle(),
WOORating: getWOORating(),
+ WOOSaleBadge: getWOOSaleBadge(),
+ WOOOutOfStockBadge: getWOOOutOfStockBadge(),
WOOSku: getWOOSku(),
WOOStock: getWOOStock(),
WOOUpsell: getWOOUpsell(),
diff --git a/public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts b/public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts
new file mode 100644
index 000000000..bf0a7eafc
--- /dev/null
+++ b/public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts
@@ -0,0 +1,20 @@
+import { t } from "visual/utils/i18n";
+
+export default function () {
+ return {
+ id: "WOOOutOfStockBadge",
+ title: t("Out of Stock Badge"),
+ icon: "nc-woo-out-of-stock-badge",
+ resolve: {
+ type: "Wrapper",
+ value: {
+ _styles: ["wrapper", "wrapper--WOOOutOfStockBadge"],
+ items: [
+ {
+ type: "WOOOutOfStockBadge"
+ }
+ ]
+ }
+ }
+ };
+}
diff --git a/public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts b/public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts
new file mode 100644
index 000000000..f1c951e3a
--- /dev/null
+++ b/public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts
@@ -0,0 +1,20 @@
+import { t } from "visual/utils/i18n";
+
+export default function () {
+ return {
+ id: "WOOSaleBadge",
+ title: t("Sale Badge"),
+ icon: "nc-woo-sale-badge",
+ resolve: {
+ type: "Wrapper",
+ value: {
+ _styles: ["wrapper", "wrapper--WOOSaleBadge"],
+ items: [
+ {
+ type: "WOOSaleBadge"
+ }
+ ]
+ }
+ }
+ };
+}