Cómo personalizar las páginas de producto en WooCommerce (3 métodos)

Si tienes una tienda online con WooCommerce, puede que te hayas dado cuenta de que las páginas de producto predeterminadas no siempre se ajustan a tus necesidades específicas o a tu marca. Afortunadamente, WooCommerce facilita la personalización de tus páginas de producto para crear una experiencia de compra más única y personalizada para tus clientes.

En este artículo, te daré una visión general de las páginas de producto de WooCommerce y de cómo puedes personalizarlas utilizando tres métodos diferentes, es decir, extensiones, CSS y código personalizado.

Qué son las páginas de producto de WooCommerce

– Un ejemplo de página de producto de WooCommerce.

Una página de producto en WooCommerce es una página en la que se muestra un único producto. Esta página incluye todos los detalles del producto, como su nombre, descripción, precio, imágenes y variaciones (si las hay).

Estos son algunos componentes clave de una página de producto de WooCommerce:

1. Nombre del producto: El nombre del producto suele aparecer en un lugar destacado de la parte superior.
2. Descripción del producto: Una descripción detallada del producto, incluyendo sus características y ventajas.
3. Imágenes del producto: Las imágenes de alta calidad del producto desde distintos ángulos son esenciales para ayudar a los clientes a visualizar el producto.
4. Precio del producto: El precio del producto y los descuentos o promociones se muestran en la página. Echa un vistazo a algún cupón de hosting de Cloudways.
5. Botón Añadir a la cesta: El botón de añadir a la cesta permite a los clientes añadir el producto a su cesta de la compra.
6. Variaciones del producto: Si el producto está disponible en diferentes tamaños, colores u otras variaciones, estas opciones suelen aparecer en la página del producto.
7. Opiniones sobre el producto: Las opiniones y valoraciones de los clientes pueden mostrarse en la página del producto para ayudar a otros clientes a tomar decisiones de compra informadas.
8. Productos relacionados: Se pueden mostrar productos adicionales relacionados con el producto que se está viendo en la página del producto para animar a los clientes

Ventajas de las páginas de producto personalizadas

He aquí algunas razones por las que podrías considerar personalizar las páginas de producto de tu WooCommerce:

• Para diferenciar tu tienda de la competencia, que puede estar utilizando el mismo diseño de página de producto predeterminado de WooCommerce.
• Atraer y retener a los clientes que buscan una experiencia de compra única.
• Reforzar tu identidad de marca incorporando colores, fuentes y elementos de diseño de marca en las páginas de tus productos.
• Mejora la experiencia del usuario facilitando que los clientes encuentren la información que necesitan y tomen decisiones de compra informadas. Por ejemplo, puedes añadir imágenes de productos, incluir opiniones de clientes o mostrar productos relacionados.
• Para aumentar tus ventas e ingresos.

Cómo personalizar las páginas de producto de WooCommerce

Los siguientes son los tres métodos que te ayudarán a personalizar las páginas de producto de WooCommerce.

1. Extensiones
2. CSS
3. Código personalizado

Método 1: Personalizar las páginas de producto de WooCommerce mediante extensiones

WooCommerce es una potente plataforma de comercio electrónico que te permite crear una tienda online fácilmente. Ofrece una amplia gama de extensiones que te permiten añadir nuevas características y funcionalidades a tu tienda, incluida la personalización de las páginas de producto.

Algunas extensiones populares de WooCommerce pueden ayudarte a personalizar las páginas de producto:

Método 2: Personalizar las páginas de producto de WooCommerce mediante CSS

Personalizar los productos de WooCommerce utilizando CSS puede ser una forma estupenda de hacer que tu tienda online destaque y de crear un aspecto único para tus clientes. Si tienes conocimientos de CSS, puedes simplemente escribir el código para realizar cambios en las páginas de tus productos.

Después de iniciar sesión en el Panel de Control de WooCommerce, ve a Apariencia → Personalizar.

• A continuación, ve a CSS adicional para añadir CSS personalizado.

Código CSS para el CTA negro

Si quieres cambiar el color del CTA de predeterminado a negro, añade el siguiente código en CSS adicional.

button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #1d1a1a;
border-color: #333333;
color: #ffffff;
}

Así es como se verá el CTA.

Código CSS para el CTA azul

Del mismo modo, si quieres cambiar el color del CTA de negro a azul, añade el siguiente código en CSS adicional.

button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #4f5dd5;
border-color: #333333;
color: #ffffff;
}

Así es como se verá el CTA.

Así es como puedes jugar con los elementos de diseño de las páginas de producto en WooCommerce.

Método 3: Personalizar las páginas de producto de WooCommerce mediante código personalizado

Si tienes buenos conocimientos técnicos, puedes personalizar las páginas de producto de WooCommerce mediante código personalizado.

Paso 1: Crear una plantilla global

El primer paso es crear una plantilla global, que será la misma para todas las páginas de producto.

• Escribe un comentario PHP de apertura en la parte superior del archivo que indique el nombre de la plantilla.
• Crea un archivo de plantilla en la carpeta del tema activado llamado template-custom-product.php

<?php /*Template Name: Customize Product*/ ?>

La plantilla se basa en la página de producto predeterminada de WooCommerce. Tendrá el siguiente código.

