Agregar Marcas a los productos de WooCommerce

En este artículo, te mostraremos cómo agregar una taxonomía personalizada llamada «Marcas» a tus productos en WooCommerce. También te enseñaremos a agregar un campo de imagen para las marcas y cómo crear un shortcode para mostrar estas imágenes con enlaces a los productos filtrados por cada marca.

Crear la taxonomía «Marcas»

Primero, necesitamos registrar la nueva taxonomía «Marcas». Para ello, agrega el siguiente código al archivo functions.phpde tu tema activo:

<?php
// Registrar la taxonomía personalizada "Marcas"
function create_brand_taxonomy() {
    $labels = array(
        'name' => _x('Marcas', 'taxonomy general name', 'textdomain'),
        'singular_name' => _x('Marca', 'taxonomy singular name', 'textdomain'),
        'search_items' => __('Buscar Marcas', 'textdomain'),
        'all_items' => __('Todas las Marcas', 'textdomain'),
        'parent_item' => __('Marca Padre', 'textdomain'),
        'parent_item_colon' => __('Marca Padre:', 'textdomain'),
        'edit_item' => __('Editar Marca', 'textdomain'),
        'update_item' => __('Actualizar Marca', 'textdomain'),
        'add_new_item' => __('Agregar Nueva Marca', 'textdomain'),
        'new_item_name' => __('Nuevo Nombre de Marca', 'textdomain'),
        'menu_name' => __('Marcas', 'textdomain'),
    );

    $args = array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'marca'),
    );

    register_taxonomy('brand', array('product'), $args);
}
add_action('init', 'create_brand_taxonomy', 0);

Este código crea una nueva taxonomía jerárquica llamada «Marcas» que se puede usar para categorizar productos.

Agregar un campo de imágen a la taxonomía «Marcas»

Para agregar un campo de imagen a nuestra taxonomía «Marcas», podemos usar el siguiente código:

<?php
// Agregar campo de imagen a la taxonomía "Marcas"
function brand_add_image_field() {
    ?>
    <div class="form-field term-group">
        <label for="brand_image"><?php _e('Imagen de Marca', 'textdomain'); ?></label>
        <input type="text" id="brand_image" name="brand_image" value="">
        <button class="upload_image_button button"><?php _e('Subir/Agregar Imagen', 'textdomain'); ?></button>
    </div>
    <?php
}
add_action('brand_add_form_fields', 'brand_add_image_field', 10, 2);

// Guardar el campo de imagen
function save_brand_image($term_id) {
    if (isset($_POST['brand_image']) && '' !== $_POST['brand_image']) {
        $image = esc_url($_POST['brand_image']);
        add_term_meta($term_id, 'brand_image', $image, true);
    }
}
add_action('created_brand', 'save_brand_image', 10, 2);

// Editar el campo de imagen
function brand_edit_image_field($term, $taxonomy) {
    $image = get_term_meta($term->term_id, 'brand_image', true);
    ?>
    <tr class="form-field term-group-wrap">
        <th scope="row"><label for="brand_image"><?php _e('Imagen de Marca', 'textdomain'); ?></label></th>
        <td>
            <input type="text" id="brand_image" name="brand_image" value="<?php echo esc_attr($image); ?>">
            <button class="upload_image_button button"><?php _e('Subir/Agregar Imagen', 'textdomain'); ?></button>
        </td>
    </tr>
    <?php
}
add_action('brand_edit_form_fields', 'brand_edit_image_field', 10, 2);

// Actualizar el campo de imagen
function update_brand_image($term_id) {
    if (isset($_POST['brand_image']) && '' !== $_POST['brand_image']) {
        $image = esc_url($_POST['brand_image']);
        update_term_meta($term_id, 'brand_image', $image);
    }
}
add_action('edited_brand', 'update_brand_image', 10, 2);

// Enqueue el script de medios
function enqueue_media_script() {
    if (isset($_GET['taxonomy']) && $_GET['taxonomy'] == 'brand') {
        wp_enqueue_media();
        wp_enqueue_script('brand-image-upload', get_template_directory_uri() . '/js/brand-image-upload.js', array('jquery'), null, true);
    }
}
add_action('admin_enqueue_scripts', 'enqueue_media_script');

// Script JavaScript para subir la imagen
function brand_image_upload_script() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        function uploadImage(button_class) {
            var _custom_media = true,
                _orig_send_attachment = wp.media.editor.send.attachment;

            $('body').on('click', button_class, function(e) {
                var button_id = '#' + $(this).attr('id');
                var send_attachment_bkp = wp.media.editor.send.attachment;
                var button = $(button_id);
                _custom_media = true;

                wp.media.editor.send.attachment = function(props, attachment) {
                    if (_custom_media) {
                        button.prev().val(attachment.url);
                    } else {
                        return _orig_send_attachment.apply(button_id, [props, attachment]);
                    }
                }

                wp.media.editor.open(button);
                return false;
            });
        }

        uploadImage('.upload_image_button');
    });
    </script>
    <?php
}
add_action('admin_footer', 'brand_image_upload_script');

Este código agrega un campo de imágen al formulario de creación y edición de la taxonomía «Marcas», permitiendo subir y guardar imágenes.

Crear un shortcode para listar las imágenes de las Marcas

Finalmente, creamos un shortcode para mostrar las imágenes de las marcas con enlaces a los productos filtrados por cada marca:

<?php
// Shortcode para mostrar las imágenes de las marcas
function brand_images_shortcode() {
    $terms = get_terms(array(
        'taxonomy' => 'brand',
        'hide_empty' => false,
    ));

    if (!empty($terms) && !is_wp_error($terms)) {
        $output = '<div class="brand-images">';
        foreach ($terms as $term) {
            $image = get_term_meta($term->term_id, 'brand_image', true);
            $term_link = get_term_link($term);
            if ($image) {
                $output .= '<div class="brand-image">';
                $output .= '<a href="' . esc_url($term_link) . '">';
                $output .= '<img src="' . esc_url($image) . '" alt="' . esc_attr($term->name) . '">';
                $output .= '</a>';
                $output .= '</div>';
            }
        }
        $output .= '</div>';
    } else {
        $output = __('No hay marcas disponibles.', 'textdomain');
    }

    return $output;
}
add_shortcode('brand_images', 'brand_images_shortcode');

Este shortcode [brand_images] puede ser usado en cualquier página o entrada para mostrar las imágenes de las marcas con enlaces a los productos filtrados por cada marca.

 

Siguiendo estos pasos, has agregado exitosamente una taxonomía personalizada «Marcas» a tus productos de WooCommerce, incluido un campo de imagen para cada marca y creado un shortcode para mostrar estas imágenes. Esto te permitirá organizar mejor tus productos y ofrecer una experiencia de compra más personalizada a tus clientes.

¡Esperamos que este tutorial te haya sido útil! Si tienes alguna pregunta, no dudes en dejar un comentario.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Back to Top
0
Would love your thoughts, please comment.x
()
x