Cómo añadir información adicional a las páginas de producto de WooCommerce para mejorar la experiencia del usuario y el SEO

¿Qué es la información adicional sobre WooCommerce?

La información adicional de WooCommerce suele ser una sección en la página del productoque se utiliza para mostrar los atributos del producto y otra información personalizada. Esta información es fundamental para el cliente, especialmente cuando se trata de múltiples opciones de productos (por ejemplo, elTalla, color o material) Cuándo. La información adicional no sólo ayuda a los compradores a tomar decisiones de compra con conocimiento de causa, sino que también enriquece el contenido con ricosOptimización de motores de búsqueda(SEO).

El papel de los atributos

La función de atributos de WooCommerce es muy flexible y puede ayudar a definir varias características de un producto. Por ejemplo, un producto de ropa puede tener atributos como color y talla, mientras que un producto de hogar puede necesitar incluir detalles como material, peso, tamaño, etc. Una vez definidos estos atributos, aparecerán automáticamente en la página del producto en la sección "Información adicional".

Cómo añadir información adicional a los productos de WooCommerce

Método 1: Utilizar las funciones integradas de WooCommerce

WooCommerce proporciona una forma sencilla y directa de añadir información adicional a las páginas de producto. A continuación se indican los pasos para añadir atributos de producto utilizando la funcionalidad integrada de WooCommerce:

1. Inicie sesión en el backend de WooCommerceNavegue hasta el panel de control de WordPress y haga clic en "ofertas".

2. Seleccionar producto: Busque el producto que desea editar y haga clic en Editar para acceder a la página de edición del producto.
3. Busque la sección "Datos del producto".: Debajo de la descripción principal, encontrará el formulario de datos del producto, en el que deberá seleccionar "causalidad"Opciones.

3. Añadir propiedades: pulse "aumentar", puede definir nuevos atributos para el producto, como "color","tallas"etc.
   • Introduzca un nombre para la propiedad en el campo Nombre de la propiedad.
   • Utilice líneas verticales para separar diferentes valores de atributos, como "Rosa | Azul | Verde".

4. Guardar propiedades: Marque "visible en la página del producto"opciones (como en la configuración de programas informáticos)para garantizar que estos atributos se muestren en la página de producto del front-end en el campo "Información adicional".

5. Productos actualizados: pulse "actualización" para guardar los cambios en el producto.

Siguiendo estos pasos, es fácil añadir la información adicional necesaria a su producto WooCommerce, y esta información se muestra automáticamente en la página del producto en el "Información adicional".

Método 2: Uso de plug-ins (Advanced Custom Fields - ACF)

Si las propiedades integradas de WooCommerce no satisfacen sus necesidades, puede utilizar la propiedadplug-in (componente de software)para ampliar la funcionalidad de la página del producto. Por ejemplo, "Campos personalizados avanzados (ACF)"El plugin le permite añadir y mostrar fácilmente más campos personalizados para ayudarle a mostrar información más detallada del producto. Aquí están los pasos exactos:

1. Instalación del complemento ACFBusque en el repositorio de plugins de WordPress "Campos personalizados avanzados", luego haga clic en Instalar y active el plugin.

2. Creación de grupos de camposNavegue por el panel de control de WordPress hasta "ACF"menú, haga clic en "Añadir nuevo grupo de campos".

3. Definición de camposCrear nuevos campos personalizados, como texto, imágenes, áreas de texto, etc., y para cada campochristen. Por ejemplo, puede añadir "makings","Instrucciones de mantenimiento" y otros ámbitos.

4. Establecer reglas de visualizaciónDesplácese hasta "establecer", seleccione en qué páginas de productos desea mostrar estos campos personalizados, ya sea para todos los productos o condicionalmente en función de categorías, etiquetas, etc.

5. Mostrar en la página del productoEn la página de edición del producto, verá los campos personalizados y podrá rellenar la información.

6. Modificar plantillas de productosPara que estos campos personalizados se muestren en la parte frontal de la página del producto, es necesario editar el campo Archivos de plantilla para WooCommercePor ejemploproducto-único.phpy utilizar elel_campo()para mostrar campos personalizados.

Método 3: Utilizar código personalizado

Si prefieres personalizar las páginas de producto de WooCommerce manualmente, también puedes hacerlo añadiendo lo siguiente a la carpeta del temafunciones.phppara agregar código personalizado para lograr esto. A continuación se muestran los pasos básicos para añadir campos personalizados a su producto WooCommerce:

1. Añadir campos personalizados a los productos de WooCommerce hacer uso deadd_action()añade un nuevo campo personalizado a la página de edición de productos de WooCommerce.

