Cómo crear un plugin para agregar comunas de Chile en WooCommerce

Crear un plugin para agregar las comunas en Chile a WooCommerce puede parecer una tarea compleja, pero con una guía adecuada es totalmente realizable, incluso si estás dando tus primeros pasos como desarrollador WordPress. En el contexto chileno, adaptar WooCommerce a la estructura de direcciones local es fundamental para mejorar la precisión en los envíos, la conversión en el checkout y la experiencia general del cliente. Por defecto, WooCommerce no incluye un listado detallado de comunas, lo que representa una limitación importante para tiendas online que requieren exactitud logística y cobertura nacional real. En este artículo aprenderás paso a paso cómo desarrollar tu propio plugin personalizado, sin depender de herramientas externas, con código claro, ejemplos funcionales y las mejores prácticas para lograr una integración profesional en tu ecommerce WordPress.

¿Por qué crear un plugin para comunas en Chile?

Cuando se configura una tienda en WooCommerce para Chile, uno de los desafíos más comunes es la ausencia de las comunas en el formulario de checkout. Esto puede afectar la logística y generar errores en la entrega.

Al crear un plugin personalizado, se garantiza compatibilidad, flexibilidad y escalabilidad. Además, se evita depender de soluciones de terceros que pueden quedar desactualizadas.

Estructura básica de un plugin para WooCommerce

Un plugin de WordPress necesita al menos un archivo .php principal con un encabezado específico. Para agregar las comunas de Chile a WooCommerce, trabajaremos principalmente con el hook woocommerce_states.

🗂️ Estructura sugerida:

comunas-cl-wc/
├── comunas-cl-wc.php

Paso a paso para crear el plugin

1. Crear la carpeta y el archivo principal

Dentro de la carpeta /wp-content/plugins/, crea una nueva carpeta llamada comunas-cl-wc y dentro de ella el archivo comunas-cl-wc.php.

2. Encabezado del plugin

<?php
/*
Plugin Name: Comunas de Chile para WooCommerce
Description: Agrega las comunas de Chile al campo de estado/provincia en WooCommerce.
Version: 1.0
Author: Tu Nombre
*/

3. Código completo: agregar comunas por región

En comunas-cl-wc.php:

<?php
/*
Plugin Name: Comunas de Chile en WooCommerce
Description: Agrega un campo de comuna dinámico por región en el checkout de WooCommerce.
Version: 1.0
Author: Tu Nombre
*/

add_action('woocommerce_after_order_notes', 'campo_comuna_chile');

function campo_comuna_chile($checkout) {
    echo '<div id="comuna_chile_field"><h3>' . __('Comuna') . '</h3>';

    woocommerce_form_field('comuna_chile', array(
        'type' => 'select',
        'class' => array('form-row-wide'),
        'label' => __('Selecciona tu comuna'),
        'required' => true,
        'options' => array('' => 'Selecciona una región primero'),
    ), $checkout->get_value('comuna_chile'));

    echo '</div>';
}

// Guardar comuna
add_action('woocommerce_checkout_update_order_meta', function($order_id) {
    if (!empty($_POST['comuna_chile'])) {
        update_post_meta($order_id, 'Comuna', sanitize_text_field($_POST['comuna_chile']));
    }
});

// Mostrar en emails y admin
add_action('woocommerce_admin_order_data_after_billing_address', function($order){
    echo '<p><strong>'.__('Comuna').':</strong> ' . get_post_meta($order->get_id(), 'Comuna', true) . '</p>';
}, 10, 1);

4. Código JavaScript para mostrar comunas dinámicamente

Este JS debe ir en un archivo o insertarse directamente. Aquí lo añadiremos inline:

add_action('wp_footer', 'script_comunas_chile');

function script_comunas_chile() {
    if (!is_checkout()) return;
    ?>
    <script>
    const comunas = {
        'Región Metropolitana': ['Santiago', 'Providencia', 'La Florida', 'Puente Alto', 'Maipú'],
        'Valparaíso': ['Valparaíso', 'Viña del Mar', 'Quilpué', 'Villa Alemana'],
        'Biobío': ['Concepción', 'Talcahuano', 'Chiguayante', 'Coronel']
    };

    jQuery(function($){
        $('select#billing_state').change(function(){
            let region = $(this).val();
            let comunaSelect = $('select[name="comuna_chile"]');
            comunaSelect.empty().append('<option value="">Selecciona tu comuna</option>');

            if (comunas[region]) {
                comunas[region].forEach(function(comuna){
                    comunaSelect.append('<option value="'+comuna+'">'+comuna+'</option>');
                });
            }
        });
    });
    </script>
    <?php
}

📌 Puedes ampliar la lista de comunas por región. Esta versión es funcional y ligera.

5. Guardar y mostrar la comuna en el pedido

Ya lo hicimos con update_post_meta, pero además puedes mostrarlo también en los detalles del cliente:

add_action('woocommerce_order_details_after_customer_details', function($order){
    echo '<p><strong>'.__('Comuna').':</strong> ' . get_post_meta($order->get_id(), 'Comuna', true) . '</p>';
});

Conclusión y próximos pasos

Crear un plugin personalizado para agregar comunas de Chile en WooCommerce es más sencillo de lo que parece. Esta solución te permite:

• Mejorar la experiencia del cliente y la logística de tu tienda
• Evitar usar plugins desactualizados
• Tener control total sobre regiones y comunas

🔗 ¿Quieres automatizar más procesos en tu tienda WooCommerce? Revisa esta excelente guía de personalización de checkout en WooCommerce (en inglés) para complementar tu sistema.

También te podría interesar nuestro artículo para añadir campos en el checkout de WooCommerce.

Si necesitas ayuda o alguien que lo haga por ti, visita Webart y ellos te darán el soporte que necesitas.