Shortcodes de Woocommerce

Què són i com pots utilitzar els shortcodes de Woocommerce per millorar la personalització de les pàgines i la presentació dels productes de la teva botiga online.

Què són els shortcodes de Woocommerce?


Un “shortcode” com el seu nom indica és un “codi curt”. És una paraula o successió de paràmetres entre corxets que executa unes instruccions definides en un codi més llarg que està programat a Woocommerce.

[codi_curt]

Quan s’escriu aquest shortcode de Woocommerce a l’editor de WordPress, es converteix en la part visible de la botiga online en el contingut que hi ha previst.

Shortcodes de pàgines de Woocommerce


Quan instal·les Woocommerce, si segueixes l’assistent que s’executa en activar el plugin es carreguen una sèrie de pàgines per defecte que inclouen un shortcode. Per suposat, també pots fer aquesta feina manualment per tenir un major control de les pàgines on inclous aquests codis i les seves URLs.

Aquestes pàgines i els seus shortcodes respectius són els següents:

Pàgina de cistella

Pàgina en la que es mostren els productes afegits a la cistella quan el visitant clica els botons de “afegeix a la cistella” a cada producte.

Aquesta pàgina consta del següent shortcode o codi curt:

[woocommerce_cart]

Pàgina de finalitzar compra

En aquesta pàgina es visualitza el formulari on el visitant introdueix les seves dades, tria el mètode de pagament, i paga els productes.

Els shortcode que s’introdueix a l’editor d’aquesta pàgina és el següent:

[woocommerce_checkout]

Pàgina del meu compte

El shortcode per generar aquesta pàgina és el següent:

[woocommerce_my_account]

Es tracta d’una pàgina que té una doble finalitat. El seu ús principal és el de mostrar els detalls del compte de l’usuari. Les seves dades, actualitzar la informació, la possibilitat de fer canvi de contrasenya, comandes realitzades, etc…

Però és clar, per veure aquestes dades l’usuari ha de tenir la sessió iniciada. Quan no és així, el shortcode mostra a la mateixa pàgina un formulari per iniciar la sessió.

I segons la configuració que s’hagi establert a l’apartat Woocommerce > Configuració > Comptes i privacitat, també et mostrarà un formulari per crear el teu compte.

Per aconseguir-ho has de marcar la casella “permet als clients crear un compte a la pàgina el meu compte”.

Shortcodes de Woocommerce: creació de compte a la pàgina "el meu compte".

Shortcodes de productes de Woocommerce


A banda dels codis curts que generes pàgines necessàries de la teva botiga online, també hi ha shortcodes per mostrar productes.

En principi, Woocommerce també crea una pàgina anomenada “botiga” on es mostren tots els productes que introdueixis al teu ecommerce.

Però a vegades pots voler mostrar només determinats productes en alguna pàgina o entrada en concret.

Imagina’t que escrius un article al blog de la teva botiga online sobre un producte en concret i vols inserir-lo. O que vols mostrar els productes destacats, o els més recents, a la pàgina d’inici del teu lloc.

Anem a veure aquestes exemples.

Productes destacats

Per mostrar els productes destacats, el shortcode que has d’introduir a l’editor és el següent:

[featured_products per_page="4" columns="4"]

En aquest cas et mostrarà una única fila de 4 columnes amb els 4 darrers productes destacats. Pots canviar els valors dels paràmetres per page i columns per variar el nombre de productes i la seva distribució.

Novetats

Un altre shortcode molt utilitzat és el que serveix per visualitzar els darrers productes publicats a la teva botiga:

[recent_products per_page="4" columns="4"]

Productes singulars

I per acabar, un darrer shortcode per visualitzar un producte concret a qualsevol pàgina o article del teu blog.

El pots utilitzar amb l’ID del producte, que pots trobar a l’URL del producte quan l’edites.

[product id="38"]

O també amb l’SKU que introdueixes tu quan crees el producte:

[product SKU="ref001"]

Shortcodes de carret


L’última tipologia de shortcodes que veurem és el d’afegir al carret un producte. En aquest cas, et mostra el preu i el botó d’afegir al carret un determinat producte.

