![Agregar Marcas a los productos de WooCommerce Agregar Marcas a los productos de WooCommerce](https://blog.letsgodev.com/wp-content/uploads/2024/06/wc_brands2.jpg)
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.php
de 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.