Cómo crear pestañas personalizadas de productos WooCommerce

How to Create Custom WooCommerce Product Tabs

Los clientes de su tienda online necesitan información: cuanta más, mejor. Gracias a la actual solución de comercio electrónico WooCommerce para WordPress ya puedes añadir información adicional a tus productos. Además de los elementos estándar como el nombre, el precio, la imagen o una breve descripción, puede añadir hasta 3 fichas de producto estándar:

  1. Pestaña de descripción que incluye la descripción larga del producto
  2. Información adicional sobre los atributos de su producto
  3. Reseñas muestra las reseñas de los clientes sobre su producto

Pero qué pasa si necesitas más pestañas personalizadas de productos WooCommerce? Entonces tiene dos opciones. O bien eres capaz de programar en PHP y desarrollar algún código, que puedes colocar en tus funciones.php de su tema hijo. O te consigues un plugin para WooCommerce que te permite crear pestañas a tu gusto sin programación a medida. Le mostramos cómo puede añadir fichas de producto personalizadas de ambas formas.

Añadir pestañas personalizadas con PHP

Si estás familiarizado con PHP y WordPress puedes desarrollar tu propia solución para añadir pestañas personalizadas a tus productos. Simplemente configure un tema hijo si no tiene uno, luego vaya a sus funciones.php e iniciar el trabajo. The WooCommerce core offers a custom filter hook to add own tabs with the namewoocommerce_product_tabs. Puedes engancharte a este filtro con facilidad.Como ejemplo vamos a añadir una nueva pestaña llamada “Envíos y plazos de entrega”. Con esto queremos dar al cliente más información sobre el proceso de envío como cuándo llega mi paquete o qué empresas de transporte se utilizan.Empezamos por conectarnos al filtro:add_filter( ‘woocommerce_product_tabs’, ‘my_shipping_tab’ );function mi_pestaña_envío( $pestañas ) { // Añade la nueva pestaña $tabs=array( ‘title’ => __( ‘Envío y entrega’, ‘child-theme’ ), prioridad’ => 50, ‘callback’ => ‘my_shipping_tab_callback’ ); devolver $tabs;}Lo más importante es el título, la prioridad y la función callback. Si desea cambiar la posición de la pestaña, e.g. haz que sea la primera pestaña, cambia la prioridad a 1. La devolución de llamada es la función que definimos ahora. Devuelve el contenido de la pestaña:function my_shipping_tab_callback() {// El contenido de la nueva pestañaecho ‘

Shipping & Delivery

‘;echo ‘

We ship for free within USA using UPS.

‘;}Eso es todo – ahora cada producto contiene esta ficha. También puedes eliminar pestañas o cambiar el nombre de las existentes.Pero, ¿y si necesitas pestañas de WooCommerce específicas para un producto o una categoría? Por ejemplo, necesita mostrar una guía de tallas, pero sólo para los productos de la categoría “ropa”. Entonces deberías tomar un plugin!

Crear pestañas de categoría de WooCommerce

Gracias al plugin WooCommerce Ultimate Custom Product Tabs podrás crear pestañas a tu gusto:

  • Crear pestañas específicas personalizadas
  • Añadir pestañas sólo para categorías
  • Mostrar fichas de productos globales
  • Colocar un icono delante de las pestañas
  • Añade estilo y mucho más

Éstas son sólo algunas de las características más importantes que ofrece este plugin para una gestión óptima de las fichas de producto. Tomemos el ejemplo anterior de cómo crear una pestaña específica de una categoría. Entra en wp-admin > WooCommerce > Ultimate Tabs. Allí se activa 1. por ejemplo, añada un título, contenido y prioridad a la pestaña. Luego viene la parte de la solicitud. Aquí puedes establecer dónde quieres que aparezca esta pestaña en.Y eso es todo. Ahora la pestaña sólo se aplicará en la sección de sudaderas con capucha. ¿Qué más puede hacer este plugin? Puede renombrar, desactivar y reordenar las pestañas estándar. O puede desactivar la funcionalidad de la pestaña en absoluto.

Cómo desactivar la funcionalidad de la pestaña WooCommerce

A veces es mejor para Google SEO o para sus clientes en absoluto, que ven todo el contenido directamente. Así que sería bueno eliminar la función de tabulación para mostrar directamente la descripción, los datos técnicos y las reseñas. Si desea eliminar la funcionalidad del tabulador, añada este script personalizado:wp_dequeue_script( ‘wc-single-product’ );A continuación, añada este CSS personalizado para ocultar las pestañas de productos:.woocommerce-tabs ul.pestañas {mostrar: ninguno !importante;}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Popup

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Close Popup
Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

These cookies are necessary for the website to function and cannot be switched off in our systems.

Technical Cookies
In order to use this website we use the following technically required cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Decline all Services
Save
Accept all Services