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.
