7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Personaliza tus páginas de productos en Woocommerce GRATIS

Scroll to top
Read Time: 9 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Crear un eCommerce totalmente eficaz requiere que cuides un montón de pequeños y grandes detalles. Cualquier sitio web que crees para vender productos tendrá diferentes tipos de páginas orientadas a cubrir diversas necesidades. Las páginas de producto son un ejemplo de esto.

Una página de producto te permite proporcionar toda la información necesaria sobre el mismo para tus usuarios en un mismo sitio. WooCommerce viene con sus propias páginas de producto predeterminadas, pero es posible que personalizar tus páginas de productos en WooCommerce te ofrezca mejores resultados. En este tutorial sobre WooCommerce, aprenderás a personalizar tus páginas de productos gratis paso a paso. ¡Empecemos a personalizar una página de producto en WooCommerce!

Opciones para personalizar en WooCommerce gratis las páginas de producto

Lo fantástico de WordPress es que te proporciona muchas distintas opciones para llevar a cabo una misma tarea. Y, las páginas de productos de WooCommerce no son una excepción. Existen opciones en WooCommerce gratis y de pago para personalizar tu página de producto. En este tutorial, nos centraremos en conseguirlo gratis. Sin embargo, recuerda que habitualmente es más fácil alcanzarlo usando plugins premium.

  1. Constructores de página: No todos los constructores de página vienen con soporte para los bloques de WooCommerce, aunque otros sí. Por ejemplo, puedes usar constructores de página como Elementor y Visual Composer para crear en WooCommerce páginas de productos. Es algo bastante fácil de hacer, pero normalmente requiere una versión profesional o de pago de los constructores. 
  2. Plugins especializados: WooCommerce viene con algunos hooks o ganchos para las acciones y los filtros que puedes usar para añadir o eliminar contenido de las páginas de producto y otros sitios. Existen plugins especializados que hacen uso de estos ganchos y que puedes usar para realizar cambios y a las páginas de productos.
  3. Código personalizado: Esta es la forma más complicada para personalizar en WooCommerce gratis las páginas de producto, pero es también la más potente. No tendrás que invertir nada de dinero y tendrás control completo, pero existe el riesgo de cometer fallos si eres un principiante.

Personalizar en WooCommerce páginas de productos gratis requiere un esfuerzo adicional por tu parte. En este tutorial de WooCommerce usaremos una combinación de plugins especializados y algo de CSS para conseguirlo.

Empecemos nuestro tutorial sobre cómo usar WooCommerce para personalizar las páginas de productos gratis 

Empezaré este tutorial de WooCommerce asumiendo que ya tienes instalado un tema de tu elección y que has completado una configuración básica de este plugin, como por ejemplo, añadir algunos productos. Aquí usaremos el tema gratuito Storefront disponible en WordPress. Es un tema para WooCommerce gratis y sencillo, que fue creado por los propios desarrolladores de WooCommerce. Probablemente, estés usando un tema diferente, así que las capturas de pantalla de este tutorial podrían diferir de lo que veas al personalizar tu página producto en WooCommerce.

La siguiente imagen muestra el aspecto de la página de producto de WooCommerce con el tema Storefront.

Página de producto de WooCommerce en su versión inicialPágina de producto de WooCommerce en su versión inicialPágina de producto de WooCommerce en su versión inicial
Página de producto de WooCommerce en su versión inicial

También existen unas tablas de productos de WooCommerce al final de la página que muestran algunos productos relacionados a los usuarios.

WooCommerce Product Page: Related ProductsWooCommerce Product Page: Related ProductsWooCommerce Product Page: Related Products

Personalizar en WooCommerce los elementos de las páginas de productos gratis

Usaremos el plugin para WooCommerce gratis StoreCustomizer para realizar cambios a la apariencia de nuestras páginas de productos en WooCommerce. Una vez hayas instalado el plugin, dirígete a Apariencia > Personalizar > StoreCustomizer desde el menú principal del escritorio de administración.

Entonces verás algunos elementos de menú para personalizar en WooCommerce distintos tipos de páginas. Continúa y haz clic sobre WooCommerce Product Page para empezar a personalizar la página de producto en WooCommerce.

Menú del plugin StoreCustomizerMenú del plugin StoreCustomizerMenú del plugin StoreCustomizer
Menú del plugin StoreCustomizer

Ahora deberías ver distintas subsecciones que contienen opciones para realizar cambios a las distintas partes de las páginas de producto. En la parte superior, existen casillas de verificación para eliminar las migas de pan, el aumento de imagen. Yo voy a personalizar mi página producto WooCommerce dejando todas desmarcadas a excepción de la correspondiente al lightbox.

Opciones superiores de StoreCustomizerOpciones superiores de StoreCustomizerOpciones superiores de StoreCustomizer
Opciones superiores de StoreCustomizer para personalizar la página de producto en WooCommerce

Después encontramos opciones para añadir un prefijo o sufijo predeterminado al precio del producto. Marca la casilla Add a default Price Prefix (Añadir un prefijo de precio predeterminado) y coloca la palabra Only (Solo) en el campo de entrada.

Nuestra página inicial tiene tres pestañas o tablas de productos WooCommerce para la descripción, información adicional, y las valoraciones de producto concreto. Ahora eliminaremos la sección Reviews (Valoraciones) de la pestaña seleccionando el botón de radio  Remove Tab  (Eliminar pestaña). Podemos conseguirlo marcando Add Product Reviews after Tabs (Añadir valoraciones de producto tras las pestañas). El personalizador nos proporciona la opción de realizar más cambios al espaciado de la sección de las valoraciones o añadir divisores antes o después de la misma.

