Mejorar la página de producto de WooCommerce con funciones de PHP mejora las conversiones y ventas. Además, es una forma de conseguir más ventas o clientes sin necesidad de invertir dinero en costosos plugins. Vamos a ver cómo convertir una triste página de producto en una página enriquecida.
Antes de de que vayas de lleno al post y las funciones es importante que leas esto:
1. Si tienes cuenta GRATIS en nuestra web, puedes descargar el CSS completo y las funciones completas en un ZIP, copiar y pegarlo todo.
2. Si vas a añadir esta funciones complejas a tu web debes tener acceso FTP, cPanel o Plesk, para poder modificar el código o por si se generan errores.
3. Implementa el código uno a uno, no todos de una vez salvo que sepas lo que estás haciendo.
4. Si necesitas ayuda, pídela en los comentarios.
5. Este post es de complejidad media, si no sabes lo que estás haciendo, no lo hagas.
6. Haz copia de seguridad antes de probar nada.
¡Vamos a ello!
Página de producto WooCommerce sin optimizar:
Página de producto optimizada con funciones PHP:
¿Qué es la página de productos de WooCommerce?
La página de producto de WooCommerce suele estar definida visualmente por la plantilla o theme que hemos comprado o adquirido para instalarla en nuestra web. Allí se muestra el precio, la descripción corta y larga, precios, opciones de productos variables, etc. Esta página de producto está creada en PHP y suele ser bastante complejo modificarla manualmente.
Si la plantilla no tiene una ficha visualmente atractiva tendremos que modificarla. Lo podemos hacer directamente en PHP, con plugins más o menos caros o con funciones de PHP.
¿Por qué mejorar la página de producto de WooCommerce?
Básicamente porque una página de producto optimizada puede mejorar las ventas de productos y servicios con facilidad, sin necesidad de invertir más dinero en campañas de ADS. Con la misma inversión den ADS podemos conseguir más ventas o más conversiones.
Para ello tenemos que «atacar» los miedos y emociones de nuestros clientes. ¿Cómo? Lo vamos a ver en los siguientes puntos, así podrás comprender por qué aplicar las siguientes modificaciones.
¡Quedan pocas unidades!
El sentimiento de pérdida es muy fuerte. Si un producto tiene un stock visible de 50 unidades, este sentimiento se pierde. Por ello, a través de una función en PHP vamos a ocultar de la ficha de producto la cantidad de stock disponible. Y lo reemplazaremos por nos mensajes rotativos que dirán: 🔥 Pocas Unidades | 🔥 Últimas unidades | 🔥 Muy demandado
De la mano con este sentimiento, podemos añadir un mensaje que alerte que hay varios usuarios interesados en un determinado producto. Para ello vamos a utilizar una función que generará un número aleatorio de personas interesadas en un producto. Algo como esto: ¡29 personas están interesadas en este producto!
Ambos mensajes están orientados a generar un sentimiento de pérdida: «si no loc compro ahora que quedan pocos, ya no podré comprarlos después porque hay mucha gente interesada»
Ficha con testimonios en parte visible:
Otra forma de generar confianza en el momento de la compra es a través de testimonios u opiniones. Para ello, si no tenemos opiniones en un producto, podemos añadir opiniones genéricas de la tienda, de experiencias de compra positiva de otros clientes. No se trata de mentir y mostrar opiniones falsas. Se trata de coger opiniones de nuestra web y de nuestros productos y mostrarlos de forma aleatoria en las fichas de productos.
A través de esta técnica despertamos confianza: «si otros han comprado aquí con éxito, yo también puedo hacerlo.»
Para ello, utilizaremos una función en PHP que muestra testimonios aleatorios inmediatamente después de la descripción corta del producto. En la función que utilizamos, deberías cambiar los testimonios por los de tu tienda. Actualmente hemos añadido 10 que rotan cada vez que se entra en un producto.
CUPONES, ¿quién no los adora?
Si añades copones de descuento en toda tu tienda, ayudarás al cliente a decidirse por tus productos. En nuestra función de PHP hemos creado, automáticamente tres cupones que se muestran en todas las fichas de productos y que ofrecen un descuento al comprar por primera vez, un cupón del 5% de descuento en el carrito, y un cupón del 10% para compras de 200€ o más. Los cupones se muestran en la ficha de producto y ayudan al cliente para que se sienta motivado a comprar más de un determinado producto.
Crear cupones de forma dinámica aumenta las posibilidades de ventas y, con las funciones PHP adecuadas, estos cupones se muestran en toda la tienda, en todos los productos, de forma automática, sin plugins como Smart Coupons for WooCommerce que cuestan $129 al año, y sin necesidad de invertir horas y horas de trabajo en configuraciones.
Los clientes de una tienda pasan a la acción gracias a estímulos que reciben a través de una ficha de producto bien trabajada.
Vamos a implementar las mejoras la página de productos de WooCommerce:
A continuación vamos a aplicar las funciones una a una, por separado, para que elijas las que más se ajusten a tu modelo de negocio o el de tu cliente. La idea es que vayas viendo todo el proceso de implementación. En el vídeo del final lo haremos todo junto. ¡Vamos a ello!
Ocultar stock en productos de WooCommerce:
Si no puedes ocultarlo con un simple CSS como este:
.in-stock {display:none;visibility:hidden;}
Puedes hacerlo con una función PHP
/*
* Woofreelance.academy - Deshabilita cantidad de stock.
*/
function woofreelance_woocommerce_001( $html, $product ) {
return '';
}
add_filter( 'woocommerce_get_stock_html', 'woofreelance_woocommerce_001', 10, 2 );
En ambos casos, se deja de mostrar la cantidad disponible. La idea es que no se sepa si quedan 100 o 3.
Mostrar mensajes de poco stock:
Ahora vamos a añadir 3 mensajes que rotan cada vez que se carga un producto. La idea es generar urgencia de compra:
/*
* Woofreelance.academy - Muestra mensaje de pocas unidades.
*/
function woofreelance_woocommerce_002() {
if (is_product()) {
$messages = array(
'🔥 Pocas Unidades',
'🔥 Últimas unidades',
'🔥 Muy demandado'
);
$random_message = $messages[array_rand($messages)];
echo '<div class="woounidades"><span class="woounidades-text">' . esc_html($random_message) . '</span></div>';
}
}
add_action('woocommerce_single_product_summary', 'woofreelance_woocommerce_002', 4);
Al PHP anterior, le corresponde el siguiente CSS:
/* Estilo para .woounidades */
.woounidades {
clear: both;
margin-bottom: 10px; /* Espacio debajo del div */
}
.woounidades-text {
color: white;
background-color: #023047;
border-radius: 4px;
padding: 0px 4px; /* Espacio dentro del span */
display: inline-block; /* Asegura que el span se ajuste al tamaño del texto */
font-size: 13px; /* Tamaño de fuente */
line-height: 21px; /* Tamaño línea de fuente */
text-transform: uppercase; /* Texto mayúsculas*/
}
Mostrar usuarios interesados en el producto:
Con esta función vamos a mostrar un mensaje de usuarios que están interesados en este producto. Es una función que rota usuarios entre valores 10 y 30, puedes modificarlo en la función.
/*
* Woofreelance.academy - Muestra personas viendo productos.
*/
function woofreelance_woocommerce_003() {
if (is_product()) {
$random_number = rand(10, 30);
echo '<div style="clear: both;"></div>'; /* Clear para forzar el espacio */
echo '<div class="woousuarios">¡' . esc_html($random_number) . ' personas están interesadas en este producto!</div>';
}
}
add_action('woocommerce_after_add_to_cart_button', 'woofreelance_woocommerce_003');
Al PHP anterior le corresponde el siguiente CSS:
/* Estilo para .woousuarios */
.woousuarios {
background-color: #f0faff; /* Azul mucho más claro */
color: #023047; /* Texto azul oscuro */
text-align: left; /* Texto alineado a la izquierda */
width: auto; /* Ancho auto del div */
display: block; /* Comportamiento de bloque */
clear: both; /* Evitar problemas de alineación con elementos flotantes */
font-size: 13px; /* Tamaño de fuente */
line-height: 21px; /* Altura de línea */
padding: 4px 8px; /* Espacio interno */
margin-top: 20px; /* Espacio superior de 20px */
border-radius: 4px; /* Bordes redondeados */
}
Mostrar opiniones y reviews random:
Con esta función mostraremos una opinión aleatoria cuando se cargue el producto. Recuerda cambiar las opiniones y nombres por personas que hayan comprado en tu tienda o web y hayan dejado una valoración genérica que sirva para todo tipo de productos o servicios.
/*
* Woofreelance.academy - Muetsra reviews que rotan.
*/
function woofreelance_display_random_review() {
// Lista de nombres de clientes y opiniones ajustadas para género
$reviews = array(
array('name' => 'Juan Pérez', 'text' => '¡Este producto superó todas mis expectativas!', 'gender' => 'male'),
array('name' => 'María Gómez', 'text' => '¡Este producto superó todas mis expectativas!', 'gender' => 'female'),
array('name' => 'Carlos Rodríguez', 'text' => 'Excelente calidad, totalmente recomendado.', 'gender' => 'male'),
array('name' => 'Laura Sánchez', 'text' => 'Excelente calidad, totalmente recomendada.', 'gender' => 'female'),
array('name' => 'Ana Martínez', 'text' => 'Muy satisfecha con mi compra, volveré a comprar.', 'gender' => 'female'),
array('name' => 'José López', 'text' => 'Muy satisfecho con mi compra, volveré a comprar.', 'gender' => 'male'),
array('name' => 'Elena Fernández', 'text' => 'El servicio fue rápido y el producto es de alta calidad.', 'gender' => 'female'),
array('name' => 'Luis García', 'text' => 'El servicio fue rápido y el producto es de alta calidad.', 'gender' => 'male'),
array('name' => 'Isabel Torres', 'text' => 'Una gran inversión, vale cada centavo.', 'gender' => 'female'),
array('name' => 'Francisco Ruiz', 'text' => 'Una gran inversión, vale cada centavo.', 'gender' => 'male'),
);
// Seleccionar una opinión al azar
$random_review = $reviews[array_rand($reviews)];
// Mostrar la opinión en un div después de la descripción corta del producto
echo '<div class="woofreelance-review">';
echo '<strong>' . esc_html($random_review['name']) . '</strong> <span class="review-stars">★★★★★</span> ';
echo '<span class="wooopinion">' . esc_html($random_review['text']) . '</span>';
echo '</div>';
}
add_action('woocommerce_single_product_summary', 'woofreelance_display_random_review', 21);
Al PHP anterior le corresponde el siguiente CSS:
.woofreelance-review {
margin-top: 0px;
margin-bottom: 20px;
font-size: 16px; /* Tamaño de la fuente para el nombre y las estrellas */
color: #333; /* Color del texto */
}
.review-stars {
color: #FFD700; /* Color dorado para las estrellas */
font-size: 20px !important; /* Tamaño de las estrellas igual al nombre */
margin-left: 5px; /* Espacio entre el nombre y las estrellas */
}
.woofreelance-review strong {
font-weight: bold;
display: inline; /* Alinea el nombre en línea con las estrellas */
}
.woofreelance-review span {
display: inline-block;
font-size: 14px;
margin-top: 5px; /* Espacio entre el nombre y la opinión */
}
.wooopinion { display: block; clear: both;width:100%;}
Crea y muestra cupones:
Y ahora creamos automáticamente 3 cupones para toda la tienda y que se mostrarán en todos los productos. Cambia los valores antes de aplicar la función.
/*
* Woofreelance.academy - Crea y muestra cupones.
*/
function woofreelance_create_and_display_coupons() {
// Definición de los cupones
$coupons = array(
'5EUROS' => array(
'discount_type' => 'fixed_cart', // Descuento fijo en el carrito
'amount' => '5',
'individual_use' => 'yes', // No se puede usar con otros cupones
'minimum_amount' => '50', // Compra mínima de 50€
'usage_limit_per_user' => '1', // Uso único por usuario
),
'5XCIENTO' => array(
'discount_type' => 'percent', // Descuento en porcentaje
'amount' => '5',
'individual_use' => 'yes', // No se puede usar con otros cupones
'minimum_amount' => '', // Sin compra mínima
),
'MESOFERTAS' => array(
'discount_type' => 'percent', // Descuento en porcentaje
'amount' => '10',
'individual_use' => 'yes', // No se puede usar con otros cupones
'minimum_amount' => '200', // Compra mínima de 200€
),
);
foreach ($coupons as $code => $coupon_data) {
// Verificar si el cupón ya existe
if (!wc_get_coupon_id_by_code($code)) {
// Crear el cupón
$coupon_id = wp_insert_post(array(
'post_title' => $code,
'post_content' => '',
'post_excerpt' => 'Descuento aplicado con el cupón ' . $code,
'post_status' => 'publish',
'post_author' => 1,
'post_type' => 'shop_coupon'
));
// Actualizar los metadatos del cupón
update_post_meta($coupon_id, 'discount_type', $coupon_data['discount_type']);
update_post_meta($coupon_id, 'coupon_amount', $coupon_data['amount']);
update_post_meta($coupon_id, 'individual_use', $coupon_data['individual_use']);
update_post_meta($coupon_id, 'minimum_amount', $coupon_data['minimum_amount']);
update_post_meta($coupon_id, 'usage_limit_per_user', $coupon_data['usage_limit_per_user']);
update_post_meta($coupon_id, 'usage_limit', '');
update_post_meta($coupon_id, 'expiry_date', '');
update_post_meta($coupon_id, 'free_shipping', 'no');
update_post_meta($coupon_id, 'exclude_sale_items', 'no');
}
}
// Mostrar los cupones en la página de producto
if (is_product()) {
echo '<div class="woofreelance-coupons-container">';
echo '<div class="woofreelance-coupon"><span class="coupon-instruction">UTILIZA EL CUPÓN EN EL CARRITO</span><h3>5EUROS</h3><p>5€ de descuento en compras superiores a 50€.</p></div>';
echo '<div class="woofreelance-coupon"><span class="coupon-instruction">UTILIZA EL CUPÓN EN EL CARRITO</span><h3>5XCIENTO</h3><p>5% de descuento en el total del carrito.</p></div>';
echo '<div class="woofreelance-coupon"><span class="coupon-instruction">UTILIZA EL CUPÓN EN EL CARRITO</span><h3>MESOFERTAS</h3><p>10% de descuento en compras superiores a 200€.</p></div>';
echo '</div>';
}
}
add_action('woocommerce_after_add_to_cart_button', 'woofreelance_create_and_display_coupons', 10);
A este código PHP le corresponde el siguiente CSS:
.woofreelance-coupons-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
}
.woofreelance-coupon {
padding: 10px;
flex: 1; /* Asegura que cada columna ocupe el mismo ancho */
text-align: center;
border-radius: 4px; /* Bordes redondeados de 4px en cada columna */
margin-right: 5px; /* Espacio a la derecha para cada columna excepto la última */
}
.woofreelance-coupons-container .woofreelance-coupon:last-child {
margin-right: 0; /* Sin espacio a la derecha en la última columna */
}
.woofreelance-coupons-container .woofreelance-coupon:nth-child(1) {
background-color: #FFC55A; /* Color de fondo columna izquierda */
color: #023047; /* Color de texto columna izquierda */
}
.woofreelance-coupons-container .woofreelance-coupon:nth-child(2) {
background-color: #FC4100; /* Color de fondo columna central */
color: #FFFFFF; /* Color de texto columna central */
}
.woofreelance-coupons-container .woofreelance-coupon:nth-child(3) {
background-color: #00215E; /* Color de fondo columna derecha */
color: #FFFFFF; /* Color de texto columna derecha */
}
.woofreelance-coupon h3 {
font-size: 16px; /* Tamaño de fuente más pequeño */
margin-bottom: 10px;
background-color: #FFFFFF; /* Fondo blanco para el h3 */
color: #023047; /* Color de texto #023047 para los títulos */
padding: 3px 5px; /* Menos padding en los backgrounds de los h3 */
border-radius: 4px; /* Bordes redondeados de 4px en el h3 */
}
.coupon-instruction {
display: block;
font-size: 10px; /* Texto muy pequeño */
line-height: 14px; /* Linea de alto */
color: #fff; /* Color del texto */
margin-bottom: 5px; /* Espacio debajo del texto */
}
Vídeo tutorial para mejorar la página de producto de WooCommerce:
Si quieres mejorar la página de producto de WooCommerce, tienes aquí el vídeo que debes seguir paso a paso.
Y recuerda que tenemos varios tutoriales de WooCommerce preparados en nuestra web.
