¿Se ha encontrado con una situación que requiere una imagen para cada una de sus etiquetas de WooCommerce? Por suerte para ti, ¡nosotros también! Teníamos un montón de productos y un montón de categorías, pero queríamos mantener las marcas separadas de las categorías reales, así que en lugar de usar subcategorías bajo un padre de "Marcas", usamos etiquetas. Cientos de productos más tarde, nuestro cliente quería mostrar una imagen en cada una de las páginas de etiquetas, específicamente el logotipo de la marca. ¡UH oh! No hay tal opción.
Podríamos revisar cada producto, tomar su etiqueta de marca, crear una categoría y asignarla a una categoría principal de "Marcas", pero eso parece mucho trabajo adicional. Esto es especialmente cierto teniendo en cuenta que nos gustó la forma en que se mostraban las marcas en una nube de etiquetas en la parte frontal del sitio.
Solución:el complemento Imágenes de taxonomía
El complemento de imágenes de taxonomía funciona con taxonomías personalizadas y asigna una opción de GUI para adjuntar imágenes a esa taxonomía. En este caso, nuestra taxonomía es una etiqueta de producto. Implementar esto requiere dos pasos, instalar/configurar el complemento y cargar imágenes, así como configurar su plantilla de etiqueta de WooCommerce.
Configuración del complemento y carga de imágenes
- Inicie sesión en su administrador de WordPress y elija Complementos> Agregar nuevo
- Busque e instale el complemento "Imágenes de taxonomía". ¡Asegúrese de activarlo después de la instalación!
- Vaya a Configuración> Imágenes de taxonomía
- Marque la casilla "Etiquetas de productos" y elija "Guardar cambios"
Ahora debería ver la opción de cargar una imagen junto a cada etiqueta de producto en Productos> Etiquetas. ¡Ya estamos a mitad de camino! Continúe y cargue una imagen para cada etiqueta como normalmente cargaría imágenes en WordPress; asegúrese de seleccionar el botón "Asociar con tag_name" después de cargar (donde tag_name es su nombre de etiqueta real). ¡Actualiza tu etiqueta y ya casi estás listo!
Configuración de su plantilla de WooCommerce
Ahora debemos informar a WooCommerce que desea mostrar la imagen en la página de una sola etiqueta. Esto es un poco más complicado y requiere editar algo de código. También necesitará acceso FTP a su instalación de WordPress para ajustar algunos archivos de plantilla.
Comience configurando su archivo de plantilla:
- Inicie sesión a través de FTP y navegue hasta su directorio de temas de WordPress (wp-content/themes/{your_theme_name})
- Cree una nueva carpeta llamada woocommerce si aún no existe (esta carpeta contiene todas las anulaciones de plantillas)
- Copie la plantilla de la página de etiquetas en esta carpeta. La plantilla de página de etiquetas se encuentra en wp-content/plugins/woocommerce/templates/taxonomy-product_tag.php . ¡Pero espera! Hay un truco aquí, en realidad solo extrae todo el contenido de wp-content/plugins/woocommerce/templates/archive-product.php , aunque realmente queremos anular solo las etiquetas... no todas las páginas de productos. Para hacer esto, copie el archivo archive-product.php archivo de wp-content/plugins/woocommerce/templates en wp-content/themes/{your_theme_name}/woocommerce luego cámbiele el nombre a taxonomy-product_tag.php
Ahora hemos configurado un archivo de plantilla de anulación que anulará solo las etiquetas de productos pero que contiene todo el contenido que necesitamos. Ahora necesitamos editar el archivo de plantilla para insertar algún código que muestre las imágenes de la etiqueta de su producto. Así es como:
Abra su nuevo archivo de plantilla (wp-content/themes/{your_theme_name}/woocommerce/taxonomy-product_tag.php ) con tu editor de texto favorito.
Directamente encima de la línea que se ve así:
<?php do_action( 'woocommerce_archive_description' ); ?>
Inserte lo siguiente:
<aside id="tag-brand-logo"><?php print apply_filters( 'taxonomy-images-queried-term-image', '' ); ?></aside>
Guarde el archivo y diríjase a una de sus páginas de etiquetas de productos individuales (¡asegúrese de que sea una en la que realmente haya cargado una imagen!) y disfrute de la gloria de haber pirateado WooCommerce para obtener sus imágenes donde las quería.
También puedes diseñar tu imagen con CSS como este (por ejemplo):
#tag-brand-logo{ float:right !important; margin-top:-25px; } ¿Encontraste útil esta publicación? ¿Quiere más consejos de expertos en los blogs de su servidor web y directamente de su equipo de soporte técnico de alojamiento? Aloje su sitio web de WordPress con Websavers donde el soporte va más allá del simple alojamiento.