[add_to_cart id="38"]

Per tant, si el combines amb el shortcode de visualitzar un producte concret et pot quedar una visualització ben completa en un article o la pàgina que vulguis.

Com utilitzar els shortcodes de Woocommerce


Tots aquests codis els pots introduir al teu editor de WordPress. Si ets dels que estàs al dia i utilitzes Gutenberg, has de saber que tens un bloc específic anomenat [/] Codi de substitució específic per aquesta funció.

Si encara utilitzes l’editor clàssic, a part de pensar en que ja és hora d’actualitzar-te, ho pots fer escrivint el codi a l’editor de contingut. En aquest cas, tens l’extensió Woocommerce Shortcodes per facilitar-te l’us dels codis de Woocommerce a l’editor TinyMCE.

A més de l’editor, els shortcodes, codis curts o de substitució es poden introduir a qualsevol giny o element del teu tema que els admeti. A GeneratePress per exemple, pots introduir els shortcodes en qualsevol element de hook o capçalera que et puguis imaginar.

I si utilitzes un maquetador com Elementor, llavors ja tens via lliure per fer totes les virgueries que vulguis, perquè pots introduir el codi que necessitis com a part d’un disseny més complet de la pàgina que construeixis.

Conclusions


Els Shortcodes de Woocommerce, codis curts o de substitució serveixen per facilitar la introducció de determinats continguts de manera senzilla i dinàmica.

D’aquests codis n’hi ha molts. N’hem vist alguns dels que es creen per a determinades pàgines del teu ecommerce, per a visualitzar determinats productes i per afegir articles al carret.

Però de fet en pots trobar molts més: per a productes en oferta, els més ben valorats, els més venuts, productes relacionats, per categories… Tens tota la informació dels shortcodes inclosos a Woocommerce a la seva documentació oficial.

I finalment hem vist que tens diferents alternatives per utilitzar els codis. No només poden anar al teu editor habitual de WordPress, sinó que també els pots introduir en àrees de ginys, elements específics del teu tema que admetin shortcodes i per suposat en el teu maquetador visual.

Altres articles que et poden interessar

No marxis sense dir res!

Informació sobre Protecció de Dades Personals - JoanLlompart.com t’informa que les dades de caràcter personal que proporciones emplenant aquest formulari seran tractades per Joan Llompart Muñoz com a responsable d’aquest lloc web; Finalitat: gestionar els comentaris en aquest blog; Legitimació: Consentiment de l’interessat; Destinataris: les teves dades es desen als servidors de Webempresa (UE) – Veure política de privacitat de Webempresa; Drets: pots accedir, rectificar, limitar o suprimir totes les teves dades a info@joanllompart.com; Per a més informació consulti la informació legal en aquest lloc web.

RUTA AMB ELS PREPARATIUS PER CREAR EL TEU ECOMMERCE

coberta-ebook-ruta-preparatius-ecommerce

QUÈ NECESSIT PER TENIR UNA BOTIGA ONLINE?

EBOOK GRATIS descarregable de regal amb la subscripció al blog.

La guia que t’ajudarà amb les tasques que has de realitzar abans de la creació de la teva botiga online.

On vols rebre lA GUIA GRATIS?

Amb la subscripció podràs rebre les novetats del blog i altres possibles ofertes i regals!

Informació sobre Protecció de Dades Personals – JoanLlompart.com t’informa que les dades de caràcter personal que proporciones emplenant aquest formulari seran tractades per Joan Llompart Muñoz com a responsable d’aquest lloc web; Finalitat: gestionar l’alta a la subscripció al blog i enviar-te el butlletí amb les publicacions, recursos gratis i novetats relacionades; Legitimació: Consentiment de l’interessat; Destinataris: les teves dades es desen a una base de dades propietat de la plataforma de corrreu electrònic MailChimp (EUA) – Veure política de privacitat de MailchimpDrets: pots accedir, rectificar, limitar o suprimir totes les teves dades a info@joanllompart.com; Per a més informació consulti la informació legal d’aquest lloc web.