Cómo personalizar la página de producto en WooCommerce: 5 consejos indispensables

La página de producto en WooCommerce es una de las secciones más relevantes en una tienda online. Unas altas tasas de rebote, por ejemplo, suelen encontrar su origen en las deficiencias de diseño de estas páginas. Pero, ¿es posible modificar la página de producto en WooCommerce? Sea cuál sea la plantilla elegida, personalizar estas secciones no reviste dificultades, pero es importante conocer las mejores prácticas al respecto.

¿Tu ecommerce tiene un gran flujo de visitantes pero, ay, sus conversiones están por debajo del promedio de su industria? Una página de producto mal optimizada en WooCommerce podría ser la causa. Y es que su diseño tiene una importancia capital para los consumidores online.

Si quieres alterar el orden de los elementos, agregar nuevos campos de texto o etiquetas o modificar la imagen por defecto, en las siguientes líneas encontrarás todo lo que necesitas. Pero antes de personalizar la página de producto en WooCommerce, merece la pena responder a la siguiente cuestión: ¿por qué es importante?

¿Por qué la página de producto en WooCommerce es importante?

Aunque la página principal, las categorías, los procesos de checkout y otras secciones tienen una gran relevancia para nuestros consumidores, la página de producto merece una atención especial. ¿Por qué? Porque la mayoría de tus clientes son redirigidos a estas páginas a través de Google. Sólo una parte de ellos visita la home, hace click en una de las secciones del menú y selecciona después uno de los productos.

Para un porcentaje mayoritario de los consumidores online, las páginas de productos constituyen su primer (y a veces único contacto) con la tienda online de una empresa. ¿ Qué sucede cuando dicha página está mal optimizada o muestra un diseño deficiente? El cliente abandonará el ecommerce, sin molestarse en visitar otras secciones, pasando así a engrosar las tasas de rebote.

Otra razón para personalizar la página de producto en WooCommerce es que ayuda a obtener más tráfico online. No es ningún secreto que las tiendas online pueden mejorar sus rankings de búsqueda orgánica al optimizar sus categorías y fichas de productos.

Si bien el SEO es importante en todas las páginas de un ecommerce, es fundamental para las páginas de productos. Las descripciones, los títulos, las metatags, las imágenes y otros elementos tienen que ser debidamente optimizados si queremos mejorar el ranking de nuestros productos en Google, Bing y otros buscadores.

A diferencia de otras secciones del site, las páginas de sus productos pueden ser largas y detalladas, lo que permite a los motores de búsqueda rastrearlas en profundidad en busca de keywords y otros elementos de importancia para el posicionamiento orgánico en buscadores. En otras palabras, los especialistas en SEO pueden hacer su 'magia' sin molestas limitaciones en las fichas de productos.

Pero al margen de Google, diseñar una excelente ficha de producto nos ayudará a mejorar su impacto en las conversiones. Si es lo suficientemente útil, incluso podrías ser compartida entre los clientes, algo que sin duda mejorará su alcance y dará otra buena razón a Google para mejorar su posicionamiento en las SERPs.

Por otra parte, las fichas de productos de WooCommerce cuenta con diseños predeterminados. A veces su apariencia, organización o tipografía se encuentra muy alejada del branding de nuestro ecommerce. Modificarla, pues, es ningún capricho, sino una necesidad, ya que nos ayudará a dar una apariencia más profesional y exclusiva a nuestra tienda online.

No es casualidad, pues, que AliExpress, Walmart, Zalando y los mejores ecommerces de internet cuiden hasta el último detalle en sus fichas de productos. ¿Estás preparado para modificar la página de producto en WooCommerce? ¡No te pierdas las siguientes líneas!

5 consejos para modificar la página de producto en WooCommerce

Aunque es posible customizar WooCommerce haciendo retoques en Javascript, HTML y CSS, esta selección de consejos y trucos se enfoca en el uso de PHP y en la instalación de plugins determinados. Como no podía ser de otra manera, esta lista no pretende resumir todos los cambios que pueden realizarse en WooCommerce, sino los más representativos y útiles. ¿Te animas a descubrirlos?

Utiliza plugins específicos

¿La forma más sencilla de modificar la página de producto en WooCommerce? Lo has adivinado: plugins. La instalación de estos complementos goza de una gran popularidad en WordPress, por ser una manera fácil y rápida de enriquecer cualquier aspecto de las plantillas de este CMS.

Específicamente para WooCommerce, existen diversos plugins pensados para personalizar sus fichas de productos: WooCommerce Product Add-ons, YITH WooCommerce Product Add-Ons o WooCommerce PPOM (Personalized Product Option Manager), entre otros.

