Si tienes una tienda en WooCommerce con Divi y necesitas mostrar información específica sobre el IVA en función de la categoría del producto, este artículo te explicará paso a paso cómo hacerlo con código personalizado y shortcodes.

✨ Introducción

Algunos productos pueden tener diferentes condiciones de IVA según su categoría, por ejemplo:

• Productos «Nuevos» incluyen el IVA.
• Productos de «Alquiler» incluyen el IVA.
• Productos de «Recambios» tienen el IVA aparte.
• Productos de «Ocasión» muestran el precio sin IVA pero indicando que se debe sumar.

Dado que Divi modifica la estructura de WooCommerce, algunas funciones estándar no funcionan correctamente. Por eso, vamos a utilizar shortcodes que se pueden insertar fácilmente en el constructor de Divi.

✅ Paso 1: Identificar las Categorías y sus IDs

Antes de escribir el código, necesitas conocer el ID de cada categoría en WooCommerce. Sigue estos pasos:

1. Ir a WooCommerce > Productos > Categorías.
2. Encuentra la categoría que deseas modificar (por ejemplo, «Recambios»).
3. Pasa el cursor sobre el nombre de la categoría y en la barra de estado del navegador verás una URL similar a esta:
4. https://tuweb.com/wp-admin/term.php?taxonomy=product_cat&tag_ID=85
5. El número después de tag_ID= es el ID de la categoría. En este caso, 85.

Ejemplo de IDs para este caso:

• Recambios (ID 85) – IVA Aparte.
• Nuevo (ID 80) – IVA Incluido.
• Alquiler (ID 81) – IVA Incluido.
• Ocasión (ID 79) – Precio + IVA.

✅ Paso 2: Agregar el Código en functions.php

Ahora que ya tenemos los IDs, debemos modificar el archivo functions.php dentro del tema hijo. Si aún no tienes un tema hijo, es recomendable crearlo para evitar perder cambios con actualizaciones del tema.

Copia y pega el siguiente código en functions.php de tu tema hijo.

1. Introducción

WooCommerce permite a los clientes ingresar códigos de descuento manualmente, pero en algunos casos es conveniente que el descuento se aplique automáticamente cuando ciertos productos estén en el carrito. Esto puede ser útil para promociones específicas o descuentos exclusivos en ciertos productos.

En este tutorial, aprenderás a:

• Aplicar un cupón automáticamente si un cliente agrega ciertos productos al carrito.
• Mostrar un mensaje cuando el cupón se aplique.
• Eliminar el cupón si los productos elegibles son eliminados del carrito.

// Función para productos en la categoría «Recambios» (ID 85) – IVA Aparte

function mostrar_texto_iva_recambios() {

    if (!is_product()) return »; // Solo en la página de producto 

    global $product;

    if (!$product) return »; 

    // Obtener las categorías del producto

    $categorias = wp_get_post_terms($product->get_id(), ‘product_cat’, array(‘fields’ => ‘ids’)); 

    // Verificar si el producto pertenece a la categoría «Recambios»

    if (in_array(85, $categorias)) {

        return ‘<p style=»color: blue; font-weight: bold; font-size: 16px;»>🔹 IVA Aparte</p>’;

    }

    return »;

}

add_shortcode(‘iva_aparte’, ‘mostrar_texto_iva_recambios’); 

// Función para productos en «Nuevo» (ID 80) y «Alquiler» (ID 81) – IVA Incluido

function mostrar_texto_iva_incluido() {

    if (!is_product()) return »; 

    global $product;

    if (!$product) return »;

    // Obtener las categorías del producto

    $categorias = wp_get_post_terms($product->get_id(), ‘product_cat’, array(‘fields’ => ‘ids’));

    // Verificar si pertenece a «Nuevo» o «Alquiler»

    if (in_array(80, $categorias) || in_array(81, $categorias)) {

        return ‘<p style=»color: green; font-weight: bold; font-size: 16px;»>✅ IVA Incluido</p>’;

    }

    return »;

}

add_shortcode(‘iva_incluido’, ‘mostrar_texto_iva_incluido’);

// Función para productos en «Ocasión» (ID 79) – Precio + IVA

function mostrar_texto_precio_mas_iva() {

    if (!is_product()) return »; 

    global $product;

    if (!$product) return »;

    // Obtener las categorías del producto

    $categorias = wp_get_post_terms($product->get_id(), ‘product_cat’, array(‘fields’ => ‘ids’));

    // Verificar si pertenece a «Ocasión»

    if (in_array(79, $categorias)) {

        return ‘<p style=»color: orange; font-weight: bold; font-size: 16px;»>⚠️ Precio + IVA</p>’;

    }

    return »;

}

add_shortcode(‘precio_mas_iva’, ‘mostrar_texto_precio_mas_iva’);

🏗 Paso 3: Usar los Shortcodes en Divi

Ahora que tenemos el código, necesitamos insertarlo en la página de producto. Como Divi sobrescribe algunas funciones de WooCommerce, la mejor forma de asegurarnos de que funcione correctamente es mediante shortcodes.

📌 ¿Cómo Insertar los Shortcodes en Divi?

En la ficha de producto de WooCommerce dentro del constructor Divi:

1. Abre el Constructor Visual en la plantilla del producto.
2. Añade un Módulo de código donde quieres que aparezca la información del IVA. (NOTA: lo puedes añadir en un módulo de texto, pero te recomiendo de que añadas en el módulo de código los Shortcodes que tengas, si lo haces en módulo de texto te dejará la separación entre ellos, en cambio en un módulo de código mantendrá el margen que le hayas dado y no verás una separación. Te animo a que lo pruebes en ambos)
3. Inserta el shortcode correspondiente en el campo de texto del módulo.

