En el ámbito del comercio electrónico, la presentación precisa de información sobre las tallas de productos desempeña un papel fundamental para garantizar una experiencia de compra informada y satisfactoria. El código proporcionado se erige como una solución ingeniosa y completa para la implementación de una detallada «Guía de Tallas» en una tienda online basada en […]
En el ámbito del comercio electrónico, la presentación precisa de información sobre las tallas de productos desempeña un papel fundamental para garantizar una experiencia de compra informada y satisfactoria. El código proporcionado se erige como una solución ingeniosa y completa para la implementación de una detallada «Guía de Tallas» en una tienda online basada en WooCommerce.
El propósito central de estas funciones en PHP es enriquecer la plataforma de comercio electrónico, ofreciendo a los usuarios y administradores una herramienta eficiente y visualmente atractiva para la gestión y visualización de información sobre tallas de productos. Desde el frontend, donde los clientes pueden acceder a la guía de tallas de manera clara y estructurada, hasta el backend, donde los administradores pueden gestionar fácilmente estos datos, el código busca mejorar la usabilidad y la administración integral de información crucial.
Los posibles casos de uso abarcan una amplia gama de escenarios en el comercio electrónico. Desde tiendas de moda y ropa hasta mercados de productos variados, la necesidad de proporcionar información detallada sobre las dimensiones de los productos es universal. Este código se convierte en una valiosa herramienta para cualquier comercio que busque mejorar la transparencia y la toma de decisiones de sus clientes, permitiendo una elección más informada de tallas y, por ende, mejorando la satisfacción del cliente.
En resumen, estas funciones no solo son un conjunto de líneas de código; representan una estrategia inteligente para potenciar la experiencia de compra y la gestión de productos en una tienda WooCommerce. Desde tiendas de moda hasta plataformas de comercio electrónico diversificadas, este código proporciona una solución adaptable y robusta para la gestión eficaz de información sobre tallas, demostrando su versatilidad en distintos contextos comerciales.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
<?php
// Agrega la pestaña de Guía de Tallas
add_filter('woocommerce_product_tabs', 'agregar_pestana_guia_tallas');
function agregar_pestana_guia_tallas($tabs) {
$tabs['guia_tallas'] = array(
'title' => 'Guía de Tallas',
'priority' => 50,
'callback' => 'contenido_pestana_guia_tallas',
);
return $tabs;
}
// Contenido de la pestaña Guía de Tallas en el frontend
function contenido_pestana_guia_tallas() {
global $product;
// Obtén los valores de la guía de tallas guardados como metadatos del producto
$guia_tallas = array(
'pecho_s' => get_post_meta($product->get_id(), '_pecho_s', true),
'pecho_m' => get_post_meta($product->get_id(), '_pecho_m', true),
'pecho_l' => get_post_meta($product->get_id(), '_pecho_l', true),
'pecho_xl' => get_post_meta($product->get_id(), '_pecho_xl', true),
'brazo_s' => get_post_meta($product->get_id(), '_brazo_s', true),
'brazo_m' => get_post_meta($product->get_id(), '_brazo_m', true),
'brazo_l' => get_post_meta($product->get_id(), '_brazo_l', true),
'brazo_xl' => get_post_meta($product->get_id(), '_brazo_xl', true),
'cintura_s' => get_post_meta($product->get_id(), '_cintura_s', true),
'cintura_m' => get_post_meta($product->get_id(), '_cintura_m', true),
'cintura_l' => get_post_meta($product->get_id(), '_cintura_l', true),
'cintura_xl' => get_post_meta($product->get_id(), '_cintura_xl', true),
'caderas_s' => get_post_meta($product->get_id(), '_caderas_s', true),
'caderas_m' => get_post_meta($product->get_id(), '_caderas_m', true),
'caderas_l' => get_post_meta($product->get_id(), '_caderas_l', true),
'caderas_xl' => get_post_meta($product->get_id(), '_caderas_xl', true),
'largo_pierna_s' => get_post_meta($product->get_id(), '_largo_pierna_s', true),
'largo_pierna_m' => get_post_meta($product->get_id(), '_largo_pierna_m', true),
'largo_pierna_l' => get_post_meta($product->get_id(), '_largo_pierna_l', true),
'largo_pierna_xl' => get_post_meta($product->get_id(), '_largo_pierna_xl', true),
);
// Si no hay guía de tallas, muestra un mensaje
if (empty(array_filter($guia_tallas))) {
echo '<p>No hay información de guía de tallas disponible para este producto.</p>';
return;
}
// Muestra la tabla de guía de tallas en el frontend
echo '<table class="tabla-guia-tallas">
<thead>
<tr>
<th>Medidas</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pecho</td>
<td>' . esc_html($guia_tallas['pecho_s']) . '</td>
<td>' . esc_html($guia_tallas['pecho_m']) . '</td>
<td>' . esc_html($guia_tallas['pecho_l']) . '</td>
<td>' . esc_html($guia_tallas['pecho_xl']) . '</td>
</tr>
<tr>
<td>Brazo</td>
<td>' . esc_html($guia_tallas['brazo_s']) . '</td>
<td>' . esc_html($guia_tallas['brazo_m']) . '</td>
<td>' . esc_html($guia_tallas['brazo_l']) . '</td>
<td>' . esc_html($guia_tallas['brazo_xl']) . '</td>
</tr>
<tr>
<td>Cintura</td>
<td>' . esc_html($guia_tallas['cintura_s']) . '</td>
<td>' . esc_html($guia_tallas['cintura_m']) . '</td>
<td>' . esc_html($guia_tallas['cintura_l']) . '</td>
<td>' . esc_html($guia_tallas['cintura_xl']) . '</td>
</tr>
<tr>
<td>Caderas</td>
<td>' . esc_html($guia_tallas['caderas_s']) . '</td>
<td>' . esc_html($guia_tallas['caderas_m']) . '</td>
<td>' . esc_html($guia_tallas['caderas_l']) . '</td>
<td>' . esc_html($guia_tallas['caderas_xl']) . '</td>
</tr>
<tr>
<td>Largo de Pierna</td>
<td>' . esc_html($guia_tallas['largo_pierna_s']) . '</td>
<td>' . esc_html($guia_tallas['largo_pierna_m']) . '</td>
<td>' . esc_html($guia_tallas['largo_pierna_l']) . '</td>
<td>' . esc_html($guia_tallas['largo_pierna_xl']) . '</td>
</tr>
</tbody>
</table>';
}
// Añade la tabla de guía de tallas en la página de edición del producto
add_action('woocommerce_product_options_general_product_data', 'tabla_guia_tallas');
function tabla_guia_tallas() {
?>
<div id='guia_tallas'>
<h3>Guía de Tallas</h3>
<table class="form-field">
<tbody>
<tr>
<th></th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
</tr>
<tr>
<td>Pecho</td>
<?php echo generar_celda_guia_tallas('pecho_s'); ?>
<?php echo generar_celda_guia_tallas('pecho_m'); ?>
<?php echo generar_celda_guia_tallas('pecho_l'); ?>
<?php echo generar_celda_guia_tallas('pecho_xl'); ?>
</tr>
<tr>
<td>Brazo</td>
<?php echo generar_celda_guia_tallas('brazo_s'); ?>
<?php echo generar_celda_guia_tallas('brazo_m'); ?>
<?php echo generar_celda_guia_tallas('brazo_l'); ?>
<?php echo generar_celda_guia_tallas('brazo_xl'); ?>
</tr>
<tr>
<td>Cintura</td>
<?php echo generar_celda_guia_tallas('cintura_s'); ?>
<?php echo generar_celda_guia_tallas('cintura_m'); ?>
<?php echo generar_celda_guia_tallas('cintura_l'); ?>
<?php echo generar_celda_guia_tallas('cintura_xl'); ?>
</tr>
<tr>
<td>Caderas</td>
<?php echo generar_celda_guia_tallas('caderas_s'); ?>
<?php echo generar_celda_guia_tallas('caderas_m'); ?>
<?php echo generar_celda_guia_tallas('caderas_l'); ?>
<?php echo generar_celda_guia_tallas('caderas_xl'); ?>
</tr>
<tr>
<td>Largo de Pierna</td>
<?php echo generar_celda_guia_tallas('largo_pierna_s'); ?>
<?php echo generar_celda_guia_tallas('largo_pierna_m'); ?>
<?php echo generar_celda_guia_tallas('largo_pierna_l'); ?>
<?php echo generar_celda_guia_tallas('largo_pierna_xl'); ?>
</tr>
</tbody>
</table>
</div>
<?php
}
// Función para generar las celdas de la guía de tallas
function generar_celda_guia_tallas($nombre_campo) {
global $post;
$valor_celda = get_post_meta($post->ID, '_' . $nombre_campo, true);
return '<td><input type="text" name="' . $nombre_campo . '" value="' . esc_attr($valor_celda) . '" /></td>';
}
// Guarda los valores de la guía de tallas
add_action('woocommerce_process_product_meta', 'guardar_valores_guia_tallas');
function guardar_valores_guia_tallas($post_id) {
$campos_guia_tallas = array(
'pecho_s', 'pecho_m', 'pecho_l', 'pecho_xl',
'brazo_s', 'brazo_m', 'brazo_l', 'brazo_xl',
'cintura_s', 'cintura_m', 'cintura_l', 'cintura_xl',
'caderas_s', 'caderas_m', 'caderas_l', 'caderas_xl',
'largo_pierna_s', 'largo_pierna_m', 'largo_pierna_l', 'largo_pierna_xl',
);
foreach ($campos_guia_tallas as $campo) {
$valor_campo = isset($_POST[$campo]) ? sanitize_text_field($_POST[$campo]) : '';
update_post_meta($post_id, '_' . $campo, $valor_campo);
}
}
// Agregar estilos CSS personalizados
function agregar_estilos_personalizados() {
echo '<style>
/* Estilos para la tabla de guía de tallas en el front end */
.tabla-guia-tallas {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
overflow-x: auto; /* Permite desplazar horizontalmente en dispositivos pequeños */
}
.tabla-guia-tallas th,
.tabla-guia-tallas td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.tabla-guia-tallas th {
background-color: #f2f2f2;
}
@media screen and (max-width: 600px) {
/* Estilos adicionales para tamaños de pantalla pequeños (por ejemplo, teléfonos) */
.tabla-guia-tallas {
overflow-x: auto;
}
.tabla-guia-tallas th,
.tabla-guia-tallas td {
font-size: 12px;
}
}
/* Estilos para la tabla de guía de tallas en la página de edición del producto */
.form-field table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
}
.form-field th,
.form-field td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.form-field th {
background-color: #f2f2f2;
}
@media screen and (max-width: 600px) {
/* Estilos adicionales para tamaños de pantalla pequeños (por ejemplo, teléfonos) */
.form-field th,
.form-field td {
font-size: 12px;
}
}
</style>';
}
// Agregar los estilos personalizados al hook 'wp_head'
add_action('wp_head', 'agregar_estilos_personalizados');