{"id":75773,"date":"2024-07-17T10:14:56","date_gmt":"2024-07-17T08:14:56","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=75773&preview=true&preview_id=75773"},"modified":"2024-07-22T16:57:44","modified_gmt":"2024-07-22T14:57:44","slug":"shortcodes-woocommerce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/shortcodes-woocommerce\/","title":{"rendered":"Gu\u00eda completa de los shortcodes de WooCommerce"},"content":{"rendered":"

WooCommerce<\/a> es el principal plugin de comercio electr\u00f3nico<\/a> para WordPress, que permite a millones de empresas transformar sus sitios web en s\u00f3lidas tiendas online. Sin embargo, mucha gente desconoce sus shortcodes<\/a>.<\/p>\n

Esta gu\u00eda explica todo lo que necesitas saber sobre los shortcodes de WooCommerce, desde shortcodes esenciales que muestran productos y gestionan carritos hasta personalizaciones avanzadas para experiencias de usuario a medida.<\/p>\n

Exploremos c\u00f3mo estos peque\u00f1os fragmentos de c\u00f3digo pueden influir significativamente en tu sitio web de comercio electr\u00f3nico<\/a>.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 son los shortcodes?<\/h2>\n

Los shortcodes se introdujeron en WordPress 2.5 en 2008<\/a>. Son peque\u00f1os fragmentos de c\u00f3digo encerrados entre corchetes como este: [shortcode]<\/code>. Act\u00faan como marcadores de posici\u00f3n que indican a WordPress que ejecute una funci\u00f3n espec\u00edfica o muestre cierto contenido de forma din\u00e1mica.<\/p>\n

Por ejemplo, en lugar de programar manualmente una compleja cuadr\u00edcula de productos, puedes utilizar un shortcode para crearla y mostrarla al instante en tu sitio web. Esto ahorra tiempo y reduce la posibilidad de errores, facilitando el mantenimiento y la actualizaci\u00f3n de tu sitio.<\/p>\n

A lo largo de los a\u00f1os, los shortcodes han evolucionado, haci\u00e9ndose m\u00e1s potentes y vers\u00e1tiles. WooCommerce aprovecha esta caracter\u00edstica, ofreciendo una gama de shortcodes adaptados espec\u00edficamente a la funcionalidad del comercio electr\u00f3nico.<\/p>\n

Primeros pasos con los shortcodes de WooCommerce<\/h2>\n

Para utilizar los shortcodes de WooCommerce en tu sitio de WordPress, aseg\u00farate de que el plugin WooCommerce<\/a> est\u00e1 instalado y activado.<\/p>\n

Para ello, accede a tu panel de WordPress, ve a Plugins<\/strong> > A\u00f1adir nuevo<\/strong> y busca \u00abWooCommerce\u00bb A continuaci\u00f3n, haz clic en Instalar Ahora<\/strong> en el plugin WooCommerce y Act\u00edvalo<\/strong>.<\/p>\n

Por \u00faltimo, puedes seguir el asistente de configuraci\u00f3n de WooCommerce para configurar los ajustes b\u00e1sicos, como los detalles de la tienda, los m\u00e9todos de pago y las opciones de env\u00edo.<\/p>\n

Cuando instalas el plugin WooCommerce, tu sitio de WordPress se actualiza autom\u00e1ticamente con las p\u00e1ginas Carrito<\/strong>, Pago<\/strong> y Mi cuenta<\/strong>. Sin embargo, puedes hacer m\u00e1s con tus productos, y eso es lo que exploraremos con los shortcodes.<\/p>\n

La sintaxis b\u00e1sica de los shortcodes<\/h3>\n

Los shortcodes de WooCommerce suelen incluir atributos adicionales para personalizar su salida. Esta es la estructura b\u00e1sica:<\/p>\n

[shortcode attribute1=\"value1\" attribute2=\"value2\"]<\/code><\/pre>\n
Por ejemplo, el shortcode [products limit=\"4\" columns=\"2\"]<\/code> muestra cuatro productos en un dise\u00f1o de dos columnas.<\/p>\n
C\u00f3mo a\u00f1adir shortcodes en entradas, p\u00e1ginas y widgets<\/h3>\n
Los shortcodes pueden a\u00f1adirse casi en cualquier parte de WordPress. Puedes a\u00f1adirlos a una entrada o a una p\u00e1gina simplemente escribi\u00e9ndolos o peg\u00e1ndolos en cualquier editor de texto<\/a> dentro de WordPress o en un bloque de shortcodes si utilizas Gutenberg<\/a> o cualquier constructor de p\u00e1ginas<\/a>.<\/p>\n
Para esta gu\u00eda, vamos a utilizar Gutenberg:<\/p>\n
    \n
  1. Ve a Entradas<\/strong> o P\u00e1ginas<\/strong> en el panel de control de WordPress<\/a>.<\/li>\n
  2. Abre la entrada\/p\u00e1gina donde quieras a\u00f1adir el shortcode.<\/li>\n
  3. Haz clic en el icono +<\/strong> para a\u00f1adir un nuevo bloque.\n
    \"Pasos
    Pasos para a\u00f1adir un shortcode con bloques de Gutenberg en WordPress.<\/figcaption><\/figure><\/li>\n
  4. Busca y selecciona el bloque Shortcode.<\/li>\n
  5. Pega tu shortcode en el bloque.<\/li>\n<\/ol>\n
    Por ejemplo, supongamos que quieres mostrar una cuadr\u00edcula de tus \u00faltimos productos en tu p\u00e1gina de inicio. Utilizando el editor de bloques<\/a>, introducir\u00edas el shortcode: [products limit=\"3\" columns=\"3\"]<\/code> y Actualizar\u00edas<\/strong> o Publicar\u00edas<\/strong> tu p\u00e1gina.<\/p>\n
    Esto crear\u00e1 una cuadr\u00edcula con tres productos mostrados en una columna, ofreciendo una forma din\u00e1mica y atractiva de mostrar tus \u00faltimas ofertas.<\/p>\n
    \"Mostrar
    Mostrar una cuadr\u00edcula de productos utilizando un c\u00f3digo corto en el editor de bloques de WordPress.<\/figcaption><\/figure>\n
    Tambi\u00e9n puedes a\u00f1adir shortcodes a los widgets<\/a> navegando a Apariencia<\/strong> > Widgets<\/strong>. A\u00f1ade un widget de Texto<\/strong> a la zona de widgets que desees (barra lateral, pie de p\u00e1gina, etc.). Introduce tu shortcode en el cuadro de texto dentro del widget y guarda el widget.<\/p>\n
    Shortcodes esenciales de WooCommerce<\/h2>\n
    WooCommerce proporciona una variedad de shortcodes que te permiten mostrar productos, gestionar el carrito de la compra<\/a> y mejorar el proceso de pago.<\/p>\n
    Exploremos los shortcodes m\u00e1s esenciales de WooCommerce, sus atributos y ejemplos detallados para ayudarte a utilizarlos eficazmente en tu tienda.<\/p>\n
    Shortcodes de visualizaci\u00f3n de productos<\/h3>\n
    El shortcode [products]<\/code> es uno de los shortcodes m\u00e1s vers\u00e1tiles de WooCommerce. Te permite mostrar una lista de productos en funci\u00f3n de varios criterios.<\/p>\n
    Tiene muchos atributos que te permiten mostrar los productos como desees:<\/p>\n