En WooCommerce, los atributos de producto ofrecen una forma flexible de definir varias características para diferentes tipos de productos. Configurar atributos de producto puede mejorar la experiencia del usuario ayudando a los clientes a encontrar rápidamente detalles esenciales, como color, tamañoo material. Enriquecer las páginas de productos con información detallada aumenta la profundidad de los contenidos, lo que beneficia la optimización para motores de búsqueda (SEO) y mejora la visibilidad de los productos.

Este artículo cubre varios métodos para añadir información adicional a las páginas de producto de WooCommerce, incluyendo el uso de de WooCommerce funciones incorporadas, el Campos personalizados avanzados (ACF) plugin, y código personalizado. Elija el método que mejor se adapte a sus necesidades.

Por qué añadir información adicional mejora la experiencia del usuario y el SEO

Por ejemplo, si vende ropa, es posible que los clientes quieran saber el color, la talla y el tejido. Al establecer estos atributos, WooCommerce los muestra automáticamente bajo el "Información adicional" en la página del producto, lo que permite a los usuarios acceder rápidamente a los detalles esenciales. Esta funcionalidad permite una mejor comparación de los productos para los usuarios y mejora el rendimiento SEO de la página al añadir contenido relevante.

Método 1: Añadir información adicional utilizando las funciones integradas de WooCommerce

WooCommerce ofrece una forma sencilla de añadir atributos de producto directamente en la pantalla de edición del producto. Estos son los pasos:

Paso 1: Inicie sesión en el panel de control de WooCommerce

Navegue hasta el panel de control de WordPress, haga clic en "Productosy seleccione el producto sobre el que desea añadir información adicional.

Paso 2: Localice la sección "Datos del producto

En el editor de productos, desplácese hasta "Datos del producto" y seleccione el panel "Atributos".

Paso 3: Añadir atributos

Pulse el botón "Añadir nuevo" para definir nuevos atributos como "Color" o "Talla.”

• Introduzca el nombre del atributo, por ejemplo, "Color.”
• Separe los valores de los atributos con una barra vertical (|), como "Rojo | Azul | Verde".

Paso 4: Establezca la visibilidad de los atributos

Marque la opción "Visible en la página del producto" para asegurarse de que estos atributos aparecen en la pestaña "Información adicional" de la página del producto.

Paso 5: Guardar y actualizar el producto

Pulse el botón "Actualización" para guardar los cambios. Una vez guardados, la pestaña "Información adicional" de la página del producto mostrará automáticamente estos atributos.

Ejemplo

Si vende una camiseta que viene en tres colores (Rojo, Azul, Verde) y tres tallas (S, M, L), puede establecer el atributo "Color" en "Rojo | Azul | Verde" y el atributo "Talla" en "S | M | L". Cuando la opción "Visible en la página del producto" está marcada, los clientes verán estas opciones en la pestaña "Información adicional".

Método 2: Añadir información adicional utilizando el plugin de campos personalizados seguros (SCF)

Aunque los atributos incorporados de WooCommerce son útiles, se necesita más para ciertas necesidades. Con los Campos personalizados seguros (SCF) plugin, puede añadir más campos personalizados para mostrar detalles adicionales del producto, como el material y las instrucciones de cuidado.

Paso 1: Instalar el plugin ACF

Ir a "Plugins" en el panel de control de WordPress, busque "Campos personalizados seguros," y haga clic en "Instalar" y "Activar".

Paso 2: Crear un grupo de campos

Ir a "SCF" del panel de control de WordPress y seleccione "Añadir nuevo grupo de campos". Esto le permite definir campos personalizados para sus productos.

Paso 3: Definir campos

Dentro del grupo de campos, añada nuevos campos como "Material" o "Instrucciones de cuidado." Elija tipos de campo como texto, área de texto o imagen según sea necesario.

He aquí un desglose de algunos tipos de campo habituales:

• Texto: Este campo es ideal para entradas cortas de una sola línea. Por ejemplo, puede utilizarlo para un campo "Material" si sólo necesita enumerar uno o dos materiales, como "Algodón 100%" o "Acero inoxidable".
• Área de texto: Es útil para descripciones más largas. Puede utilizarlo para "Instrucciones de cuidado", donde puede proporcionar información detallada sobre el lavado o la manipulación, como "Lavar sólo a mano. No secar en secadora".
• Imagen: Esta opción le permite añadir imágenes. Podría utilizarse para campos como "Certificación de productos", en los que desea mostrar un logotipo de certificación o un sello de calidad.

Ejemplo:

Supongamos que vende muebles de madera y desea añadir los siguientes campos personalizados:

1. Material-Podría ser un campo "Texto" para introducir tipos de madera específicos, como "Roble" o "Arce".

2. Instrucciones de cuidado - Establézcalo como "Área de texto" donde podrá detallar consejos de cuidado, como "Límpielo con un paño seco. Evite la luz solar directa".

3. Logotipo de certificación - Utilice un campo "Imagen" para cargar un sello de certificación o un distintivo ecológico.

