Páginas de la tienda y los bloques de pago

Módulo 2: Instalar y configurar · Tiempo de lectura: 9 minutos

Objetivo de aprendizaje: Tras esta lección sabrá reconocer las páginas de la tienda de WooCommerce y asignarlas correctamente, y elegirá con criterio entre los bloques y los shortcodes para el carrito y la página de pago.

Conceptos clave: página de la tienda, carrito, finalizar compra, Mi cuenta, página de condiciones, configuración de páginas, bloques, shortcodes, tema de bloques, tema clásico, compatibilidad de extensiones, noindex

Cuatro páginas con una función especial

Un sitio de WordPress está formado por páginas y entradas (curso de WordPress, lección 4.2). WooCommerce añade los productos como un tipo de contenido propio y otorga a algunas páginas normales una función especial. En la lista de Páginas, esas páginas se ven como cualquier otra, pero WooCommerce sabe qué tarea tiene cada una. Eso se define en los ajustes, no en el nombre ni en la dirección de la página.

Como la asignación está en los ajustes, puede dar a las páginas otro título y otra dirección. Theehuis Example llama al carrito "Mandje" (cesta, en neerlandés) en /mandje/, y funciona, siempre que esa página figure como carrito en Configuración de páginas.

Si la asignación falla, lo notará en lugares inesperados. Algunos ejemplos frecuentes:

• Alguien elimina la página Carrito porque "estaba duplicada". Después, un visitante que pulsa Añadir al carrito llega a una página de error, y algunos temas dejan de mostrar la cesta en la cabecera.
• Tras una migración o una importación, en Finalizar compra hay asignada otra página distinta de la que contiene el bloque de pago. El visitante ve una página vacía y no puede hacer el pedido.
• Al ejecutar el asistente por segunda vez se crea una segunda página "Finalizar compra-2". Una página está asignada y la otra está en el menú.

Por eso, después de cada cambio importante (tema, migración, importación), compruebe en Configuración de páginas qué página está asignada y abra esa página.

Bloques o shortcodes

Hay dos formas de colocar el carrito y la página de pago en una página.

Los shortcodes son la forma antigua: en la página hay un código corto entre corchetes, como [woocommerce_cart] y [woocommerce_checkout]. Al mostrar la página, WooCommerce lo sustituye por el formulario. El diseño lo aporta el tema, y muchísimas extensiones se han creado durante años para este formato.

Los bloques son la forma nueva: la página contiene el bloque Carrito o Finalizar compra, compuesto por bloques más pequeños (dirección, envío, método de pago, resumen, el botón de pedido). Los ve y los edita en el editor de bloques (curso de WordPress, lección 4.1). Los bloques se comunican con el servidor a través de la Store API (lección 2.4): el formulario funciona directamente en el navegador, sin recargar la página cada vez.

Desde WooCommerce 8.3 (noviembre de 2023), una instalación nueva recibe los bloques. Una tienda existente que se actualiza conserva lo que tenía. Los shortcodes siguen disponibles.

¿Cuál elegir? Algunas preguntas le ayudarán:

• ¿Funcionan sus extensiones con los bloques? Es la pregunta más importante. Una extensión que añade un campo a la página de pago (una fecha de entrega, un NIF-IVA, un mensaje de regalo) debe haberse adaptado expresamente a los bloques. En la página de la extensión suele indicarse si es "compatible con el bloque de finalizar compra". En el editor del bloque de pago, WooCommerce puede mostrar un aviso sobre extensiones activas que no están marcadas como compatibles.
• ¿Qué tema utiliza? Con un tema de bloques (curso de WordPress, lección 5.1), los bloques encajan mejor. Con un tema clásico también funcionan, pero el diseño no queda tan integrado de forma natural.
• ¿Necesita modificar el botón de pedido? Con los bloques, el texto del botón se configura en el editor. Para las normas que se aplican a ese botón (lección 5.4), resulta práctico.
• ¿Acepta que la Store API sea pública? Con los bloques debe estar accesible; un plugin de seguridad que cierre la API REST rompe la página de pago.

Theehuis Example no utiliza extensiones que añadan campos y tiene un tema de bloques. Se queda con los bloques. Otra tienda con un plugin de fecha de entrega que solo funciona con el shortcode elige el shortcode de forma temporal, y vuelve a revisarlo en cada actualización importante de ese plugin.

Si cambia de formato, hágalo en su tienda de prueba y después pruebe un pedido completo (lección 4.5). En WooCommerce > Estado > Herramientas, WooCommerce ofrece una herramienta para volver a crear las páginas de la tienda que falten; esta crea páginas nuevas, no convierte las existentes.

Por qué el carrito y la página de pago no deben aparecer en los buscadores