<?php
$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<?php the_title(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>
<?php _e( 'No Products'); ?>
</p>
<?php endif; ?>

Como puedes ver, es una plantilla muy básica. Aunque cumple con su cometido, podrías ampliar aún más la funcionalidad de esta página mediante varias funciones integradas de WooCommerce.

La siguiente lista es una selección limitada de funciones de WooCommerce que incluyen una amplia gama de información en tus páginas personalizadas de visualización de productos, que pueden ser especialmente útiles a la hora de optimizar el flujo para el pago directo de WooCommerce:

• the_permalink() – Muestra la URL del producto.
• el_contenido() – Muestra la descripción completa del producto.
• the_excerpt() – Muestra una breve descripción del producto.
• the_ID() – Muestra el ID del producto.
• the_title() – Muestra el nombre del producto.
• the_post_thumbnail() – Muestra la imagen del producto.

Paso 2: Añadir funcionalidades en el functions.php del tema activado

2.1. Mostrar categoría de producto WooCommerce

Las categorías son una forma esencial de categorizar varios productos en la tienda. Si deseas mostrar la categoría del producto en la página, coloca este fragmento en el archivo functions.php del tema activado.

<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2. Mostrar miniatura de categoría de producto

Cada categoría de producto tiene su propia miniatura. Si necesitas incluirla en tu visualización personalizada de productos, coloca este fragmento en el archivo functions.php o template.php del tema activado.

<?php
function cwresponse_get_thumbnail(){
if(is_page(205)){
$args = array(
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug'
)
)
);
$random_products = get_posts( $args );
foreach ( $random_products as $post ) : setup_postdata( $post );
?>
<div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
<?php
endforeach;
wp_reset_postdata();
}
}
add_action('wp_footer', 'cwresponse_get_thumbnail');

2.3. Eliminar Descripción Encabezamiento

Si quieres eliminar el encabezado de descripción de las pestañas de productos individuales de Woocommerce, añade el siguiente código en el archivo functions.php del tema activado.

add_filter( 'woocommerce_product_description_heading', '__return_null' );

2.4. Eliminar el título del producto

Si quieres eliminar el título del producto de las pestañas de producto único de Woocommerce, añade el siguiente código en el functions.php del tema activado.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' );

Paso 3: Personalizar la plantilla Woocommerce en el plugin WooCommerce

Ve al directorio woocommerce\templates e inserta el siguiente código en la carpeta content-single-product.php o producto único. Sin embargo, se recomienda utilizar el archivo functions.php.

<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => get_the_title( get_post_thumbnail_id() )
) );

$attachment_count = count( $product->get_gallery_attachment_ids() );

if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

} else {

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

}
?>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>

Si no quieres hacer la codificación, escribe simplemente el código CSS.

.images { float: right !important; }

Y ya está.

Consideraciones clave para las páginas de productos

Personalizar las páginas de producto es crucial para mejorar la experiencia del usuario e impulsar las ventas en los sitios web de comercio electrónico. Aquí tienes algunas consideraciones clave que debes tener en cuenta al personalizar las páginas de producto:

1. La experiencia del usuario: La consideración más importante a la hora de personalizar las páginas de producto es la experiencia del usuario. Las páginas deben ser fáciles de navegar y proporcionar toda la información necesaria sobre el producto. Asegúrate de que las páginas sean visualmente atractivas, se carguen rápidamente y tengan una llamada a la acción clara.
2. Información sobre el producto: La información sobre el producto es un elemento clave de la página de producto. Debe ser detallada y precisa e incluir imágenes, vídeos y reseñas para ayudar a los clientes a tomar una decisión de compra informada.
3. Optimización móvil: Cada vez más clientes compran en Internet utilizando dispositivos móviles. Es esencial que te asegures de que tus páginas de producto están optimizadas para dispositivos móviles, con una navegación sencilla, imágenes grandes y llamadas a la acción claras.
4. Optimización SEO: Optimizar las páginas de producto para los motores de búsqueda es importante para garantizar que tus productos sean visibles para los clientes potenciales. Asegúrate de que tus páginas de producto tienen títulos, meta descripciones y palabras clave relevantes y descriptivos.
5. Personalización: Personalizar las páginas de productos puede ayudar a aumentar el compromiso y las ventas. Utiliza los datos del cliente para mostrar recomendaciones de productos personalizadas, productos relacionados y promociones basadas en su historial de navegación y compras.
6. Prueba social: Incluir reseñas de clientes, valoraciones y testimonios puede ayudar a generar confianza en los clientes potenciales y aumentar las conversiones.
7. Información clara sobre precios y gastos de envío: Los clientes necesitan conocer el precio del producto y los gastos de envío antes de tomar una decisión de compra. Asegúrate de que esta información aparece claramente en la página del producto.
8. Venta adicional y venta cruzada: Personalizar las páginas de producto con opciones de venta adicional y venta cruzada puede ayudar a aumentar el valor medio del pedido. Muestra productos relacionados o complementarios que los clientes puedan estar interesados en comprar.

Resumen

Personalizar tus páginas de producto en WooCommerce puede ayudarte a crear una experiencia de compra única para tus clientes y a mejorar tus ventas. Con las funciones integradas y la flexibilidad de WooCommerce, puedes modificar fácilmente el diseño, añadir nuevos elementos y ajustar el código CSS y HTML para que tus páginas de producto destaquen.

add_action('woocommerce_after_single_product_summary', 'custom_function', 10); function custom_function() 

{ echo '<p>Custom content here</p>'; }

Owais Khan

Owais trabaja como Director de Marketing en Cloudways, donde se centra en el crecimiento, la generación de demanda y las asociaciones estratégicas. Con más de una década de experiencia en marketing digital y B2B, Owais prefiere construir sistemas que ayuden a los equipos a alcanzar todo su potencial.

Get Connected on: Twitter Community Forum