Sin embargo, aunque el uso de plugins permite modificar eficazmente las fichas de productos, no es el más recomendable. En primer lugar, el abuso de este recurso tiende a lastrar los tiempos de carga. Por otra parte, las modificaciones que realiza son genéricas y limitadas. Pueden ser útiles en determinados casos, pero no en todos.

Agrega o suprime elementos con PHP

Dado que el uso de plugins no es recomendable al 100%, ¿de qué otra forma es posible alterar el diseño de las páginas de producto? La respuesta es PHP. Este lenguaje de programación, esencial de la arquitectura web, es un poderoso aliado para crear, modificar o eliminar cualquier elemento de una ficha de producto.

Por ejemplo, si deseamos agregar nuevos elementos, tan sólo deberemos utilizar la función: woocommerce_single_product_summary. Veamos un ejemplo específico: si queremos incluir un nuevo elemento inmediatamente antes del precio, utilizaremos este código, modificando el campo 'Aquí tu nuevo elemento' y el orden de prioridad si fuera necesario:

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_custom_content', 12 );

function woocommerce_template_custom_content(){
echo "<p>Aquí tu nuevo elemento</p>";
}

Pero ¿qué sucede si lo que quiero es eliminar elementos de la página de producto de WooCommerce, no agregarlos? En este caso, tan sólo deberemos utilizar el siguiente hook: remove_action. Veamos un ejemplo específico: para suprimir el elemento description en las fichas de producto (algo que no recomendamos), la siguiente función te ayudará a conseguirlo:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

No obstante, es importante considerar la complejidad del lenguaje PHP antes de modificarlo. Sólo los programadores u otros especialistas en diseño web deben modificar estos códigos, ya que las consecuencias de un error pueden ser muy severas. A propósito de este consejo, quizá te interese conocer más sobre las funciones en PHP.

Cambiando el orden de los elementos en la template

Otra de las mejores formas de configurar la página de producto en WooCommerce consiste en alterar el orden de sus elementos: el title, el precio, la description o el CTA 'Comprar/Añadir al carrito', entre otros. En la plantilla correspondiente de WooCommerce, encontraremos el siguiente archivo: /wp-content/plugins/woocommerce/templates/content-single-product.php

Cambiar el orden de los elementos a mostrar es tan simple como alterar la prioridad en cada uno de ellos. Por ejemplo, si deseamos que el elemento description aparezcan debajo del CTA 'Comprar', deberemos dar a este última prioridad diferente (menor al elemento description, queremos decir). Veamos un ejemplo:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

Dado que la prioridad del botón 'Comprar' es mayor que la del código de description, esta aparecerá después. De esta forma, es posible modificar el orden de todos los elementos de la ficha de producto.

Alterar imagen por defecto con snippets

Si por alguna razón uno de nuestros productos no dispone de imagen, es importante mostrar una fotografía por defecto que armonice con nuestro branding corporativo. Mostrar la imagen por defecto de WooCommerce sería un error, ¿verdad?

Sin embargo, personalizar la imagen predeterminada de WooCommerce es muy simple. Tan sólo debemos dirigirnos al archivo functions.php o similar, para introducir el siguiente hook:

add_filter( 'woocommerce_placeholder_img_src', 'bp_woo_placeholder', 10 );
function bp_woo_placeholder( $image_url ) {
$image_url = ";
return $image_url;}

Ahora sólo tendremos que incluir en las zonas entrecomilladas la URL correspondiente a la imagen deseada. En adelante, cuando añadas un producto sin imagen, aparecerá esta fotografía por defecto.

Elimina los productos relacionados en PHP

Y si todavía te preguntas cómo cambiar la página de producto en WooCommerce, debes saber que el lenguaje PHP permite igualmente suprimir los carruseles de artículos relacionados. En determinadas fichas y landing pages, eliminar este elemento puede ser beneficioso. Por ejemplo, si queremos focalizar la atención de los visitantes en CTAs, imágenes y otros items de la página de producto, pero no nos interesa fomentar el cross selling o el up selling.

Para eliminar este carrusel de productos relacionados, únicamente deberemos introducir la siguiente funcionalidad o hook en la plantilla PHP:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

No obstante, es importante subrayar lo siguiente: mostrar productos relacionados con el item principal es una práctica recomendable en la mayoría de las fichas. Amazon, Walmart, Zappos y otros populares ecommerce utilizan este recurso para ofrecer upsells o cross sells. Si decides eliminarla, procura que sea en páginas específicas y no en todas ellas.

En vista de lo anterior, personalizar la página de producto en WooCommerce está lejos de ser un desafío, ¿verdad? Ahora que conoces algunos de los mejores consejos para hacerlo, no te conformes con utilizar el diseño por defecto de este plugin para WordPress y modifícalo a tu gusto.