Un concepto bastante importante nesta serie de artigos onde estamos aprender a montar unha tenda online con WordPress e WooCommerce, é o dos shortcodes.
Non son específicos de WooCommerce, ao contrario. Pódense utilizar en calquera instalación de WordPress.
Pero hai unha serie deles que si son propios das tendas online, e eses son os que quero mostrar hoxe.
Ensinareiche que é un shortcode, para que valen, cales son os máis interesantes en WooCommerce e como se insiren desde o editor de bloques Gutenberg e desde o construtor visual Elementor.
Que é un shortcode?
Un shortcode non é máis que un pequeno anaco de código que che permite engadir algunha funcionalidade específica nalgunha parte da túa páxina web sen a necesidade de programala cada vez que a precises.
é, en resumo, unha ferramenta que aforra tempo e simplifica o desenvolvemento dos teus proxectos web.
Unha vez programada esa funcionalidade, poderala executar as veces que queiras chamándoa a través dun shortcode.
Á hora de inserilo no teu editor de WordPress, un shortcode ten unha aparencia parecida a unha etiqueta de HTML, coa diferenza de que vai entre corchetes [ ] e non entre signos de menor-que e maior-que </>
A pinta dun shortcode é tal que así:
[shortcode]
Ou, se acepta parámetros, algo así:
[shortcode parametro1=”valor” parametro2=”valor”]
Cales son os shortcodes en WooCommerce?
Existen bastantes shortcodes en WooCommerce e moitos deles aceptan diferentes parámetros.
Utilizámolos para mostrar produtos, listas de produtos ou páxinas especiais que non podemos configurar directamente desde o personalizador de WordPress.
A continuación móstroche os que creo que son os máis interesantes, pero podes atopar toda a documentación na páxina de Woocommerce.
Shortcodes de páxina
Existen 3 shortcodes que é obrigatorio situar nalgún sitio da túa web para que o WooCommerce funcione correctamente.
Son o Carriño, o Checkout e A Miña Conta.
Existe un cuarto que é opcional, que serve para que os teus clientes poidan facer seguimento dos seus pedidos.
Polo xeral créanse automaticamente á hora de configurar o teu WooCommerce, pero de non ser así (ou de non querer que sexa así), teralos que poñer a man.
Carriño
Non ten moito misterio. É o utilizado para mostrar o carriño e todos os seus elementos. Non ten atributos.
[woocommerce_cart]
Checkout
O checkout é a páxina de pago. Nela o teu cliente debe introducir os seus datos e elixir o método de pago que máis lle conveña.
Non ten atributos.
[woocommerce_checkout]
A miña conta
Se tes activada a posibilidade de que os teus clientes creen unha conta, a través deste shortcode poderán ver os seus pedidos anteriores e actualizar a súa información.
Ten un atributo, que che permite establecer cantos pedidos anteriores se van a mostrar. Por defecto está en 15. Debes indicar -1 se queres que aparezan todos.
[woocommerce_my_account order_count="-1"]
Seguimento de pedidos
Podes activar un formulario que mostra o seguimento dos pedidos aos teus clientes, ingresando os detalles dos seus pedidos.
Non ten atributos.
[woocommerce_order_tracking]
Shortcodes relacionados cos produtos
Antes de continuar direiche que algunhas das funcionalidades que fan os shortcodes que che ensino a continuación as podes engadir en formato bloque de Gutenberg. Pero non todos, polo momento.
Así que alí van.
Produtos
O shortcode de produtos é:
[products]
É un dos máis completos. Permite listar produtos polo seu IDE, código SKU, categorías, etiquetas, etc.
Ten múltiples atributos que poden acompañar ao shortcode, por exemplo:
- Limit: indica o número de produtos a mostrar.
- Columns: indica o número de columnas a mostrar.
- Orderby: ordena os produtos segundo a opción indicada.
- Category: indica as categorías de produtos a mostrar
- Etc.
Produtos destacados
Mostra os produtos que marcaras como destacados. O shortcode pode ter varios atributos e é do seguinte xeito:
[featured_products]
Aínda que a partir da versión 3.2 de WooCommerce, os produtos destacados pódense mostrar a través do shortcode xeral de produtos xunto a un atributo.
Sería desta forma:
[products visibility=” featured”]
Produtos recentes
De igual xeito podes mostrar os produtos agregados recentemente. Acepta varios atributos e mostraríase do seguinte xeito:
[recent_products]
Aínda así, posteriormente á versión 3.2 de WooCommerce, poderías mostralos como:
[products orderby = "id" order=" DESC"]
Produtos máis valorados
Poderíanse utilizar dous shortcodes para iso. Por unha banda, un específico e, se traballamos cunha versión de WooCommerce maior que a 3.2, co shortcode xeral de produtos.
[top_rated_products]
ou
[products top_rated]
Produtos máis vendidos
De igual forma que os anteriores, ten dous xeitos de mostrarse:
[best_selling_products]
ou
[products best_selling]
Produtos por categoría
Ou ben podes listar os produtos que están nunha mesma categoría.
[products category=”nome-de-categoria”]
Produto único
Tamén existe un shortcode para mostrar un produto único, identificado polo seu IDE ou polo seu SKU.
[product ide="número"]
Bloque de Shortcode. Shortcodes para WooCommerce e Gutenberg
Inserir un shortcode no editor de bloques de Gutenberg é moi sinxelo, xa que existe un bloque específico que o fai todo por nós.
Simplemente debes seleccionar o bloque shortcode e escribir dentro o que queiras utilizar.
Shortcodes para WooCommerce en Elementor
No construtor visual Elementor é semellante.
Existe un widget chamado Shortcode que simplemente debes arrastrar ao lugar onde queiras que se mostre e escribir o shortcode nel.
Conclusión
Hai algúns shortcodes máis e, como poderías imaxinar, moitísimas combinacións grazas aos atributos.
Lembra visitar a documentación de WooCommerce se queres velos todos.
Quixen mostrar algúns dos máis habituais e que coñezas a súa existencia, porque poden ser útiles nalgunhas situacións.
E ti, utilizáchelos algunha vez?
2 comentarios
Me ha parecido muy interesante el artículo. Yo utilizo los bloques de WordPress que hacen lo mismo que muchos shorcodes y se pueden utilizar para hacer tiendas online muy potentes. Mi pregunta sería de que como haces rtu las tiendas online, con shorcodes??!!!
Muchas gracias por pasarte, Pedro. Pues las suelo hacer con GeneratePress + Elementor, mediante el constructor visual y las opciones que trae el tema. Aun así, también he probado construir la tienda con bloques de Gutenberg y la verdad que también se pueden hacer cosas muu chulas!