Víctor Mellado

Autor: admin

  • Mostrar atributos del producto en cualquier parte de la página de producto.

    Mostrar atributos del producto en cualquier parte de la página de producto.

    El siguiente snippet (bloque de código que puedes pegar usando un plugin como WPCode), crea un shortcode que permite mostrar como texto los atributos de un producto en la página de producto.

    Trae varias comprobaciones de errores, y se usa así:

    [vk7k_wc_mostrar_info_atributo_producto name=”talla”]

    El shortcode tiene un nombre así de largo porque el que originalmente se llamaba generaba un lote bastante grande de errores.

  • Assets

    330x330px, PNG
    30×30, PNG
    256×256 webp
    30×30 png
  • Calculadora de IVA chileno (19%)

    Calculadora de IVA chileno (19%)

    Calculadora de IVA (19%)

    Calculadora de IVA (19%)

    Ingresa un valor en cualquier campo para calcular los otros dos.
  • Creador de boton de Whatsapp Flotante para WordPress sin plugin

    Creador de boton de Whatsapp Flotante para WordPress sin plugin

    Generador de Botón Flotante WhatsApp

    Generador de Snippet para Botón Flotante de WhatsApp

    1. Configuración

    Incluye código de país. Se limpiará automáticamente.

    2. Vista Previa

    Así se verá el botón (sin la funcionalidad de carga asíncrona aquí).

    3. Código Snippet

    ¿Cómo usarlo?

    Copia y pega el código generado (usa el botón para copiar) en tu WordPress, usando un Bloque de HTML en la página en donde desees ponerlo (o en el template part de footer para que aparezca en todo el sitio). Generará un botón de Whatsapp como el que estás viendo en esta página.

  • Estilizador para contact form 7 (generador de CSS para Contact Form 7)

    Estilizador para contact form 7 (generador de CSS para Contact Form 7)

    Estilos del Formulario CF7

    Añade esta misma clase al bloque del formulario en WordPress.

    Etiquetas (Labels)

    Campos (Inputs y Textarea)

    Texto de Placeholder

    Botón de Envío

    Vista Previa

    Diseños Predefinidos

    CSS Generado

    Mis Diseños Guardados

    Qué es Contact Form 7

    Contact Form 7 es un gran amigo. Pero es feo. No es su culpa, y no es su trabajo ser lindo. Aquí te dejo una utilidad para que crees CSS customizado para Contact Form 7 y puedas ver cómo va quedando en la medida que eliges opciones. Si quieres más detalles, o saber cómo pegar el CSS en tu WordPress, más abajo te lo cuento.

    Contact Form 7, “Form 7” o “CF7”, se descarga del repositorio de plugins:

    CF7 uno de esos plugins que existen casi desde el inicio de la era WordPress.

    El plugin compila un HTML funcional, con todo el backend, en base a un marcado de texto. Se encarga de un montón de detalles y permite hacer el formulario que quieras.

    Hace de todo, no tiene “Versión Premium” y existen toneladas de plugins para añadirle funcionalidad.

    Pero… CF7 no tiene estilos visuales, hereda lo que le entregue la plantilla del sitio web, por lo que la mayoría de las veces, sus formularios serán feos.

    Esta herramienta sencilla que tienes a continuación, permite estilizar Contact Form 7. Generará unos paddings, unos tamaños consistentes de letras y sacará los estilos default de windows 95 de los formularios (todo eso lo tienes ya con el estilo predeterminado).

    Luego, puedes presionar el botón para copiar, y en tu WordPress pegar el código CSS en el Full Site Editor.

    Cómo pegar el CSS:

    Para acceder al Full Site Editor en tu WordPress, haces clic en “Editar sitio” en la barra superior, y en el lado derecho, presionas estos tres botones en orden:

    Ahí es donde pegas el CSS:

    Sí, también podías simplemente usar CTRL + V, pero algunos , aún en 2025 no están listos para esa conversación.

  • Crear enlaces wa.me WhatsApp (sin intermediarios)

    Crear enlaces wa.me WhatsApp (sin intermediarios)

    Esta es una utilidad sencilla que genera el código que debes pegar cuando creas un botón o un enlace para que te envíen Whatsapp, sin pasar por intermediarios.

    Esta pequeña utilidad la obtuve con DeepSeek, y creo que fue con la primera iteración, en febrero de 2025. Pero sigue siendo útil de todas formas.

  • WordPress elementos fijos / sticky

    WordPress elementos fijos / sticky

    Aquí un ejemplo de un recurso que se encuentra en el editor de bloques de WordPress, también llamado Gutenberg por los antiguos:

    Primer título con posición fija (sticky)

    El texto que está arriba está dentro de un grupo. Los grupos en el editor de bloques pueden tener la propiedad de posición fija:

    La opción de “Posición fija” aparece en las propiedades del bloque dentro de la barra de propiedades derecha, para un bloque de tipo grupo. Hay otros bloques que también la poseen.

    Dependiendo del nivel (si está dentro de otro grupo de contenido) está el elemento, esto dictará si sigue de largo hacia abajo, si se detiene o si se reemplaza por otros elementos. Por ejemplo, el título “Primer título con posición fija que pusimos arriba de este contenido, está al mismo nivel que el párrafo que viene aquí abajo, de manera que si haces scroll, el título a continuación se pondrá encima cuando llegue a ocupar su posición sticky :

    Segundo título con posición fija (sticky, como decíamos)

    Guapo.

    Por default, los elementos de grupo (grupo, fila, columna y grilla) permiten configurar la opción de posición fija:

    Como mencionábamos, el título que dice “Segundo título…”, está al mismo nivel que el título anterior. Así que será su turno de ponerse encima del “primer título”.

    En la vista de lista se aprecia esto:

    Toda esta magia terminará aquí, como puedes ver por el borde negro, el grupo se acaba aquí, y se llevará a los dos sticky/fijos.

    … es decir, auquí, si sigues haciendo scroll, los elementos sticky / fijos que creamos se irán con esa línea negra que está sobre este texto.

    Para ello debes seguir haciendo scroll…

    hacia abajo..

    abajo…

    abajo…

    En la vista de lista del editor de gutenberg, esto se vería así:

  • Servicios online para correr Stable Diffussion y sus amigos con opciones avanzadas.

    Servicios online para correr Stable Diffussion y sus amigos con opciones avanzadas.

    Son montones. Así que haré mi propia lista aquí.

    1. Cuaderno de Colab de stable-diffusion-art.com

    Instrucciones: https://stable-diffusion-art.com/forge-colab/ El enlace te lo mandan al crearte una cuenta en el sitio (gratis). Yo tengo una copia pero no voy a joderles estropearles el marketing así que… vaya. También tienen cuadernos para A1111 y ComfyUI

    2.Tensor.art

    modelos de imagen y video. LoRas, ControlNet, etc, pero con una biblioteca amplia de ellos. Por ejemplo al habilitar controlnet, aparecen modelos ya listos para poses, QR, lineart, y unos cuantos más. Usa créditos, planes con créditos… desde USD $9.9 con el que te entregan créditos diarios. Y puedes comprar créditos “sueltos”. ¿Para qué alcanzan? una imagen creada con SDXL y un lora de decoracion navideña… sale 0.8 créditos

    3.Mage

    https://www.mage.space

    Permite correr diferentes modelos, y tiene generación gratuita con algunos. Planes desde $8 para correrlos todos. Planes desde $15USD para poder usar LoRa, Textual Inversion, ControlNet, Animate. Detalles de los planes en https://www.mage.space/membership

    4.RunDiffusion

    Desde USD 10,99 en pago mensual

    Aquí ponemos el precio mínimo en pago mensual, nadie va a suscribirse a la versión de un año entero… creo

    Es una lista corta… es una referencia…. no he mencionado populares como:

    https://leonardo.ai

    Y bueno, otros que no son SD ni sus amigos pero que no hay que dejar de mencionars

    https://www.freepik.es – que lo usé toda la vida pa bajar vectores, ahora es como herramienta todo-en-uno

    canva.com

    https://ideogram.ai – mi favorito, lo uso todo el tiempo y tengo suscripción ohhoho. El primero que llegó con capacidad de crear texto bien. Pero hay que pasarse a usar modelos open source, con comfy, a1111, forge, etc, para hacer cosas más pro. Al menos quedan unos meses antes de que puedas hacer películas completas con chatgpt así que bueh…

  • Añadir un tab adicional a un producto de WooCommerce

    Añadir un tab adicional a un producto de WooCommerce

    Este código es de Adding Custom Text Area to WooCommerce Product – WordPress Development Stack Exchange

    Funciona hoy. No sé mañana.

    Lo de siempre. Puede añadirse a un plugin, theme o… como snippet usando un plugin de snippets.

    // Add custom Meta box to admin products pages
    add_action( 'add_meta_boxes', 'create_product_technical_specs_meta_box' );
    function create_product_technical_specs_meta_box() {
        add_meta_box(
            'custom_product_meta_box',
            __( 'Technical specs', 'cmb' ),
            'add_custom_content_meta_box',
            'product',
            'normal',
            'default'
        );
    }
    
    // Custom metabox content in admin product pages
    function add_custom_content_meta_box( $post ){
        $product = wc_get_product($post->ID);
        $content = $product->get_meta( '_technical_specs' );
    
        echo '<div class="product_technical_specs">';
    
        wp_editor( $content, '_technical_specs', ['textarea_rows' => 10]);
    
        echo '</div>';
    }
    
    // Save WYSIWYG field value from product admin pages
    add_action( 'woocommerce_admin_process_product_object', 'save_product_custom_wysiwyg_field', 10, 1 );
    function save_product_custom_wysiwyg_field( $product ) {
        if (  isset( $_POST['_technical_specs'] ) )
             $product->update_meta_data( '_technical_specs', wp_kses_post( $_POST['_technical_specs'] ) );
    }
    
    // Add "technical specs" product tab
    add_filter( 'woocommerce_product_tabs', 'add_technical_specs_product_tab', 10, 1 );
    function add_technical_specs_product_tab( $tabs ) {
        $tabs['test_tab'] = array(
            'title'         => __( 'Mer information', 'woocommerce' ),
            'priority'      => 50,
            'callback'      => 'display_technical_specs_product_tab_content'
    
        );
    
        return $tabs;
    }
    
    // Display "technical specs" content tab
    function display_technical_specs_product_tab_content() {
        global $product;
        echo '<div class="wrapper-technical_specs">' . $product->get_meta( '_technical_specs' ) . '</div>';
    }

  • Texto justificado en el editor de bloques

    Texto justificado en el editor de bloques

    A todos les encantan los párrafos justificados.

    Por lo general, cuando trato de explicarles lo de los “rios tipográficos” y de la importancia de que los textos puedan leerse sin que sea desagradable, se quedan dormidos.

    El editor de bloques nisiquiera trae la opción de justificar los textos, porque … en fin.

    Opción 1: instala un plugin:

    De acuerdo a este artículo: How to Justify Text In WordPress (Block Editor), instala este plugin:

    y mágicamente se añadirá la opción de justificar texto.

    Opción 2: Snippet. (o instalando un plugin para no instalar un plugin)

    Con el siguiente plugin puedes instalar y activar “code snippets” en WordPress:

    Y así podrás pegar este fabuloso código que añade el bendito botón de “justificar” a los controles de bloque en el editor Gutenberg. (también disponible en github).

    PHP Snippet con Botón de Copiar

    Snippet PHP: Botón Justificar para Editor de Bloques WP

    El botoncillo quedaría ahí: