Te mostraré cómo mejorar la presentación de las variaciones de tus productos con un sistema de muestras de color e imagen que sustituye el selector tradicional. Así, podrás ofrecer una experiencia de compra más visual, práctica y atractiva para tus clientes.
Aunque plugins como WooCommerce Variation Swatches and Photos ofrecen opciones muy completas, a veces se necesita una solución más sencilla y específica. Aquí te mostraré un fragmento de código para implementarla de forma sencilla, adaptada a las necesidades de tu tienda.
¿Por qué usar muestras de color?
Las muestras de color permiten a los clientes visualizar fácilmente las opciones disponibles sin tener que leer cada opción en un menú desplegable. Esto hace que la selección de variaciones sea más intuitiva y rápida, lo que puede aumentar la satisfacción del cliente y las conversiones en tu tienda.
Paso a Paso: Implementación del Sistema de Muestras de Color
A continuación, te guiaré a través de los pasos necesarios para añadir esta funcionalidad a tu sitio WooCommerce.
1. Crear el Plugin «Advanced Color Swatches»
Para comenzar, crearemos un plugin personalizado que gestionará las muestras de color. Sigue estos pasos:
- Abre tu editor de código y crea un nuevo archivo llamado
advanced-color-swatches.php. - Copia y pega el siguiente código en el archivo:
<?php
/*
Plugin Name: Advanced Color Swatches
Description: Plugin para gestionar colores dinámicamente y asociarlos con nombres, mostrando en el archivo de productos y en la ficha de producto.
Version: 1.9
Author: Alex Caravaca Ponce
*/
// Crear la página de configuración en el menú de administración
add_action('admin_menu', 'advanced_color_swatches_menu');
function advanced_color_swatches_menu() {
add_menu_page('Color Swatches', 'Color Swatches', 'manage_options', 'color-swatches', 'advanced_color_swatches_settings_page');
}
// Página de configuración para definir colores dinámicos
function advanced_color_swatches_settings_page() {
?>
<div class="wrap">
<h1>Configuración de Color Swatches</h1>
<form method="post" action="options.php">
<?php
settings_fields('advanced_color_swatches_settings');
do_settings_sections('advanced_color_swatches_settings');
$color_swatches = get_option('color_swatches', []);
?>
<table class="form-table" id="color-swatches-table">
<tr valign="top">
<th scope="col">Nombre del Color</th>
<th scope="col">Código Hexadecimal</th>
<th scope="col">Acciones</th>
</tr>
<?php if (!empty($color_swatches)) : ?>
<?php foreach ($color_swatches as $name => $hex) : ?>
<tr>
<td><input type="text" name="color_swatches_names[]" value="<?php echo esc_attr($name); ?>" /></td>
<td><input type="text" name="color_swatches_values[]" value="<?php echo esc_attr($hex); ?>" /></td>
<td><button type="button" class="button remove-row">Eliminar</button></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</table>
<button type="button" class="button add-row">Añadir Color</button>
<?php submit_button(); ?>
</form>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.add-row').addEventListener('click', function () {
const table = document.getElementById('color-swatches-table');
const newRow = document.createElement('tr');
newRow.innerHTML = `<td><input type="text" name="color_swatches_names[]" /></td><td><input type="text" name="color_swatches_values[]" /></td><td><button type="button" class="button remove-row">Eliminar</button></td>`;
table.appendChild(newRow);
});
document.getElementById('color-swatches-table').addEventListener('click', function (e) {
if (e.target && e.target.classList.contains('remove-row')) {
e.target.closest('tr').remove();
}
});
});
</script>
<?php
}
// Guardar los colores en la base de datos
add_action('admin_init', 'advanced_color_swatches_settings');
function advanced_color_swatches_settings() {
register_setting('advanced_color_swatches_settings', 'color_swatches', 'sanitize_color_swatches');
}
// Función para sanitizar y guardar los colores
function sanitize_color_swatches($input) {
$names = $_POST['color_swatches_names'];
$values = $_POST['color_swatches_values'];
$output = [];
if (is_array($names) && is_array($values)) {
for ($i = 0; $i < count($names); $i++) {
if (!empty($names[$i]) && !empty($values[$i])) {
$output[sanitize_text_field(strtolower($names[$i]))] = sanitize_hex_color($values[$i]);
}
}
}
return $output;
}
// Agregar estilos en línea para el diseño de los colores
add_action('wp_head', 'advanced_color_swatches_styles');
function advanced_color_swatches_styles() {
echo '<style>
.informativo-colores span {
box-shadow: 0px 0px 3px -1px #00000091;
}
.informativo-colores {
padding: 1em;
display: flex;
justify-content: center;
}
</style>';
}
// Mostrar colores en el archivo de productos
add_action('woocommerce_after_shop_loop_item_title', 'mostrar_colores_en_archivo_productos', 10);
function mostrar_colores_en_archivo_productos() {
global $product;
$color_swatches = get_option('color_swatches', []);
if ($product->is_type('variable')) {
$variaciones = $product->get_available_variations();
$colores_unicos = array();
foreach ($variaciones as $variacion) {
$color_name = strtolower(get_post_meta($variacion['variation_id'], 'attribute_colors', true));
$color_code = $color_swatches[$color_name] ?? null;
if ($color_code && !isset($colores_unicos[$color_name])) {
$colores_unicos[$color_name] = $color_code;
}
}
// Mostrar los colores encontrados
if (!empty($colores_unicos)) {
echo '<div class="informativo-colores" style="margin-top: 10px; display: flex; gap: 5px;">';
foreach ($colores_unicos as $color_name => $color_code) {
echo '<span style="display:inline-block; width:20px; height:20px; background-color:' . esc_attr($color_code) . '; border-radius:50%;" title="' . esc_attr(ucfirst($color_name)) . '"></span>';
}
echo '</div>';
} else {
echo '<div style="padding:10px; background-color:#ffdddd; margin-top:10px;">No se encontraron colores configurados que coincidan con las variaciones.</div>';
}
}
}
// Mostrar muestras de color en lugar del selector de variación en la ficha de producto
add_action('woocommerce_before_variations_form', 'mostrar_muestras_color_visuales_en_producto');
function mostrar_muestras_color_visuales_en_producto() {
global $product;
$color_swatches = get_option('color_swatches', []);
if ($product->is_type('variable')) {
$variaciones = $product->get_available_variations();
$colores_unicos = array();
// Nombre del atributo de color que utilizas (ejemplo: 'colors')
$color_attribute_name = 'colors';
foreach ($variaciones as $variacion) {
$attributes = $variacion['attributes'];
$variation_id = $variacion['variation_id'];
$attribute_key = 'attribute_' . $color_attribute_name;
if (isset($attributes[$attribute_key])) {
$color_value = strtolower($attributes[$attribute_key]);
$color_code = isset($color_swatches[$color_value]) ? $color_swatches[$color_value] : null;
if ($color_code && !isset($colores_unicos[$color_value])) {
$colores_unicos[$color_value] = array(
'hex' => $color_code,
'variation_id' => $variation_id,
'value' => $attributes[$attribute_key],
);
}
}
}
// Mostrar colores visuales como muestras de color
if (!empty($colores_unicos)) {
echo '<div class="color-swatches-container" style="margin-bottom: 10px; display: flex; gap: 10px;">';
foreach ($colores_unicos as $color_name => $data) {
echo '<div class="color-swatch" data-attribute_name="' . esc_attr($color_attribute_name) . '" data-value="' . esc_attr($data['value']) . '" style="width: 25px; height: 25px; background-color:' . esc_attr($data['hex']) . '; border-radius: 50%; cursor: pointer;" title="' . esc_attr(ucfirst($color_name)) . '"></div>';
}
echo '</div>';
// Ocultar el selector de variación del color
echo '<style>
.variations .attribute_' . esc_attr($color_attribute_name) . ' {
display: none !important;
}
.color-swatch.selected {
border: 2px solid #000;
}
</style>';
// Agregar JavaScript para manejar el clic en las muestras de color
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Cuando se hace clic en una muestra de color
$('.color-swatch').on('click', function(){
var attribute_name = $(this).data('attribute_name');
var value = $(this).data('value');
// Establecer el valor del elemento select correspondiente
$('select[name="attribute_'+attribute_name+'"]').val(value).trigger('change');
// Actualizar el estilo de la muestra seleccionada
$('.color-swatch').removeClass('selected');
$(this).addClass('selected');
});
});
</script>
<?php
} else {
// No se encontraron colores
echo '<div style="padding:10px; background-color:#ffdddd; margin-top:10px;">No se encontraron colores configurados que coincidan con las variaciones.</div>';
}
}
}
?>
- Guarda el archivo y súbelo a la carpeta
wp-content/plugins/de tu instalación de WordPress.
2. Activar el Plugin en WordPress
- Accede al panel de administración de WordPress.
- Ve a Plugins > Plugins instalados.
- Encuentra Advanced Color Swatches y haz clic en Activar.
3. Configurar los Colores en el Administrador
- En el panel de administración, ve a Color Swatches.
- Añade los nombres de los colores y sus códigos hexadecimales correspondientes.
- Por ejemplo, para el color rojo, escribe rojo y su código #FF0000.
- Guarda los cambios.
4. Asegurar la Coincidencia de Nombres de Atributos
Es importante que el nombre del atributo de color en tus productos coincida con el valor de $color_attribute_name en el código. Por defecto, es 'colors'. Si utilizas otro nombre, asegúrate de cambiarlo en el código:
// Nombre del atributo de color que utilizas (ejemplo: 'color', 'colores', etc.)
$color_attribute_name = 'tu_nombre_de_atributo';
Reemplaza 'tu_nombre_de_atributo' por el nombre exacto del atributo que usas en tus productos.
5. Disfruta de las Muestras de Color en Tu Tienda
Ahora, cuando visites la página de un producto variable que utiliza el atributo de color, verás las muestras de color en lugar del selector desplegable. Al hacer clic en una muestra, se seleccionará la variación correspondiente.
Conclusión
Implementar muestras de color en tu tienda WooCommerce puede mejorar significativamente la experiencia de compra de tus clientes, haciendo que la selección de variaciones sea más intuitiva y atractiva. Este método te permite gestionar de forma dinámica los colores y asociarlos con tus productos, mostrando las muestras tanto en el catálogo como en la página de producto.
Si sigues los pasos detallados en este artículo, podrás añadir esta funcionalidad a tu tienda de manera sencilla. No dudes en personalizar los estilos y adaptarlos a la estética de tu sitio.
¡Espero que este artículo te haya sido útil! Si tienes alguna pregunta o necesitas asistencia adicional, no dudes en contactarme.