• Para productos en Recambios (ID 85) – IVA Aparte:
• [iva_aparte]
• Para productos Nuevos (ID 80) y Alquiler (ID 81) – IVA Incluido:
• [iva_incluido]
• Para productos Ocasión (ID 79) – Precio + IVA:
• [precio_mas_iva]

Puedes colocar cada shortcode en la posición que prefieras dentro de la ficha del producto. O también puedes añadir todos los Shortcode y cada categoría mostrará el suyo correspondiente que hayas añadido al script del archivo functions.php que hemos hablado anteriormente. 

📈 Conclusión

Este método nos permite personalizar la visualización del IVA en WooCommerce con Divi sin modificar los archivos principales del tema, asegurando compatibilidad con futuras actualizaciones.

Si necesitas personalizar aún más el diseño o agregar funcionalidades extra, puedes modificar los estilos CSS en el código o ajustar la posición de los shortcodes en Divi.

🚀 ¿Te ha funcionado este método? ¡Déjamelo saber en los comentarios y seguimos mejorándolo! 🎉

Crear una entrada es lo más sencillo en el manejo en WordPress aunque hoy día con la cantidad de plugins que nos ayudan y facilitan el trabajo y nos evitan quebraderos de cabeza a los desarrolladores.

Vamos a crear una entrada sencilla, sin columnas, sin complementos.

1. Accedemos a nuestro WordPress.

Usar el constructor Divi: Solo si quieres usar complementos fuera de lo que es añadir texto y algunas imágenes.

Añadir objeto: Si quieres añadir imágenes, videos, archivos… dentro de la entrada.

Caja de texto: Aquí añades el texto de tu noticia, como ves tienes unas simples herramientas WYSIWYG (puedes augmentarlas con plugins)

Categorías (parte derecha): Aquí se te muestran las categorías creadas, si no existen puedes crearla y esta noticia ya se quedará marcada para esa categoría nueva.

¿Para qué sirven las categorías? Para poder diferenciar los artículos que creas, por ejemplo, hablas en artículos de posicionamiento de internet, en otros hablas de diseño de tiendas online y en otros de diseño de páginas web, ahora tú quieres mostrar cada categoría en una pagina diferente, entonces creas una página y añades el portfolio y solo muestras la categoría que quieras para esa página, o por ejemplo una pagina para todas las categorías pero que sea filtrable como en https://eligeunaweb.es/trabajos/ verás que te pone “Landig Page”, “Páginas web”, “plantillas de email” y “Tiendas Online”, aquí todas las entradas están marcadas con su categorías, también puedes marcar mas de una categoría.

El resto como “Extractos” son contenido extras resumidos que pueden usarse en tu página, por ejemplo, debajo de un título, como si fuera un sub título.

Campos personalizados: No entraremos en detalles, no son necesarios para noticias simples.

Etiquetas: ¿As visto alguna página web que tenga como una especie de nube de palabras? ¿Como si fueran de acceso rápido?, por ejemplo, SEO, Posicionamiento SEO, posicionamiento en internet, Barcelona, diseño de tiendas online, eccommerce, seo local, etc… Esto lo que hace que si tienes el sidebar (Columna lateral) colocado puedes añadir la nube de etiquetas y crear un acceso rápido, por ejemplo, picas seo y se te abren las entradas que tengan esas etiquetas añadidas en la entrada. Esto es bueno para tu posicionamiento.

Imagen destacada: Aquí añadimos la imagen que queremos mostrar en nuestra noticia, las imágenes casi la mayoría de las veces ya nos identifica de que va el artículo, también es más estético, pero si es cierto de que al tener muchas noticias y cada uno con su imagen ralentiza un poco la página web.

Quedaría así:

Realizar el artículo con Divi

1. Lo primero es poner el título como anteriormente hemos comentado.
2. Picar en “Usar constructor Divi”
3. Se te abrirá la siguiente pantalla.

Elegir diseño: Divi tiene muchas plantillas pre diseñadas que nos puede ahorrar tiempo en el diseño.

Clonar página existente: Por ejemplo, tienes ya varios diseños creados como artículos, paginas, etc, desde aquí Divi te crea una copia exacta o te clona una pagina ya existente.

4. Nosotros picaremos en “Construir desde cero”.

5. Verás que ya hay creada una sección y ahora tenemos que crear los espacios, imagina un armario, este es la sección y los estantes son los espacios.

Por ejemplo, quiere dos columnas porque en una añades una imagen y en el otro texto, bueno puedes coger la que tiene dos columnas del mismo tamaño o bien con una columna mas grande que otra, con dos partes, tres partes…

6. Una vez ya seleccionado el diseño de las filas continuamos a añadir el contenido.

Si por ejemplo solo añades texto solo escoge la de una fila.

7. Ahora selecciona el modulo que desees añadir, por ejemplo, el de “Texto” puedes bajar está por orden alfabético o bien desde el buscador puedes encontrarlo escribiendo la palabra “texto”.

9. Se nos abrirá el módulo automáticamente para que lo editemos. Como ves el editor WYSIWYG es muy similar al que viene por defecto en WordPress, entraremos en mas profundidad en los módulos de Divi

Ahora supongamos que has añadido dos columnas y en la que te queda libre quieres añadir una imagen.

11. Ahora donde picaremos será en el circulo gris con un mas en el centro y se nos volverá a abrir la ventana de selección de módulos y seleccionamos el de imagen, fíjate que hay el de galería y el de imagen (simple), selecciona este último.

12. Ahora en “Imagen” selecciona la imagen que deseas mostrar junto al contenido de texto y sigue la misma recomendación de guardar o publicar.

Poco a poco iremos ampliando un poco más la configuración y creación de los módulos.

Espero que te sirva y te ayude.

Quieres valorar esta entrada? Nos sería de utilidad.