Avisos
Vaciar todo

[Resuelto] Mostrar medidas de producto en woocommerce  

 
dDialoGa
 dDialoGa
Usuario activo

Hola!

Necesito que la ficha de los productos muestre las medidas y el peso del producto, ¿existe algún modulo especifico en divi?

 

Gracias!

Contenido solo visible a usuarios registrados

Respondido : 10/06/2024 1:48 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.

Para mostrar el peso y las dimensiones lo primero es añadirlo en cada producto:

.- Edita el producto donde quieres mostrar las medidas y el peso

.- Selecciona la pestaña Envío dentro de Datos del producto

.- Verás que tienes las celdas para añadir las dimensiones y el peso:

screenshot mary52.webempresa.eu 2024.06.10 15 23 24

Dependiendo de la plantilla que utilices, WooCommerce puede mostrar los datos o no mostrarlos, por defecto no los muestra pero por ejemplo con la plantilla Storefront, que es la plantilla que estás utilizando, los muestra en la pestaña " información adicional "

screenshot mary52.webempresa.eu 2024.06.10 15 27 02

Para mostrar estos datos, necesitarás agregar un poco de código personalizado a tu tema. Puedes hacer esto editando el archivo functions.php de tu tema o utilizando un plugin para añadir código como puede ser Code Snippets:

// Función para mostrar el peso y las dimensiones en formato de tabla en la página del producto
function mostrar_peso_y_dimensiones_en_tabla() {
global $product;

// Obtener peso y dimensiones
$peso = $product->get_weight();
$longitud = $product->get_length();
$ancho = $product->get_width();
$altura = $product->get_height();

// Iniciar la tabla
echo '<table class="woocommerce-product-attributes shop_attributes">';

// Mostrar el peso si está disponible
if ( $peso ) {
echo '<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--weight">
<th class="woocommerce-product-attributes-item__label">' . __( 'Peso', 'woocommerce' ) . '</th>
<td class="woocommerce-product-attributes-item__value">' . esc_html( $peso ) . ' ' . get_option( 'woocommerce_weight_unit' ) . '</td>
</tr>';
}

// Mostrar las dimensiones si están disponibles
if ( $longitud && $ancho && $altura ) {
echo '<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">' . __( 'Dimensiones', 'woocommerce' ) . '</th>
<td class="woocommerce-product-attributes-item__value">' . esc_html( $longitud ) . ' × ' . esc_html( $ancho ) . ' × ' . esc_html( $altura ) . ' ' . get_option( 'woocommerce_dimension_unit' ) . '</td>
</tr>';
}

// Cerrar la tabla
echo '</table>';
}
add_action( 'woocommerce_single_product_summary', 'mostrar_peso_y_dimensiones_en_tabla', 25 );


Una vez añadido el código le podemos dar un poco de Estilos:

.- Añade lo siguiente en Apariencia -> Personalizar -> CSS Adicional:

.woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
padding: 10px;
border: 1px solid #ddd;
}

.woocommerce-product-attributes th {
background-color: #f7f7f7;
text-align: left;
font-weight: bold;
}

.woocommerce-product-attributes td {
text-align: left;
}

 

Esto mostrará los datos en la ficha del producto:

screenshot mary52.webempresa.eu 2024.06.10 15 48 49

 

Un Saludo

 

Respondido : 10/06/2024 2:50 pm

dDialoGa
 dDialoGa
Usuario activo

Ya lo tengo, gracias!!

 

¿Podría incluir iconos en esta información adicional? ¿O en la descripción del producto?

Respondido : 11/06/2024 9:51 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.

Que iconos quieres Añadir ? explicanos un poco lo que buscas y vemos si podemos hacer algo.

 

Un Saludo

Respondido : 11/06/2024 10:08 am

dDialoGa
 dDialoGa
Usuario activo
image

Hola!

 

Querríamos incluir ese tipo de iconos que aparecen en divi en módulos tipo "anuncio" 

¿Con Font Awesome podríamos incluirlos en la descripción del producto? en la información adicional lo veo más complicado

Respondido : 11/06/2024 10:25 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.

Puedes utilizarlo lo que la plantilla Storefront no tiene los iconos de Font Awesome pero puedes utilizar un plugin:

-> https://wordpress.org/plugins/font-awesome/

 

La consulta es para el dominio tranviaser ? te lo comento porque no es lo mismo trabajar con Divi que con Storefront.

 

Un Saludo

Respondido : 11/06/2024 10:42 am

dDialoGa
 dDialoGa
Usuario activo

Hola!

 

La consulta es para insinuat pero todavia la tenemos en montaje porque es una web que vamos a trasladar desde prestashop y estamos volcando la bbdd con el plugin que nos recomendaste en su versión premium. Te puesto la captura de tranviaser porque tambien estamos trabajando en ella y tenemos puestos iconos que le han gustado al cliente.

En ambos casos trabajaremos con divi.

Respondido : 11/06/2024 11:04 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.

Ok, en Divi puedes cargar la librería de Font Awesome 

.- Accede a Divi -> Opciones del tema -> integración.

.- En la celda " Agregar Código en el head " añade lo siguiente:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

Esto cargará las librerías de FontAwesome

screenshot mary52.webempresa.eu 2024.06.11 13 28 59

 

Una vez lo tengas puedes utilizar HTML para mostrar los iconos.

.- Editas el producto donde quieres añadir el icono.

.- Selecciona la pestaña HTM

Supongamos que quieres añadir el icono User, solo tendrías que añadir el Script que lo carga:

<i class="fa-duotone fa-user">

Este sería un ejemplo:

screenshot mary52.webempresa.eu 2024.06.11 13 37 27

 

En este enlace tienes una lista de Iconos:

-> https://fontawesome.com/v6/icons

Seleccionando el icono que quieres cargar mostrará el script que tienes que utilizar, incluso puedes darle estilos pero bueno yo prefiero darles estilos con un poco de CSS que me da mayor libertad:

 

screenshot fontawesome.com 2024.06.11 13 42 37

 

Un saludo

Esta publicación ha sido modificada el hace 1 mes por Pepe
Respondido : 11/06/2024 12:43 pm

dDialoGa
 dDialoGa
Usuario activo

Gracias!! Funciona perfectamente

Respondido : 11/06/2024 1:35 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola, 

Enhorabuena funciona como necesitas, es un placer para nosotros siempre poder ayudarte.

Con esto podemos dar el tema como solucionado, no dudes en escribirnos si tienes cualquier otra consulta. 

Un Saludo 😊 

Respondido : 11/06/2024 1:40 pm