✅Tablas de Precios en WordPress (Sin Plugins)

Este código se enfoca en hacer que las tablas de precios en un sitio WordPress sean más atractivas y personalizables. Ofrece varias características, como la carga de la popular biblioteca de iconos Font Awesome, la creación de tablas de precios con opciones únicas y estilos visuales personalizados para mejorar la apariencia de estas tablas.

Funcionalidades Principales:

1. Carga de Font Awesome si es Necesario:
   • Asegura que los iconos elegantes de Font Awesome estén disponibles para ser utilizados en las tablas de precios.
   • Útil si el tema de WordPress no ha cargado previamente esta biblioteca.
2. Shortcodes para Tablas de Precios:
   • Permite crear fácilmente secciones de tablas de precios en las páginas utilizando códigos cortos (shortcodes).
   • Proporciona opciones de configuración para cada tabla, como color de fondo, nombre, imagen/banner, precio y más.
3. Estilos Visuales Personalizados:
   • Mejora la presentación visual de las tablas de precios con estilos CSS personalizados.
   • Incluye efectos visuales, como sombras y transiciones, para hacer que las tablas sean más atractivas.
   • Permite resaltar una tabla específica como la «Mejor Opción» con estilos distintivos.

Posibles Casos de Uso:

• Páginas de Productos o Servicios:
  • Ideal para sitios que ofrecen múltiples productos o servicios con diferentes precios y características.
  • Permite destacar una opción particular como la más recomendada.
• Comparación de Planes:
  • Útil para sitios que ofrecen varios planes de suscripción o membresía.
  • Permite presentar de manera atractiva las características y precios de cada plan.
• Ofertas Especiales:
  • Puede ser utilizado para resaltar ofertas especiales o paquetes destacados.
  • Facilita la presentación visual de información sobre precios y beneficios.

En resumen, este código mejora la experiencia visual de las tablas de precios en WordPress, haciéndolas más atractivas y personalizables para diversas situaciones, desde la venta de productos hasta la presentación de planes de suscripción.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php
function cargar_font_awesome_si_es_necesario() {
    // Verificar si Font Awesome ya está encolada por el tema
    if (!wp_style_is('font-awesome', 'enqueued')) {
        // Agregar Font Awesome desde la CDN
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css', array(), null);
    }
}

add_action('wp_enqueue_scripts', 'cargar_font_awesome_si_es_necesario');

function tabla_precio_shortcode($atts, $content = null) {
    // Procesar shortcodes secundarios dentro del contenido
    $content = do_shortcode($content);

    // Renderizar el contenido
    $output = '<div class="tablas-de-precios">';
    $output .= $content;
    $output .= '</div>';

    return $output;
}

add_shortcode('tablas_de_precios', 'tabla_precio_shortcode');

function tabla_precio_individual_shortcode($atts) {
    // Configuración predeterminada
    $atts = shortcode_atts(
        array(
            'fondo' => '',
            'nombre' => '',
            'banner' => '', // URL de la imagen
            'precio' => '',
            'caracteristicas' => '',
            'url_boton' => '#', // Valor predeterminado es '#' (enlace vacío)
            'destacada' => 'false', // Nuevo parámetro para destacar la tabla
        ),
        $atts,
        'tabla_precio'
    );

    // Convierte la cadena de características en un array
    $caracteristicas = explode(',', $atts['caracteristicas']);

    // Comienza a construir la tabla de precios
    $output = '<div class="tabla-precio';

    // Verifica si la tabla debe ser destacada y aplica la clase dinámicamente
    if ($atts['destacada'] === 'true') {
        $output .= ' tabla-destacada';
    }

    $output .= '" style="background-color: ' . esc_attr($atts['fondo']) . ';">';

    // Banda para la "Mejor Opción" en la esquina superior derecha
    if ($atts['destacada'] === 'true') {
        $output .= '<div class="mejor-opcion-banda">Mejor Opción</div>';
    }

    $output .= '<h3>' . esc_html($atts['nombre']) . '</h3>';

    // Banner de la tabla
    if (!empty($atts['banner'])) {
        $output .= '<img src="' . esc_url($atts['banner']) . '" alt="' . esc_attr($atts['nombre']) . '" />';
    }

    $output .= '<p class="precio">' . esc_html($atts['precio']) . '</p>';

    // Lista de características con iconos de verificación
    if (!empty($caracteristicas)) {
        $output .= '<ul>';
        foreach ($caracteristicas as $caracteristica) {
            $output .= '<li><i class="fas fa-check"></i> ' . esc_html($caracteristica) . '</li>';
        }
        $output .= '</ul>';
    }

    // Botón de suscripción con la URL dinámica
    $output .= '<a href="' . esc_url($atts['url_boton']) . '" class="boton-suscribir">Suscribirme</a>';

    $output .= '</div>';

    return $output;
}


add_shortcode('tabla_precio', 'tabla_precio_individual_shortcode');


