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 WooCommerce’s 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
For example, if you sell apparel, customers may want to know about color, size, and fabric. By setting these attributes, WooCommerce automatically displays them under the “Información adicional” tab on the product page, allowing users to access essential details quickly. This functionality enables better product comparison for users and improves the page’s SEO performance by adding relevant content.
Method 1: Adding Additional Information Using WooCommerce’s Built-In Features
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
Navigate to the WordPress dashboard, click “Productos,” and select the product for which you want to add additional information.
Step 2: Locate the “Product Data” Section
In the product editor, scroll down to the “Datos del producto” panel, and select the “Atributos” tab.
Paso 3: Añadir atributos
Click the “Añadir nuevo” button to define new attributes such as “Color" o "Talla."
- Enter the attribute name, for example, “Color."
- Separate attribute values with a vertical bar (|), such as “Red | Blue | Green.”
Paso 4: Establezca la visibilidad de los atributos
Check the “Visible on the product page” option to ensure these attributes appear under the “Additional Information” tab on the product page.
Paso 5: Guardar y actualizar el producto
Click the “Actualización” button to save your changes. Once saved, the “Additional Information” tab on the product page will automatically display these attributes.
Ejemplo
If you’re selling a T-shirt that comes in three colors (Red, Blue, Green) and three sizes (S, M, L), you can set the “Color” attribute to “Red | Blue | Green” and the “Size” attribute to “S | M | L.” When the “Visible on the product page” option is checked, customers will see these options under the “Additional Information” tab.
Método 2: Añadir información adicional utilizando el plugin de campos personalizados seguros (SCF)
While WooCommerce’s built-in attributes are helpful, more is needed for certain needs. With the 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
Go to “Plugins” in the WordPress dashboard, search for “Campos personalizados seguros,” and click “Install” and “Activate.”
Paso 2: Crear un grupo de campos
Go to “SCF” from the WordPress dashboard and select “Add New Field Group.” This allows you to define custom fields for your products.
Paso 3: Definir campos
Within the field group, add new fields such as “Material" o "Instrucciones de cuidado.” Choose field types like text, text area, or image as needed.
Here’s a breakdown of some common field types:
- Texto: This field is ideal for short, single-line inputs. For example, you might use it for a “Material” field if you only need to list one or two materials, such as “100% Cotton” or “Stainless Steel.”
- Área de texto: This is useful for longer descriptions. You might use it for “Care Instructions,” where you can provide detailed washing or handling information, like “Hand wash only. Do not tumble dry.”
- Imagen: This option allows you to add images. It could be used for fields like “Product Certification,” where you want to display a certification logo or quality seal.
Ejemplo:
Supongamos que vende muebles de madera y desea añadir los siguientes campos personalizados:
- Material—This could be a “Text” field to input specific wood types, such as “Oak” or “Maple.”
- Instrucciones de cuidado – Set this as a “Text Area” where you can detail care tips, such as “Wipe with a dry cloth. Avoid direct sunlight.”
- Logotipo de certificación – Use an “Image” field to upload a certification seal or eco-friendly badge.
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
In the “Settings” section, define the conditions under which these custom fields should be displayed on product pages. You can apply these fields to all products or specific categories, tags, or even individual products.
Paso 5: Introducir información en el editor de productos
Once the fields are defined and display rules are set, go to the WooCommerce product editor for any product that meets the criteria. You will now see the custom fields you’ve created and can enter relevant information for each one.
Paso 6: Modificar la plantilla del producto (Opcional)
To display these custom fields on the front end of the product page, you may need to edit WooCommerce’s template files (e.g., single-product.php). Use SCF’s the_field() function to output the field values like so:
<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
By adding code to your theme’s functions.php file, you can add fields directly to the WooCommerce product editing screen for more advanced customization.
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' => __( 'Custom Product Field', 'woocommerce' ),
'desc_tip' => 'true',
'description' => __( 'Enter custom field content', 'woocommerce' )
));
}Paso 2: Guardar el valor del campo personalizado
Use the woocommerce_process_product_meta hook to save the custom field’s 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 );
}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>';Managing the WooCommerce “Additional Information” Tab
The “Additional Information” tab in WooCommerce is useful for displaying detailed product attributes, but you may want to customize its content or even hide it in some instances.
Adding Custom Text to the “Additional Information” Tab
To add custom content, like a link, to the “Additional Information” tab, use the following code:
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>';
}Hiding or Removing the “Additional Information” Tab
If a product doesn’t require additional information (e.g., a digital product), you can remove this tab with the following code:
add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 );
function remove_additional_information_tab( $tabs ) {
unset( $tabs['additional_information'] );
return $tabs;
}Conclusión
Adding additional information to WooCommerce product pages enhances user experience and SEO. WooCommerce’s built-in features, plugins like Secure Custom Fields (SCF), and custom coding provide flexible options to enrich product pages with details like color, size, material, care instructions, and certifications.
- Uso de las funciones incorporadas: Quickly add attributes directly to the product editor, enhancing user experience by displaying essential details in the “Additional Information” tab.
- 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.
Managing the “Additional Information” tab allows you to add, modify, or remove content depending on product needs, ensuring your customers can access relevant information without unnecessary clutter. Overall, enriching WooCommerce product pages helps customers make informed purchasing decisions, increasing conversions while improving your site’s SEO.