Product Badge (Štítky)

Modul Product Badge umožňuje zobrazovat štítky (badges) na produktových obrázcích - slevové štítky, štítky pro novinky a doporučené produkty.

Aktivace modulu

Modul je volitelný a je třeba ho aktivovat v hlavním nastavení pluginu v sekci Další moduly.

Typy štítků

1. Slevový štítek (Discount Badge)

Zobrazuje informaci o slevě na produktech s aktivním slevovým pravidlem.

Nastavení v pravidle:

• V nastavení slevového pravidla zapněte Zobrazit štítek
• Zadejte Text štítku

Proměnné v textu štítku

Proměnné {percent} a {value} fungují pouze u pravidel s Auto Price módem, protože pouze tato pravidla mění cenu produktu:

Typ pravidla	Proměnné	Doporučený text
Produktové slevy	Fungují	-{percent}% nebo Ušetříte {value}
Množstevní (Bulk)	Fungují	-{percent}% nebo Sleva až {percent}%
Balíčkové (Bundle)	Fungují	-{percent}%
Košíkové slevy	Nefungují	Sleva v košíku
Kup X získej X	Nefungují	1+1 zdarma nebo Akce 2+1
Kup X získej Y	Nefungují	Dárek k nákupu
Dárek zdarma	Nefungují	Dárek zdarma

Proč u některých pravidel proměnné nefungují?

Pravidla s Fee Based módem (košíkové, BOGO) aplikují slevu jako samostatnou položku v košíku, nikoli změnou ceny produktu. Proto nelze vypočítat procento nebo hodnotu slevy na úrovni produktu.

Příklady textů pro Auto Price pravidla:

-{percent}%
Sleva {percent}%
Ušetříte {value}

Příklady textů pro Fee Based pravidla:

1+1 zdarma
Akce 2+1
Sleva v košíku
K produktu dárek

2. Štítek “Novinka” (New Badge)

Automaticky zobrazuje štítek na nově přidaných produktech.

Nastavení:

• Povolit štítek “Novinka” - zapne/vypne zobrazení
• Počet dní - jak dlouho po publikaci se štítek zobrazuje (výchozí: 14 dní)
• Text štítku - vlastní text (výchozí: “Novinka”)
• Barva pozadí - výchozí zelená (#27ae60)
• Barva textu - výchozí bílá (#ffffff)

3. Štítek “Tip” (Featured Badge)

Zobrazuje štítek na produktech označených jako Doporučené ve WooCommerce.

Nastavení:

• Povolit štítek “Tip” - zapne/vypne zobrazení
• Text štítku - vlastní text (výchozí: “Tip”)
• Barva pozadí - výchozí modrá (#3498db)
• Barva textu - výchozí bílá (#ffffff)

---

Obecné nastavení vzhledu

Pozice štítku

Pozice	Popis
Top Left	Levý horní roh (výchozí)
Top Right	Pravý horní roh
Bottom Left	Levý dolní roh
Bottom Right	Pravý dolní roh

Styl štítku

Styl	Popis
Rectangle	Obdélník s nastavitelným border-radius
Ribbon	Stuha s efektem přeložení (fold) - vyčnívá z obrázku
Custom	Vlastní CSS - plugin nevkládá žádné styly

Ribbon styl

Styl “Ribbon” vytváří efekt stuhy vyčnívající z produktového obrázku.

Vlastnosti:

• Štítek vyčnívá z obrázku (vlevo nebo vpravo podle pozice)
• Pod štítkem je trojúhelníček simulující přeložení/stín
• Trojúhelníček je automaticky o 20% tmavší než barva pozadí štítku

Jak vypadá:

Pro pozici Top Left:
╔═══════════════╗
║ -20%          ║◄── Štítek
╚═╗
  ▼ ◄── Trojúhelníček (fold efekt)

Pro pozici Top Right:
          ╔═══════════════╗
          ║          -20% ║
                       ╔══╝
                       ▼

Typografie a rozměry

• Font size - velikost písma v pixelech (výchozí: 12)
• Padding - vnitřní odsazení v CSS formátu (výchozí: “5px 10px”)
• Border radius - zaoblení rohů v pixelech (výchozí: 3)

Barvy slevového štítku

• Barva pozadí - výchozí červená (#e74c3c)
• Barva textu - výchozí bílá (#ffffff)

---

Skrytí výchozího WooCommerce štítku

Nastavení Skrýt výchozí WooCommerce “Sale!” štítek skryje standardní WooCommerce slevové štítky na celém webu.

---

Kde se štítky zobrazují

• Archiv produktů - katalog, kategorie, výsledky hledání
• Produktová stránka - hlavní obrázek produktu
• Widgety - produktové widgety (volitelně)

Nezobrazuje se:

• V košíku
• Na pokladně
• V mini košíku

---

Kompatibilita s tématy

Plugin automaticky detekuje galerii produktů pro různá témata:

• WooCommerce (výchozí)
• Astra
• Storefront
• OceanWP
• Flatsome
• Kadence
• GeneratePress

Pro ostatní témata lze přidat vlastní selektory pomocí filtru wpify_woo_discounts_badge_gallery_selectors - viz Hooks pro UI.

---

Často kladené otázky

Proč se štítek nezobrazuje?

Zkontrolujte:

1. Je modul Product Badge aktivován?
2. Je v pravidle zapnuto “Zobrazit štítek”?
3. Je zadán text štítku?
4. Odpovídá produkt podmínkám pravidla?

Jak změnit pozici štítku pouze pro určité produkty?

Použijte CSS s třídou produktu:

.post-123 .wpify-discount-badge-container {
    top: auto;
    bottom: 10px;
}

Mohu mít více štítků na jednom produktu?

Ano! Plugin podporuje zobrazení více štítků najednou:

Různé typy štítků:

• Slevový štítek + Novinka + Tip

Více slevových štítků:

• Pokud produkt odpovídá více slevovým pravidlům (např. množstevní sleva + dárek zdarma), zobrazí se štítky pro všechna pravidla

Štítky se zobrazují ve sloupci pod sebou.

Jak úplně vypnout CSS z pluginu?

Nastavte styl na Custom - plugin pak nevkládá žádné výchozí styly a můžete použít vlastní CSS.