function agregar_estilos_tabla_precio() {
    echo '<style>
        /* Estilos para la tabla de precios */
        .tablas-de-precios {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .tabla-precio {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
			border-radius: 20px;
            padding: 50px;
            text-align: center;
            margin-bottom: 20px;
            flex: 0 0 30%; /* Ajusta el ancho según tus necesidades */
        }

        .tabla-precio img {
            width: 150px;
            height: auto;
            max-width: 100%; /* Hace que la imagen sea responsive */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra suave */
            margin: 0 auto; /* Centra la imagen */
            display: block; /* Elimina espacios debajo de la imagen */
            border-radius: 8px; /* Agrega bordes redondeados */
            margin-bottom: 10px; /* Espaciado inferior para separar la imagen de otros elementos */
        }

        .tabla-precio h3 {
            color: #444;
        }

        .tabla-precio i.fas {
            color: #28a745; /* Cambia el color a verde (#28a745) */
            margin-right: 5px; /* Espaciado a la derecha del icono */
        }

        .tabla-precio p.precio {
            font-size: 24px;
            color: black;
        }

        .tabla-precio ul {
            list-style-type: none;
            padding: 0;
        }

        .tabla-precio li {
            padding: 8px;
            font-size: 14px;
        }

        .tabla-precio a.boton-suscribir {
            display: inline-block;
            padding: 10px 20px;
            background-color: white;
            color: black;
            text-decoration: none;
            border-radius: 50px;
            margin-top: 10px;
            transition: background-color 0.3s;
        }

        .tabla-precio a.boton-suscribir:hover {
            background-color: black;
            color: white;
        }

        /* Estilos específicos para las tablas destacadas */
        .tabla-precio.tabla-destacada {
		    position: relative; /* Asegura que la posición sea relativa para alinear elementos absolutos */
            border: 2px solid #E66757;
            /* Borde más grueso */
            box-shadow: 0 8px 16px rgba(230, 103, 87, 0.2);
            /* Sombra más pronunciada */
            transform: scale(1.05);
            /* Escala la tabla para que parezca más grande y más cercana */
            transition: transform 0.3s ease-in-out;
            /* Agrega una transición suave */
        }

        .tabla-precio.tabla-destacada:hover {
            transform: scale(1.1);
            /* En el hover, aumenta ligeramente la escala para un efecto de destacado */
        }
		
		.mejor-opcion-banda {
             top: 5;
             right: 0;
             background-color: #E66757;
             color: white;
             padding: 8px 16px;
             font-weight: bold;
			 border-radius: 20px;
             z-index: 999; /* Asegura que la banda esté por encima de otros elementos */
    }
        @media (max-width: 767px) {
            .tabla-precio {
                flex: 0 0 100%;
            }
        }
    </style>';
}

add_action('wp_head', 'agregar_estilos_tabla_precio');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Función de carga condicional de Font Awesome:

• Función: cargar_font_awesome_si_es_necesario()
• Objetivo: Garantizar que la biblioteca Font Awesome esté encolada solo si no está presente en la cola de estilos de WordPress.
• Detalles:
  • Utiliza wp_style_is('font-awesome', 'enqueued') para verificar si la hoja de estilos ‘font-awesome’ está encolada.
  • Si no está encolada, utiliza wp_enqueue_style para agregar la hoja de estilos desde la CDN de Font Awesome.

2. Shortcode para la tabla de precios principal:

• Función: tabla_precio_shortcode($atts, $content = null)
• Objetivo: Procesar shortcodes secundarios dentro del contenido y envolverlo en un contenedor <div> con la clase tablas-de-precios.
• Detalles:
  • Utiliza do_shortcode($content) para procesar cualquier shortcode dentro del contenido.
  • Envuelve el contenido procesado en un contenedor <div> con la clase tablas-de-precios.

3. Shortcode para tablas de precios individuales:

• Función: tabla_precio_individual_shortcode($atts)
• Objetivo: Generar HTML para una tabla de precios individual con atributos personalizables.
• Detalles:
  • Utiliza shortcode_atts para configurar valores predeterminados y procesar atributos proporcionados.
  • Atributos configurables:
    • 'fondo': Color de fondo de la tabla.
    • 'nombre': Nombre de la tabla.
    • 'banner': URL de la imagen/banner.
    • 'precio': Precio de la tabla.
    • 'caracteristicas': Características de la tabla (cadena convertida en una lista).
    • 'url_boton': URL del botón de suscripción.
    • 'destacada': Indicador para destacar la tabla.

[tablas_de_precios]
[tabla_precio fondo="#E66757" nombre="Plan Básico" precio="10€/mes" caracteristicas="Característica 1, Característica 2, Característica 3, Característica 4, Característica 5" url_boton="https://tu-url.com/suscribirse"]
[tabla_precio destacada="true" fondo="#ECE9B5" nombre="Plan Estándar" precio="20€/mes" caracteristicas="Característica 1, Característica 2, Característica 3, Característica 4, Característica 5" url_boton="https://tu-url.com/suscribirse"]
[tabla_precio fondo="#96BBB6" nombre="Plan Premium" precio="30€/mes" caracteristicas="Característica 1, Característica 2, Característica 3, Característica 4, Característica 5" url_boton="https://tu-url.com/suscribirse"]
[/tablas_de_precios]Lenguaje del código: JSON / JSON con comentarios (json)

4. Función para agregar estilos CSS personalizados:

• Función: agregar_estilos_tabla_precio()
• Objetivo: Imprimir estilos CSS personalizados en la sección <head> del sitio.
• Detalles:
  • Define estilos para la apariencia visual de las tablas de precios, incluyendo colores, márgenes, tamaños de fuente, sombras y animaciones de transición.
  • Proporciona estilos específicos para tablas destacadas y ajustes responsivos para pantallas más pequeñas.

5. Estilos CSS:

• Detalles:
  • Define reglas de estilo para elementos específicos de las tablas de precios, como colores, márgenes, tamaños de fuente y efectos de sombra.
  • Incluye estilos específicos para tablas destacadas, con bordes más gruesos, sombras pronunciadas y efectos de escala durante el hover.
  • Establece reglas para la apariencia del botón de suscripción y ajustes responsivos para pantallas más pequeñas.

En resumen, estas funciones y shortcodes proporcionan una solución integral para la presentación y estilización de tablas de precios en WordPress, con opciones de personalización y mejoras visuales.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.