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.
- 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.
- 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.
- 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.
También existen unas tablas de productos de WooCommerce al final de la página que muestran algunos productos relacionados a los usuarios.
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.
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.
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.
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.
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.
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.
1 |
<section class="offers"> |
2 |
<p>Get free shipping on purchases over $50.</p> |
3 |
</section>
|
Aquí tienes una captura de pantalla como referencia:
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).
1 |
<h3>Our Bestsellers</h3><p>[products limit="4" columns="4" best_selling="true" ]</p> |
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:
1 |
<ol class="wsppc-terms-list"><li>Delivery in 4 days.</li><li>10 day return policy.</li></ol> |
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:
1 |
p.price small { |
2 |
color: red; |
3 |
font-weight: bold; |
4 |
}
|
5 |
.wsppc-terms-list { |
6 |
margin: 2rem 1rem; |
7 |
color: black; |
8 |
font-size: 1.25rem; |
9 |
}
|
10 |
section.offers { |
11 |
margin-top: -2rem; |
12 |
}
|
13 |
section.offers p { |
14 |
text-align: center; |
15 |
font-size: 2rem; |
16 |
color: black; |
17 |
background: yellow; |
18 |
padding: 1rem 0; |
19 |
}
|
20 |
.woocommerce-breadcrumb { |
21 |
font-size: 1.5rem; |
22 |
}
|
23 |
div.storefront-breadcrumb .woocommerce-breadcrumb a { |
24 |
text-decoration: none; |
25 |
color: black; |
26 |
}
|
27 |
.single-product div.product .woocommerce-product-gallery { |
28 |
width: auto; |
29 |
margin-right: 0; |
30 |
}
|
31 |
div.woocommerce-product-gallery figure { |
32 |
box-shadow: 0 0 10px #888; |
33 |
margin: 1rem; |
34 |
}
|
35 |
.single-product div.product p.price { |
36 |
margin-top: -1rem; |
37 |
}
|
38 |
div.woocommerce-product-details__short-description { |
39 |
font-size: 1.4rem; |
40 |
color: black; |
41 |
}
|
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.
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.
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!