<code>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' => __( 'Campos personalizados del producto', 'woocommerce' ), 'desc_tip' => 'true', ' description' => __( 'Introduzca el contenido del campo personalizado', 'woocommerce' ) )); }</code>
<code>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' => __( 'Campos personalizados del producto', 'woocommerce' ), 'desc_tip' => 'true', ' description' => __( 'Introduzca el contenido del campo personalizado', 'woocommerce' ) )); }</code>
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' => __( 'Campos personalizados del producto', 'woocommerce' ), 'desc_tip' => 'true', ' description' => __( 'Introduzca el contenido del campo personalizado', 'woocommerce' ) )); }
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' => __( 'Campos personalizados del producto', 'woocommerce' ), 'desc_tip' => 'true', ' description' => __( 'Introduzca el contenido del campo personalizado', 'woocommerce' ) )); }
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' => __( 'Campos personalizados del producto', 'woocommerce' ), 'desc_tip' => 'true', ' description' => __( 'Introduzca el contenido del campo personalizado', 'woocommerce' ) )); }

2. Guardar el valor de un campo personalizado pasar (una factura o inspección, etc.)woocommerce_process_product_metaLos ganchos guardan los valores de los campos personalizados.

<code>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 ); }</code>
<code>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 ); }</code>
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 ); }
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 ); }
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 ); }

3. Mostrar campos personalizados Edite la plantilla de la página de producto de WooCommerce utilizando el botónget_post_meta()para mostrar el valor de un campo personalizado.

<code>echo '<div class="custom-field">'; echo '<label>Campos personalizados:</label> '; echo get_post_meta( get_the_ID(), '_custom_product_text_field', true ); echo '</div>';
<code>echo '<div class="custom-field">'; echo '<label>Campos personalizados:</label> '; echo get_post_meta( get_the_ID(), '_custom_product_text_field', true ); echo '</div>';
<code>echo '<div class="custom-field">'; echo '<label>Campos personalizados:</label> '; echo get_post_meta( get_the_ID(), '_custom_product_text_field', true ); echo '</div>';

Cómo gestionar WooCommerce "Información adicional" ficha

La pestaña Información adicional en WooCommerce es muy útil para mostrar detalles del producto. Sin embargo, hay ocasiones en las que puede necesitar ajustar cómo se muestra esta pestaña, qué dice, o incluso eliminarla. Estas son algunas acciones comunes:

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

Si desea añadir algún enlace o texto personalizado a la pestaña Información adicional, puede hacerlo en la opciónfunciones.phpEl siguiente código se inserta en el archivo:

<code>add_action( 'woocommerce_product_informacion_adicional', 'print_custom_html' );
function imprimir_html_personalizado() {
    echo '<a href="#">Haga clic aquí para obtener más información sobre el producto</a>';
}
<code>add_action( 'woocommerce_product_informacion_adicional', 'print_custom_html' );
function imprimir_html_personalizado() {
    echo '<a href="#">Haga clic aquí para obtener más información sobre el producto</a>';
}
<code>add_action( 'woocommerce_product_informacion_adicional', 'print_custom_html' );
function imprimir_html_personalizado() {
    echo '<a href="#">Haga clic aquí para obtener más información sobre el producto</a>';
}
<span style="background-color: rgba(0, 0, 0, 0.07); font-family: inherit; font-size: 0.9em; color: initial;"></span>
<span style="background-color: rgba(0, 0, 0, 0.07); font-family: inherit; font-size: 0.9em; color: initial;"></span>

El código se encontrará en la sección "Información adicional"para añadir un enlace en el que se pueda hacer clic, con la posibilidad de personalizar el texto del enlace y la URL de destino según sea necesario.

Ocultar o eliminar"Información adicional" ficha

Si no es necesario mostrar información adicional para determinados productos (por ejemplo, productos digitales), puede optar por ocultar o eliminar la pestaña por completo:

• Elimina la pestaña de Información Adicional usando PHP:

<code>add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['información_adicional'] );
    return $tabs.
}
</code>
<code>add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['información_adicional'] );
    return $tabs.
}
</code>
add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['información_adicional'] );
    return $tabs.
}
add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['información_adicional'] );
    return $tabs.
}
add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['información_adicional'] );
    return $tabs.
}

• Utilice CSS para ocultar la pestaña Información adicional:

<code>li.ficha_informacion_adicional {
    display: none !important;
}
</code>
<code>li.ficha_informacion_adicional {
    display: none !important;
}
</code>
li.ficha_informacion_adicional {
    display: none !important;
}
li.ficha_informacion_adicional {
    display: none !important;
}
li.ficha_informacion_adicional {
    display: none !important;
}

alcanzar un veredicto

Si añades información adicional a las páginas de producto de WooCommerce, podrás ofrecer a tus clientes información más detallada sobre el producto, mejorar la experiencia del usuario e impulsar el rendimiento SEO de tus páginas de producto. Tanto si utilizas las funciones integradas de WooCommerce como ajustes avanzados a través de plugins y código personalizado, puedes ayudar a optimizar la visualización de tus productos según las necesidades de tu tienda.