{"id":124134,"date":"2023-11-08T09:00:00","date_gmt":"2023-11-08T09:00:00","guid":{"rendered":"https:\/\/www.bluehost.com\/blog\/codigos-cortos-de-woocommerce-una-guia-completa\/"},"modified":"2025-02-24T03:50:05","modified_gmt":"2025-02-24T03:50:05","slug":"codigos-cortos-de-woocommerce-una-guia-completa","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/es\/codigos-cortos-de-woocommerce-una-guia-completa\/","title":{"rendered":"C\u00f3digos cortos de WooCommerce: una gu\u00eda completa"},"content":{"rendered":"\n

Como una de las plataformas de comercio electr\u00f3nico m\u00e1s populares<\/a> del mundo, WooCommerce ofrece una amplia gama de funciones que le permiten vender productos y servicios en l\u00ednea.<\/p>\n\n

Pero, \u00bfsab\u00edas que hay una funci\u00f3n que puede ayudarte a sacar a\u00fan m\u00e1s partido a tu tienda de comercio electr\u00f3nico?<\/p>\n\n

Estamos hablando de shortcodes.<\/p>\n\n

Si no est\u00e1 familiarizado con ellos, no hay necesidad de preocuparse. Te explicamos qu\u00e9 son y c\u00f3mo utilizarlos para optimizar tu tienda online<\/a>. Adem\u00e1s, exploraremos formas efectivas de resolver errores de c\u00f3digo corto. <\/p>\n\n

\u00bfListo para aprender todo sobre los c\u00f3digos cortos de WooCommerce?<\/p>\n\n

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

Los shortcodes de WooCommerce son fragmentos de c\u00f3digo de WordPress<\/a> que realizan una funci\u00f3n espec\u00edfica en tu sitio web. Estos fragmentos de c\u00f3digo vienen con una funcionalidad predefinida y fueron creados espec\u00edficamente para WooCommerce<\/a>. <\/p>\n\n

Los shortcodes de WooCommerce son fragmentos de c\u00f3digo de WordPress que realizan una funci\u00f3n espec\u00edfica en tu sitio web.<\/p><\/blockquote><\/figure>\n\n

Todos los c\u00f3digos cortos tienen la misma estructura: textos cortos entre corchetes. Si se utilizan varios textos, se unir\u00e1n entre s\u00ed con guiones bajos y comas. Una vez que comprenda la sintaxis o la funci\u00f3n del controlador, puede comenzar a agregar c\u00f3digos cortos a las p\u00e1ginas de su sitio web. <\/p>\n\n

Los shortcodes de WooCommerce se pueden utilizar con par\u00e1metros o argumentos (args), que te permiten personalizar a\u00fan m\u00e1s tu sitio web. Un par\u00e1metro es el atributo que se ajusta mediante un c\u00f3digo corto, mientras que un argumento es el valor asignado a ese atributo. <\/p>\n\n

Por ejemplo, si est\u00e1 utilizando un c\u00f3digo corto de producto, puede establecer el n\u00famero de productos que se mostrar\u00e1n (es decir, el par\u00e1metro) y el n\u00famero de columnas que desea (es decir, el argumento).<\/p>\n\n

Aqu\u00ed hay un vistazo a los par\u00e1metros y argumentos en un c\u00f3digo corto de WooCommerce:<\/p>\n\n

[related_products limit=\u00bb4″]<\/strong><\/p>\n\n

En este ejemplo, \u00ablimit\u00bb es el par\u00e1metro, mientras que \u00ab4\u00bb es el argumento. Los par\u00e1metros le permiten modificar los c\u00f3digos cortos para que puedan funcionar de diferentes maneras seg\u00fan sus necesidades o requisitos. Sin embargo, no todos los shortcodes de WooCommerce utilizan par\u00e1metros. <\/s><\/p>\n\n

<\/a>\u00bfPor qu\u00e9 deber\u00edas usar los shortcodes de WooCommerce?<\/h2>\n\n

Los shortcodes de WooCommerce te permiten personalizar tu tienda de comercio electr\u00f3nico a\u00f1adiendo varias funciones a tus publicaciones y p\u00e1ginas sin necesidad de tener experiencia en codificaci\u00f3n. Mediante el uso de c\u00f3digo preexistente, puede ahorrar una cantidad significativa de tiempo que se habr\u00eda dedicado a escribir su propio c\u00f3digo<\/a>. <\/p>\n\n

Los c\u00f3digos cortos ofrecen una forma r\u00e1pida y conveniente de mejorar el dise\u00f1o de su sitio web<\/a> para obtener m\u00e1s conversiones. Estos fragmentos de c\u00f3digo le permiten crear una experiencia de compra superior y diferenciar su marca de la competencia. <\/p>\n\n

Seg\u00fan un informe de McKinsey, el 75% de los clientes en l\u00ednea<\/a> esperan que las marcas les brinden una experiencia de compra fluida. Por lo tanto, mejorar la experiencia del usuario de su sitio web conduce a niveles m\u00e1s altos de satisfacci\u00f3n del cliente, lo que lo ayuda a generar m\u00e1s ingresos. <\/p>\n\n

C\u00f3mo usar los c\u00f3digos cortos de WooCommerce<\/h2>\n\n

Ahora que sabes qu\u00e9 son los shortcodes de WooCommerce y por qu\u00e9 son importantes, vamos a explorar c\u00f3mo utilizarlos. A\u00f1adir shortcodes a tu tienda WooCommerce es bastante sencillo, incluso si no tienes conocimientos de codificaci\u00f3n. <\/p>\n\n

Sin embargo, antes de realizar cualquier cambio en su sitio web, es mejor hacer una copia de seguridad de sus datos. De esta manera, puede restaurar su sitio web a su estado anterior si algo sale mal. <\/p>\n\n

Si est\u00e1 utilizando el Editor cl\u00e1sico<\/a>, solo necesita copiar y pegar el c\u00f3digo corto elegido en la p\u00e1gina deseada.<\/p>\n\n

Por otro lado, el editor de bloques de Gutenberg<\/a> requiere que agregues el shortcode a un bloque de shortcode. En este tutorial, te mostraremos c\u00f3mo a\u00f1adir c\u00f3digos cortos a tu sitio web de WordPress utilizando el editor de Gutenberg. <\/p>\n\n

Empecemos:<\/p>\n\n

    \n
  1. Inicia sesi\u00f3n en tu panel de control de WordPress.<\/li>\n\n\n\n
  2. Vaya a P\u00e1ginas<\/strong>, que se encuentra en el men\u00fa de la izquierda, y seleccione Agregar nuevo<\/strong>. Tenga en cuenta que puede utilizar una p\u00e1gina nueva o existente. <\/li>\n\n\n\n
  3. Haga clic en el icono negro m\u00e1s (+) para crear un bloque.<\/li>\n<\/ol>\n\n
    \"Haga<\/figure>\n\n
      \n
    1. Una vez que hayas hecho clic en el icono m\u00e1s, ver\u00e1s el bloque de c\u00f3digo corto. Haga clic en \u00e9l para agregarlo al editor. Alternativamente, escriba [\/] en la p\u00e1gina y busque \u00abshortcode\u00bb. <\/li>\n<\/ol>\n\n
      \"Añade<\/figure>\n\n
        \n
      1. Escriba o pegue el c\u00f3digo abreviado deseado en el campo proporcionado.<\/li>\n<\/ol>\n\n
        \"Introduzca<\/figure>\n\n
          \n
        1. Obtenga una vista previa de la p\u00e1gina para asegurarse de que todo se vea bien.<\/li>\n\n\n\n
        2. Haga clic en el bot\u00f3n Publicar <\/strong>en la esquina superior derecha de la p\u00e1gina.<\/li>\n<\/ol>\n\n

          \u00a1Eso es todo! Has a\u00f1adido con \u00e9xito un shortcode de WooCommerce a tu p\u00e1gina. Ahora que sabes c\u00f3mo usar estos fragmentos de c\u00f3digo, exploremos varios c\u00f3digos cortos que puedes usar para mejorar tu sitio web de WordPress. <\/p>\n\n

          <\/a>C\u00f3digos cortos de WooCommerce y c\u00f3mo usarlos<\/h2>\n\n

          Si bien hay muchos c\u00f3digos cortos de WooCommerce, todos sirven para diferentes prop\u00f3sitos. Hemos recopilado una lista de algunos de los shortcodes m\u00e1s populares que puedes utilizar para mejorar la funcionalidad de tu tienda online. <\/p>\n\n

          <\/a>C\u00f3digos cortos de la p\u00e1gina de WooCommerce<\/h3>\n\n

          Si has pasado por el Asistente de configuraci\u00f3n de WooCommerce, es posible que hayas notado que los c\u00f3digos cortos de p\u00e1gina se generan autom\u00e1ticamente. Estos son los c\u00f3digos cortos de p\u00e1gina m\u00e1s populares y c\u00f3mo usarlos. <\/p>\n\n

          Carro<\/strong><\/p>\n\n

          \"Códigos<\/figure>\n\n

          El shortcode de carrito de WooCommerce simplifica el proceso de agregar una p\u00e1gina de carrito a su tienda en l\u00ednea. Crea una p\u00e1gina de carrito predeterminada, por lo que no tiene que crear una desde cero. <\/p>\n\n

          Adem\u00e1s de mostrar todos los productos que sus clientes han agregado a sus carritos, este c\u00f3digo corto muestra el subtotal, as\u00ed como la cantidad y el precio de cada producto. El shortcode del carrito de WooCommerce es el siguiente: <\/p>\n\n

          [woocommerce_cart]<\/strong><\/p>\n\n

          Seguimiento de pedidos<\/strong><\/p>\n\n

          Este shortcode crea un formulario predeterminado que los compradores online pueden utilizar para comprobar el estado de sus pedidos. Una vez creado el formulario, los clientes deben ingresar sus ID de pedido y correos electr\u00f3nicos de facturaci\u00f3n para realizar un seguimiento de sus pedidos. <\/p>\n\n

          Para crear un formulario de seguimiento de pedidos, ingrese el c\u00f3digo corto a continuaci\u00f3n:<\/p>\n\n

          [woocommerce_order_tracking]<\/strong><\/p>\n\n

          As\u00ed es como se ver\u00eda el formulario de seguimiento de pedidos en la interfaz de tu tienda:<\/p>\n\n

          \"Formulario<\/figure>\n\n

          Mi cuenta<\/strong><\/p>\n\n

          Este shortcode muestra los detalles de la cuenta de un cliente. Permite a los clientes ver, modificar y actualizar su informaci\u00f3n personal. Por ejemplo, pueden ver sus pedidos anteriores, cambiar sus contrase\u00f1as y direcciones de correo electr\u00f3nico e iniciar y cerrar sesi\u00f3n en sus cuentas. <\/p>\n\n

          El c\u00f3digo corto para esto es:<\/p>\n\n

          [woocommerce_my_account]<\/strong><\/p>\n\n

          Caja<\/strong><\/p>\n\n

          Este shortcode de WooCommerce crea una p\u00e1gina de pago. Como tal, incluye campos para que los clientes agreguen sus detalles de facturaci\u00f3n e informaci\u00f3n de env\u00edo. Este shortcode incorpora tambi\u00e9n el bot\u00f3n Realizar pedido<\/strong> . <\/p>\n\n

          Para a\u00f1adir la p\u00e1gina de pago a tu sitio web de WooCommerce, introduce el siguiente c\u00f3digo corto:<\/p>\n\n

          [woocommerce_checkout]<\/strong><\/p>\n\n

          Dado que m\u00e1s del 70% de los carritos de compras en l\u00ednea<\/a> est\u00e1n abandonados, personalizar su p\u00e1gina de pago de WooCommerce es una forma efectiva de optimizar la tasa de conversi\u00f3n de su sitio web<\/a>.<\/p>\n\n

          Puedes personalizar tu p\u00e1gina de pago utilizando plugins como YITH WooCommerce Checkout Manager<\/a>. Este plugin te permite modificar los campos existentes y a\u00f1adir campos personalizados para agilizar el proceso de pago<\/a>. <\/p>\n\n

          <\/a>C\u00f3digos cortos de productos de WooCommerce<\/h3>\n\n

          Los shortcodes de productos de WooCommerce te permiten crear p\u00e1ginas de productos personalizadas y mostrarlos en cualquier lugar que desees. Repasemos c\u00f3mo puede usarlos para mostrar sus productos de diferentes maneras en su sitio web. <\/p>\n\n

          Productos<\/strong><\/p>\n\n

          Muestre cualquier art\u00edculo en stock utilizando el c\u00f3digo abreviado de los productos:<\/strong><\/p>\n\n

          [products]<\/strong><\/p>\n\n

          La p\u00e1gina de productos se puede personalizar a\u00fan m\u00e1s para mostrar los productos en orden ascendente (ASC) o descendente (DESC).<\/p>\n\n

          Por ejemplo, si desea enumerar productos en orden ascendente, el c\u00f3digo abreviado se ver\u00eda as\u00ed:<\/p>\n\n

          [products order=\u00bbASC\u00bb]<\/strong><\/p>\n\n

          Si desea realizar m\u00e1s personalizaciones, tiene la opci\u00f3n de restringir el n\u00famero de productos que se mostrar\u00e1n:<\/p>\n\n

          [products limit=\u00bb5″ order=\u00bbASC\u00bb]<\/strong><\/p>\n\n

          Otros par\u00e1metros para este shortcode incluyen:<\/p>\n\n