WooCommerce ha lanzado una nueva funcionalidad en la última actualización(9.6) que permite gestionar marcas de productos de forma nativa, facilitando la organización y visibilidad de los productos en tu tienda online. Esta funcionalidad es ideal para aquellos que desean ofrecer una mejor experiencia de compra a los clientes y categorizar sus productos de manera más eficiente.
Esto es un avance importante, ya que para nuevos desarrollos, no necesitaremos implementar un plugin para conseguir esto. Como explicaba en este artículo de cómo añadir marcas a WooCommerce.
El problema es que si ya tenías marcas con el plugin y actualizas a esta versión, va a tener la función duplicada tal y como te muestro aquí:
Efectivamente tenemos dos marcas en el menú, la que teníamos antes y la que no. En este tutorial te explicaré como desactivar esta función, cuando usar las marcas de forma nativa y migrarlas al nuevo sistema.
Índice
¿Merece la pena usar las marcas nativas de WooCommerce?
Si eres una tienda online de nueva creación que ha instalado el WooCommerce por defecto: SÍ. Todo lo que sea usar funciones nativas de WooCommerce te quitará de problemas futuros.
Por otro lado si ya mi tienda funcionaba con otro plugin… ¿Merece la pena migrarlo y cambiarlo? Si sabes mucho de redirecciones SEO, migración de datos y WordPress, quizás sí. Pero en general no lo recomiendo, más abajo tienes un código para quitar estas nuevas marcas y olvidarte del tema.
Beneficios de usar marcas de productos en WooCommerce
- Mejor organización: Clasifica tus productos según sus marcas para que los clientes puedan encontrarlos más fácilmente.
- Filtrado y navegación mejorada: Los clientes pueden filtrar por marcas, facilitando la búsqueda de productos específicos.
- SEO optimizado: Cada marca puede tener su propia página, lo que permite mejorar el posicionamiento en los motores de búsqueda.
- Diferenciación de productos: Ideal para tiendas con productos de varias marcas que desean resaltar la variedad de opciones disponibles.
Quitar esta funcionalidad de WooCommerce
Si ya tenías tus marcas personalizadas o con un plugin y no quieres hacer el cambio, sería tan sencillo como hacer desaparecer ese menú para que no haya problemas futuros. Para ello WooCommerce nos deja el siguiente código, que añadiéndolo al functions.php de nuestro Child Theme o bien a nuestro plugin de funcionalidades como explico aquí conseguimos desactivarlo de WooCommerce:
add_action( 'init', function() {
update_option( 'wc_feature_woocommerce_brands_enabled', 'no' );
} );O si lo quieres desactivar mediante WP CLI:
wp option update wc_feature_woocommerce_brands_enabled 'no'Por otro lado, si usabas el plugin oficial de WooCommerce Brands, al actualizar a esta versión se desactivará y los datos pasarán a esta versión del core automáticamente. Si tenías uno que no fuese el oficial este cambio no aplica.
Añadir una descripción después de los productos en las marcas
Como se que muchos SEOs me van a pedir que se pueda poner un texto debajo de las marcas… Vamos a ello! Para ello como siempre añadiremos este código al functions.php de nuestro Child Theme o a nuestro plugin de funcionalidades:
// Añadir un campo de editor de texto enriquecido completo en la pantalla de edición de marcas
add_action('product_brand_edit_form_fields', 'agregar_campo_completo_marca', 10, 2);
function agregar_campo_completo_marca($term) {
$descripcion_adicional = get_term_meta($term->term_id, 'descripcion_adicional', true);
?>
<tr class="form-field">
<th scope="row" valign="top">
<label for="descripcion_adicional"><?php _e('Descripción Adicional', 'woocommerce'); ?></label>
</th>
<td>
<?php
$settings = array(
'textarea_name' => 'descripcion_adicional',
'editor_height' => 250,
'media_buttons' => true, // Permite agregar imágenes y medios
'tinymce' => array(
'theme' => 'modern',
'menubar' => true, // Muestra el menú completo
'toolbar1' => 'formatselect bold italic underline | alignleft aligncenter alignright | bullist numlist | blockquote link unlink | wp_adv',
'toolbar2' => 'styleselect forecolor backcolor | table | outdent indent | code fullscreen',
'toolbar3' => 'undo redo | removeformat | charmap visualblocks',
'wordpress_adv_hidden' => false,
),
'quicktags' => array(
'buttons' => 'strong,em,link,ul,ol,li,close'
),
'wpautop' => false, // Evita que WordPress agregue automáticamente párrafos
'editor_css' => '<style>#wp-descripcion_adicional-editor-container .wp-editor-area { height:250px; width:100%; }</style>',
);
wp_editor(htmlspecialchars_decode($descripcion_adicional), 'descripcion_adicional', $settings);
?>
<p class="description"><?php _e('Introduce una descripción adicional para esta marca. Puedes usar formato HTML o insertar imágenes.', 'woocommerce'); ?></p>
</td>
</tr>
<?php
}
add_action('edited_product_brand', 'guardar_campo_completo_marca', 10, 2);
add_action('create_product_brand', 'guardar_campo_completo_marca', 10, 2);
function guardar_campo_completo_marca($term_id) {
if (isset($_POST['descripcion_adicional'])) {
update_term_meta($term_id, 'descripcion_adicional', wp_kses_post($_POST['descripcion_adicional']));
}
}
add_action('woocommerce_after_main_content', 'mostrar_descripcion_completa_marca', 5);
function mostrar_descripcion_completa_marca() {
if (is_tax('product_brand')) {
$term = get_queried_object();
$descripcion_adicional = get_term_meta($term->term_id, 'descripcion_adicional', true);
if (!empty($descripcion_adicional)) {
echo '<div class="descripcion-adicional-marca">';
echo wpautop(htmlspecialchars_decode($descripcion_adicional));
echo '</div>';
}
}
}
Con este código ahora en las nuevas marcas de WooCommerce tendremos este campo extra en la edición que nos permitirá mostrar la descripción de las marcas en la tienda online:
Tal y como hice en las categorías de woocommerce en este artículo.
Migrar a esta versión de Marcas
Lo ideal sería no migrarlas, pero como me gusta trastear, pues… Si usabas el plugin de Perfect Brands for WooCommerce y quieres migrarlo, estás de suerte. El primer lugar nos vamos al panel de Marcas de este plugin y abajo del todo a la derecha tendrás la opción de exportar las marcas:
Una vez exportarlas, subes el fichero a la carpeta del Child Theme y aplicas este código en el functions.php:
function importar_marcas_con_imagenes() {
$json_file = get_stylesheet_directory() . '/brands.json'; // Ruta del archivo JSON
if (!file_exists($json_file)) {
echo "El archivo no se encuentra en: " . $json_file;
return;
}
$brands_json = file_get_contents($json_file);
$brands = json_decode($brands_json, true);
if (empty($brands)) {
echo "No hay datos para importar.";
return;
}
foreach ($brands as $brand) {
$slug = sanitize_title($brand['slug']);
$name = sanitize_text_field($brand['name']);
$desc = sanitize_textarea_field($brand['desc']);
$image_url = esc_url_raw($brand['image']);
// Comprobar si la marca ya existe
if (!term_exists($slug, 'product_brand')) {
$term = wp_insert_term($name, 'product_brand', [
'slug' => $slug,
'description' => $desc
]);
if (!is_wp_error($term)) {
$term_id = $term['term_id'];
// Descargar y asignar imagen si existe
if (!empty($image_url)) {
$attachment_id = dl_upload_image_from_url($image_url);
if ($attachment_id) {
update_term_meta($term_id, 'thumbnail_id', $attachment_id);
}
}
echo "Marca importada con imagen: " . $name . "<br>";
} else {
echo "Error al importar: " . $name . " - " . $term->get_error_message() . "<br>";
}
} else {
echo "La marca '" . $name . "' ya existe. <br>";
}
}
}
// Función para descargar la imagen y adjuntarla a la biblioteca de medios
function dl_upload_image_from_url($image_url) {
$upload_dir = wp_upload_dir();
$image_data = file_get_contents($image_url);
$filename = basename($image_url);
if (wp_mkdir_p($upload_dir['path'])) {
$file_path = $upload_dir['path'] . '/' . $filename;
} else {
$file_path = $upload_dir['basedir'] . '/' . $filename;
}
file_put_contents($file_path, $image_data);
$file_type = wp_check_filetype($filename, null);
$attachment = array(
'post_mime_type' => $file_type['type'],
'post_title' => sanitize_file_name($filename),
'post_content' => '',
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment($attachment, $file_path);
require_once(ABSPATH . 'wp-admin/includes/image.php');
$attach_data = wp_generate_attachment_metadata($attach_id, $file_path);
wp_update_attachment_metadata($attach_id, $attach_data);
return $attach_id;
}
// Ejecutar la importación
add_action('admin_init', 'importar_marcas_con_imagenes');
Si te pierdes en algún paso, revisa el vídeo que he subido explicando el proceso. Una vez hecho el cambio comprobamos que estén todas migradas a las nuevas marcas con la taxonomía product_brand y listo!
Cómo configurar marcas de productos en WooCommerce
1. Activar la funcionalidad de marcas
Para comenzar a usar esta funcionalidad, debes asegurarte de tener la versión más reciente de WooCommerce. Luego, sigue estos pasos:
- Ve a tu escritorio de WordPress.
- Dirígete a Productos > Marcas.
- Verás la interfaz para agregar y gestionar marcas.
2. Añadir nuevas marcas
- Accede a Productos > Marcas.
- Completa los siguientes campos:
- Nombre: El nombre de la marca (por ejemplo, «Nike»).
- Slug: La URL amigable para la marca (por ejemplo, «nike»).
- Descripción: Una breve descripción de la marca.
- Imagen de la marca: Puedes subir un logo o imagen representativa.
- Haz clic en «Añadir nueva marca».
3. Asignar marcas a los productos
Una vez creadas las marcas, puedes asignarlas a tus productos de la siguiente manera:
- Ve a Productos > Todos los productos.
- Edita un producto.
- En la barra lateral derecha, encuentra la sección Marcas.
- Selecciona la marca correspondiente.
- Guarda los cambios.
4. Mostrar marcas en la tienda
Para mostrar las marcas en la tienda puedes hacerlo mediante widgets o código personalizado:
- Ve a Apariencia > Widgets.
- Añade el widget «Filtro por marcas» a la barra lateral o pie de página.
- Configura los ajustes según tus necesidades.
5. Personalizar la página de marcas
Cada marca tendrá su propia página donde se mostrarán todos los productos asociados. Puedes personalizarla usando:
- Shortcodes de WooCommerce para mostrar marcas específicas.
- Diseño personalizado con el editor de bloques de Gutenberg.
Un shortcode útil para mostrar productos de una marca es:
[products limit="12" brand="nike"]Si necesitas más información recuerda pasarte por la documentación oficial de WooCommerce.
Consejos para aprovechar las marcas en WooCommerce
- Usa logotipos atractivos: Un buen logo puede hacer que la página de la marca se vea profesional y confiable.
- Crea descripciones SEO-friendly: Aprovecha la descripción para incluir palabras clave relevantes.
- Ofrece promociones por marca: Puedes crear descuentos específicos para productos de una marca.
- Utiliza marcas en los menús de navegación: Agregar enlaces directos a las marcas populares desde el menú principal puede mejorar la experiencia del usuario.
Deja una respuesta