Tras definir estos campos, aparecerán en el editor de productos, listos para que introduzca la información específica de cada producto.

Paso 4: Establezca las reglas de visualización

En la sección "Configuración", defina las condiciones en las que deben mostrarse estos campos personalizados en las páginas de productos. Puede aplicar estos campos a todos los productos o a categorías específicas, etiquetas o incluso productos individuales.

Paso 5: Introducir información en el editor de productos

Una vez definidos los campos y establecidas las reglas de visualización, vaya al editor de productos de WooCommerce para cualquier producto que cumpla los criterios. Ahora verá los campos personalizados que ha creado y podrá introducir la información pertinente para cada uno de ellos.

Paso 6: Modificar la plantilla del producto (Opcional)

Para mostrar estos campos personalizados en la parte frontal de la página del producto, es posible que tenga que editar los archivos de plantilla de WooCommerce (por ejemplo, single-product.php). Utilice la función the_field() de SCF para dar salida a los valores de los campos de esta forma:

<div class="product-material">

    <h4>Material:</h4>

    <p><?php the_field('material'); ?></p>

</div>

Método 3: Añadir información adicional mediante código personalizado

Añadiendo código al archivo functions.php de su tema, puede añadir campos directamente a la pantalla de edición de productos de WooCommerce para una personalización más avanzada.

Paso 1: Añadir un campo personalizado al editor de productos

Utilice el gancho woocommerce_product_options_general_product_data para añadir un campo personalizado a la pantalla de edición del producto.

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );

function add_custom_general_fields() {

    woocommerce_wp_text_input( array(

        'id' => '_custom_product_text_field',

        'label' => __( 'Campo de producto personalizado', 'woocommerce' ),

        'desc_tip' => 'true',

        'description' => __( 'Introduzca el contenido del campo personalizado', 'woocommerce' )

    ));

}

Paso 2: Guardar el valor del campo personalizado

Utilice el gancho woocommerce_process_product_meta para guardar el valor del campo personalizado.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );

function save_custom_general_fields( $post_id ) {

    $custom_field_value = isset( $_POST['_custom_product_text_field'] ) ? sanitize_text_field( $_POST['_custom_product_text_field'] ) : '';

    update_post_meta( $post_id, '_custom_product_text_field', $custom_field_value );

}

Paso 3: Mostrar el campo personalizado en la página de producto

Para mostrar el campo personalizado en el front-end, utilice get_post_meta() en la plantilla de producto de WooCommerce.

echo '<div class="custom-field">';

echo '<label>Campo personalizado: </label> ';

echo get_post_meta( get_the_ID(), '_custom_product_text_field', true );

echo '</div>';

Gestión de la pestaña "Información adicional" de WooCommerce

La pestaña "Información adicional" de WooCommerce es útil para mostrar atributos detallados de los productos, pero puede que desee personalizar su contenido o incluso ocultarla en algunos casos.

Añadir texto personalizado a la pestaña "Información adicional

Para añadir contenido personalizado, como un enlace, a la pestaña "Información adicional", utilice el siguiente código:

add_action( 'woocommerce_product_additional_information', 'print_custom_html' );

function print_custom_html() {

    echo '<a href="#">Pulse aquí para ver más detalles del producto</a>';

}

Cómo ocultar o eliminar la pestaña "Información adicional

Si un producto no requiere información adicional (por ejemplo, un producto digital), puede eliminar esta pestaña con el siguiente código:

add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 );

function remove_additional_information_tab( $tabs ) {

    unset( $tabs['información_adicional'] );

    return $tabs;

}

Conclusión

Añadir información adicional a las páginas de producto de WooCommerce mejora la experiencia del usuario y el SEO. Las funciones integradas de WooCommerce, plugins como Secure Custom Fields (SCF) y la codificación personalizada ofrecen opciones flexibles para enriquecer las páginas de productos con detalles como el color, la talla, el material, las instrucciones de cuidado y las certificaciones.

• Uso de las funciones incorporadas: Añada rápidamente atributos directamente al editor de productos, mejorando la experiencia del usuario al mostrar los detalles esenciales en la pestaña "Información adicional".
• Uso del plugin SCF: Vaya más allá de lo básico y cree campos personalizados para presentar detalles específicos del producto, como los materiales o las instrucciones de cuidado, permitiendo una mejor gestión de la información y una mayor personalización para los distintos tipos de productos.
• Uso de código personalizado: Para una personalización avanzada, añadir campos personalizados con código directamente en el archivo functions.php ofrece un control total sobre cómo se presenta la información en las páginas de productos.

La gestión de la pestaña "Información adicional" le permite añadir, modificar o eliminar contenido en función de las necesidades del producto, garantizando que sus clientes puedan acceder a la información relevante sin desorden innecesario. En general, enriquecer las páginas de producto de WooCommerce ayuda a los clientes a tomar decisiones de compra informadas, aumentando las conversiones a la vez que mejora el SEO de su sitio.