Sección de valoraciones de StoreCustomizerSección de valoraciones de StoreCustomizerSección de valoraciones de StoreCustomizer
Sección de valoraciones de StoreCustomizer

Nuestras páginas de producto muestran por defecto tablas de productos WooCommercee que muestran tres de ellos relacionados con el producto principal de la página. StoreCustomizer nos permite cambiar el número de productos mostrados, así como los artículos por fila. Yo he establecido el valor de Products Per Row (Productos por fila) a 4. 

Tablas de productos WooCommerce relacionados en el plugin StoreCustomizerTablas de productos WooCommerce relacionados en el plugin StoreCustomizerTablas de productos WooCommerce relacionados en el plugin StoreCustomizer
Tablas de productos WooCommerce relacionados en el plugin StoreCustomizer

Existen algunos ajustes más al final del plugin para cambiar el color y el tamaño de elementos como el título y el precio del producto. También puedes establecer un color para el botón Añadir al carrito.

Opciones de StoreCustomizer para el botón del carritoOpciones de StoreCustomizer para el botón del carritoOpciones de StoreCustomizer para el botón del carrito
Opciones de StoreCustomizer para el botón del carrito

Cómo usar WooCommerce para añadir más elementos a las páginas de productos

Ahora usaremos otro plugin gratis denominado Single Product Page Customizer para colocar contenido en distintos lugares de la página. Parte de este contenido será estático, y otras partes serán dinámicas, como por ejemplo, mostrar a los usuarios una lista de los productos más vendidos.

Una vez hayas instalado el plugin, dirígete a WooCommerce >  Single Product Page Customizer (Personalizador de página de producto individual). El plugin viene con un mapa guía para mostrarte distintos lugares en donde puedes colocar tu propio contenido. Haz clic sobre el botón Add New Position (Añadir nueva posición) para seleccionar una ubicación para tu contenido. Esto te mostrará un editor como el de la siguiente imagen. Puedes seleccionar algo desde el menú desplegable y a continuación pasar a la siguiente pestaña. Esto nos permitirá colocar nuestro propio HTML personalizado a la página.

Empecemos colocando un banner en la parte superior de cada página de producto. Selecciona WooCommerce before single product (WooCommerce antes del producto individual) en el menú desplegable y después introduce lo siguiente en el editor HTML.

Aquí tienes una captura de pantalla como referencia:

Editor de la página de producto individualEditor de la página de producto individualEditor de la página de producto individual
Editor de la página de producto individual

También mostraremos algunos de los mejores productos de nuestro sitio web en la página de producto justo después del sumario del producto, seleccionando la opción del menú desplegable de posición WooCommerce after single product summary (WooCommerce tras el sumario del producto individual).

Imagina que quieres mostrar alguna información general sobre la política de devolución y los envíos en una página de producto. Podemos conseguirlo seleccionando la opción del menú desplegable posición WooCommerce after add to cart button (WooCommerce después del botón añadir al carrito). Aquí tienes el HTML que coloco dentro del editor:   

Cómo usar en WooCommerce CSS para realizar cambios visuales

El CSS es esencial para la maquetación y para aplicar estilo a los elementos de un sitio web. Ahora que hemos colocado todo nuestro contenido HTML en la página de producto, es el momento de emplear algo de CSS para presentarlo todo como deseamos.

Esta parte sobre cómo usar WooCommerce puede resultar un poco confusa si nunca antes has usado CSS. Por esto, un simple copia pega podría no proporcionar los mismos cambios en tu caso si estás usando un tema distinto o una estructura HTML ligeramente diferente a la de mi versión. En este momento resultará útil estar un poco familiarizado con el CSS.

Volviendo a las tareas a mano, dirígete al escritorio de WordPress y navega a Apariencia > Personalizar > CSS adicional para colocar tu propio CSS personalizado. Aquí tienes el CSS que he utilizado yo:

Las reglas aplicadas en los primeros selectores son para nuestro Personalizador de página de producto individual. Otros son para realizar cambios a elementos existentes dentro de nuestro tema Storefront.

La página de producto debería tener un aspecto similar al de la siguiente imagen después de que hayas actualizado el CSS.

Personalizar página producto en WooCommercePersonalizar página producto en WooCommercePersonalizar página producto en WooCommerce
Personalizar página producto en WooCommerce

Las pestañas de la descripción e información adicional ya no están justo bajo el sumario del producto. Justo antes de estas, hemos añadido una fila con los productos más vendidos. 

Valoración de producto en WooCommerceValoración de producto en WooCommerceValoración de producto en WooCommerce
Valoración de producto en WooCommerce

Deberías intentar realizar por ti mismo o misma pequeños cambios a la apariencia visual de estas dos secciones como práctica. Por ejemplo, podrías personalizar la página producto WooCommerce haciendo más gruesos los encabezados y cambiando el color de los botones de Añadir al carrito.  

Reflexiones finales de este tutorial para WooCommerce

Como he mencionado al principio de este tutorial sobre cómo personalizar la página producto en WooCommerce, existen un montón de formas de conseguirlo en WordPress. La ruta ideal dependerá de tu presupuesto, tiempo disponible, y conocimientos sobre código. Normalmente, la forma más sencilla de lograrlo consiste en hacer uso de plugins o constructores de página que ofrezcan las características necesarias para crear páginas de productos personalizadas en poco tiempo.

Sin embargo, también puedes personalizar páginas de productos gratis usando una combinación de plugins gratuitos y un poco de CSS. De esta forma tendrás mucho más control sobre el contenido de la página si tienes conocimientos decentes sobre código, aunque los conceptos que hemos visto en este tutorial deberían ser suficientes para todas tus necesidades básicas. ¡Ahora ya sabes cómo usar WooCommerce para personalizar la página de producto!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.