Inapoi la Portofoliu
Case Study — WordPress, WooCommerce, AI

Chatbot AI pentru WooCommerce — plugin WordPress care recomanda produse si permite adaugarea directa in cos

Publicat: Februarie 2026 • Autor: Aldea Daniel • Categorie: WordPress, WooCommerce, AI, Automatizare

1200+
linii JS
12+
setari admin
6
clase PHP
100%
custom

Clientii nu vor sa caute produse. Vor sa intrebe.

In magazinele online mari, clientii nu vor sa navigheze prin zeci de categorii si sute de produse.

“Ce vitamine dau la porumbei pentru muta?”

Si sa primeasca un raspuns clar, cu produsele potrivite.

Pentru magazinul WooCommerce Produse Porumbei, am construit un plugin WordPress care adauga un asistent AI direct pe site — capabil sa inteleaga intrebarile clientilor si sa recomande produse relevante, cu carusel vizual, preturi si buton de adaugare in cos.

Chatbot AI WooCommerce - Chat deschis pe site

Chat-ul AI deschis pe magazinul WooCommerce

Impact pentru magazin

Fara chatbot

  • Clientii cauta manual produse
  • Navigheaza categorii multiple
  • Parasesc site-ul daca nu gasesc rapid

Cu chatbot

  • Clientul intreaba direct
  • Primeste recomandari instant
  • Poate adauga in cos din chat

Drumul de la intrebare la comanda devine mult mai scurt.

Cum functioneaza

Din perspectiva clientului

1

Vede butonul de chat in coltul ecranului

2

Scrie intrebarea

3

Primeste raspuns + produse recomandate

4

Adauga produsele direct in cos

Fluxul tehnic

Browser client

↓

WordPress AJAX endpoint

↓

Webhook n8n

↓

Procesare AI + cautare produse WooCommerce

↓

Raspuns JSON

↓

Carusel produse in chat

↓

WooCommerce Cart API

Fiecare cerere include ultimele 10 mesaje din conversatie pentru context.

Widget chat complet

Chat-ul include:

  • Indicator de scriere animat
  • Sugestii rapide pentru intrebari frecvente
  • Persistenta conversatiei in browser
  • Retry automat pe eroare
  • Design responsive desktop + mobil
Chatbot AI WooCommerce - Chat cu sugestii rapide

Chat cu sugestii rapide si indicator de scriere

Carusel produse custom

Produsele recomandate apar intr-un carusel cu:

Imagine produs
Titlu
Motivul recomandarii
Pret
Buton "Adauga in cos"

Caruselul:

  • Suporta swipe touch
  • Are animatii CSS fluide
  • Evidentiaza produsul activ
  • Include paginare vizuala

Implementat complet custom fara librarii externe.

Chatbot AI WooCommerce - Carusel produse recomandate

Carusel cu produse recomandate de AI

Adaugare directa in cos

Clientul poate adauga produsele fara sa paraseasca chat-ul.

Plugin-ul verifica:

  • Daca produsul exista
  • Daca este in stoc
  • Daca poate fi cumparat

Dupa adaugare, cosul WooCommerce se actualizeaza instant.

Panou administrare WordPress

Proprietarul magazinului poate controla:

  • URL webhook AI
  • Secret conexiune
  • Peste 12 setari de culori
  • Pozitia widgetului
  • Mesajul de bun venit
  • Tool integrat pentru test webhook
Chatbot AI WooCommerce - Panou administrare WordPress

Panoul de administrare din WordPress

Arhitectura pluginului

Plugin-ul este structurat in clase separate:

PPC_MainInitializare generala
PPC_OptionsGestionare setari
PPC_AdminUI admin
PPC_AssetsIncarcare CSS/JS
PPC_AjaxEndpointuri securizate
PPC_Webhook_ClientClient HTTP webhook

Frontend: JavaScript vanilla (~1200 linii) + CSS custom properties dinamice.

Securitate

Pentru ca proceseaza input anonim, plugin-ul implementeaza:

Nonce WordPress pe toate endpointurile
Rate limiting per IP
Sanitizare completa input
Escapare output WordPress
Verificare capabilitati admin
Secret webhook in header custom

Integrarea AI prin n8n

Plugin-ul trimite JSON la webhook.

Workflow-ul n8n:

1

Primeste intrebarea

2

Proceseaza cu model AI

3

Cauta produse WooCommerce

4

Returneaza lista recomandata

Backend-ul AI poate fi schimbat fara modificarea pluginului.

Provocari tehnice interesante

Carusel fara librarii

Implementare gesturi swipe si drag doar cu Pointer Events.

Persistenta conversatie

localStorage pastreaza istoricul intre pagini. Limita: 50 mesaje.

Fix-uri iOS Safari

Viewport si position: fixed necesita tratament special.

Context conversational AI

Ultimele 10 mesaje trimise automat la fiecare request.

Rezultat in productie

Plugin-ul ruleaza activ pe magazinul Produse Porumbei si ofera clientilor o metoda naturala de a descoperi produsele potrivite fara navigare manuala.

Stack tehnologic

Backend

PHP 7.4+WordPressWooCommerce

Frontend

Vanilla JSCSS3 Custom Properties

AI

n8n WorkflowModel AI

Versiune: 1.0.2 • Platforma: WordPress + WooCommerce • Licenta: GPL v2+

Vrei un chatbot AI similar pentru magazinul tau?

Pot construi solutii custom pentru WooCommerce care recomanda produse automat, raspund la intrebarile clientilor, reduc abandonul de navigare si integreaza AI in fluxul de vanzare.

Contacteaza-ma

Alte automatizari WooCommerce pe care le dezvolt

  • Recomandari produse AI
  • Generare automata descrieri
  • Procesare comenzi automate
  • Integrari ERP
  • Pluginuri custom WordPress