El carrito es distinto para cada visitante y, para un buscador, siempre está vacío. Un carrito vacío en los resultados de búsqueda no ayuda a nadie. Por eso WooCommerce añade por sí mismo un noindex a las páginas del carrito, de finalizar compra y de Mi cuenta: el buscador puede visitar la página, pero no la incluye en los resultados de búsqueda. En el código fuente lo verá así:

<meta name='robots' content='noindex, follow' />

Un plugin de SEO o un tema puede sobrescribir esa línea. Rara vez es intencionado. En el ejercicio de esta lección comprobará si está presente.

Esas mismas tres páginas tampoco deben guardarse en la caché de páginas. WooCommerce envía cabeceras que indican a las cachés que no deben almacenar la página. Cómo comprobar que su caché lo respeta se explica en la lección 6.4.

Lo que ve un visitante sin carrito

Si abre la página de pago sin nada en el carrito, ocurre algo distinto que con productos en él:

• Con los bloques, la página de pago suele mostrar un aviso de que el carrito está vacío, con un botón para volver a la tienda.
• Con el shortcode, WooCommerce suele redirigirle al carrito.

Ambas cosas son normales. La comprobación de esta lección lo tiene en cuenta: el programa nunca añade nada a su carrito y solo mira lo que ve un visitante sin carrito.

En la práctica: así se ve en WooCommerce

Con otros temas y proveedores de alojamiento funciona de forma parecida; solo cambia el diseño.

1. Vaya a WooCommerce > Ajustes > Avanzado (Advanced) y abra Configuración de páginas (Page setup). Anote qué página figura en Carrito, Finalizar compra, Mi cuenta y Términos y condiciones.
2. En Páginas, abra cada una de esas páginas y compruebe que contiene el bloque (o el shortcode).
3. Abra la página de pago en el editor. Haga clic en el bloque Finalizar compra y revise sus partes en la vista de lista: datos de contacto, dirección de envío, opciones de envío, opciones de pago, nota, condiciones, el botón.
4. Compruebe en el editor del bloque de pago (y en las propias extensiones) si aparece un aviso sobre extensiones que no son compatibles con los bloques.
5. Abra el carrito en una ventana privada y vea el código fuente (Ctrl+U): busque noindex.

Resumen

• WooCommerce asigna una función a cuatro páginas (tienda, carrito, finalizar compra, Mi cuenta) más la página de condiciones; la asignación está en los ajustes, no en el nombre.
• Tras una migración, una importación o un cambio de tema, compruebe las asignaciones en Configuración de páginas.
• Desde WooCommerce 8.3, las tiendas nuevas reciben los bloques; los shortcodes siguen existiendo. Elija en función de sus extensiones y de su tema.
• Los bloques necesitan la Store API; no cierre la API REST.
• WooCommerce aplica un noindex al carrito, a finalizar compra y a Mi cuenta, y esas páginas no deben estar en la caché.

Cuestionario

Ejercicio

Ejercicio A2.2: Las páginas de su tienda. Introduzca la dirección de su tienda (de prueba) y las direcciones de su carrito, de su página de pago y de Mi cuenta (ruta, como /carrito/, o la URL completa en el mismo host). El programa consulta cada página una sola vez, sin cookies y sin añadir nada al carrito.

Cada página es correcta si:

• la página responde por https con el estado 200;
• el HTML contiene una señal de WooCommerce: para el carrito, el bloque wp-block-woocommerce-cart o la clase de body woocommerce-cart; para finalizar compra, wp-block-woocommerce-checkout o woocommerce-checkout; para Mi cuenta, woocommerce-account o un formulario de inicio de sesión de WooCommerce;
• hay un noindex (meta robots o la cabecera X-Robots-Tag).

Si la página de pago, con el carrito vacío, redirige al carrito que ha introducido, también es correcto.

Naranja: no hay noindex (compruebe si un plugin de SEO o su tema lo elimina); la página usa el shortcode en lugar del bloque (no es un error, pero conviene preguntarse si es una elección consciente). Rojo: un estado de error como 404, una página sin señal de WooCommerce (asigne la página correcta en Configuración de páginas), una redirección a otro host, o http sin https.

Después, anote para usted qué formato utiliza (bloques o shortcode) y por qué.

Para saber más

• Curso gratuito de WordPress 5.1: Temas: temas de bloques y temas clásicos
• Curso gratuito de WordPress 4.2: Páginas, entradas, categorías y etiquetas
• Curso gratuito de WordPress 4.1: El editor de bloques
• WooCommerce 8.3: bloques por defecto para tiendas nuevas (developer.woocommerce.com, en inglés): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• La Store API (developer.woocommerce.com, en inglés): https://developer.woocommerce.com/docs/apis/store-api/