Cómo cambiar los colores de las pestañas de la página del producto del tema Storefront

Publicado: 2020-10-29

Colores de las pestañas de la página del producto del escaparate WooCommerce tiene más de 5 millones de instalaciones activas en el repositorio de WordPress. WooCommerce es una solución de comercio electrónico increíblemente popular para WordPress. La mayoría de las personas construyen sus tiendas en línea con WooCommerce, principalmente por su flexibilidad y facilidad de personalización.

WooCommerce tiene muchas extensiones, que cubren casi todas las características o funcionalidades que pueda necesitar. Sin embargo, algunos de ellos cuestan dinero, pero aun así hacen el trabajo. Puede personalizar fácilmente usted mismo usando acciones.

Colores de las pestañas de la página del producto del escaparate

En este tutorial, voy a cambiar el color de las pestañas de la página del producto. Además, usaré para agregar y editar las pestañas de productos de WooCommerce.

Si está familiarizado con WooCommerce, sabe que WooCommerce admite tres pestañas. Estas pestañas son:

Descripción
información adicional
Reseñas

Así es como los muestra el tema Storefront: Pestañas de productos

Pasos para cambiar el color de las pestañas de la página del producto WooCommerce

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú Panel de control, haga clic en Menú de apariencia > Personalizar .
Navega hacia abajo hasta CSS adicional en la barra lateral izquierda que aparece.
Agregue la regla CSS.

 .woocommerce div.producto .woocommerce-tabs ul.tabs li.active

{

color de fondo:#a02fa4 !importante;

color: blanco !importante;

}

Este será el resultado:

Este código cambia el color de la pestaña que está activa.

Además, voy a compartir algunos fragmentos para personalizar esta sección.

Pasos para agregar pestañas de productos personalizadas de WooCommerce Storefront

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para agregar una pestaña de producto personalizada de WooCommerce.
Agrega el siguiente código al archivo functions.php:

 add_filter('woocommerce_product_tabs', 'njengah_new_product_tab');

function njengah_new_product_tab ($ pestañas) {

// Agregar la nueva pestaña

$tabs['test_tab'] = array(

'título' => __( 'Descuento', 'dominio de texto' ),

'prioridad' => 50,

'devolución de llamada' => 'njengah_new_product_tab_content'

);

devolver $pestañas;

}




función njengah_nuevo_producto_tab_content() {

// El contenido de la nueva pestaña

echo 'Descuento';

echo 'Aquí está la pestaña de su nuevo producto con descuento.';

}

Este será el resultado:

Pasos para eliminar las pestañas de productos de WooCommerce Storefront

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para eliminar las pestañas de productos de WooCommerce Storefront.
Agrega el siguiente código al archivo functions.php:

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

función njengah_remove_product_tabs ($ pestañas) {

unset( $tabs['descripción'] ); // Elimina la pestaña de descripción

unset( $pestañas['revisiones'] ); // Eliminar la pestaña de reseñas

unset( $tabs['informacion_adicional'] ); // Eliminar la pestaña de información adicional

unset( $tabs['test_tab'] ); // Eliminar la pestaña de descuento

devolver $pestañas;

}

Este será el resultado:

Pasos para cambiar el nombre de las pestañas de productos de WooCommerce Storefront

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para cambiar el nombre de las pestañas de productos de WooCommerce Storefront.
Agrega el siguiente código al archivo functions.php:

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

función njengah_rename_tabs ($ pestañas) {

$tabs['descripción']['título'] = __( 'Más información', 'dominio de texto' ); // Cambiar el nombre de la pestaña de descripción

$tabs['reviews']['title'] = __( 'Calificaciones', 'text-domain' ); // Cambiar el nombre de la pestaña de reseñas

$tabs['información_adicional']['título'] = __( 'Datos del producto', 'dominio de texto' ); // Cambiar el nombre de la pestaña de información adicional

$tabs['test_tab']['title'] = __( 'Comisión', 'text-domain' ); // Cambiar el nombre de la pestaña de descuento

devolver $pestañas;

}

Este será el resultado:

Pasos para reordenar las pestañas de productos de WooCommerce

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para reordenar las pestañas de productos de WooCommerce.
Agrega el siguiente código al archivo functions.php:

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

función njengah_reorder_tabs ($ pestañas) {

$tabs['reseñas']['prioridad'] = 5; // Reseñas primero

$tabs['descripción']['prioridad'] = 15; // Descripcion tercera

$tabs['información_adicional']['prioridad'] = 20; // Información adicional cuarta

devolver $pestañas;

}

Este será el resultado:

Conclusión

Esta publicación ha compartido cómo cambiar el color de las pestañas de productos activos en la página de un solo producto. Además, he compartido algunos fragmentos de código que puede usar para personalizar esta sección. He ilustrado cómo puede agregar o eliminar pestañas de productos. Además, he demostrado cómo cambiar el nombre y reordenar las pestañas de productos de WooCommerce Storefront.