Avisos
Vaciar todo

cómo hacer que la sección en descripción, información adicional y valoraciones sólo se muestre al dar clic en la ficha del producto?  

 
Guillermo
 Guillermo
Estimable Member

Hola, buenos días,

Veréis, quiero que los campos de "Descripción", "Información Adicional" y "Valoraciones", de la ficha de los productos, sólo se muestre su contenido si doy clic en cada uno de ellos, de lo contrario no quiero que se muestre ningún texto, es decir, sólo se verán los nombres de las pestañas y, que sea el visitante, quien decida dar clic sobre cada pestaña si quiere ver el contenido. Es posible hacer esto y cómo puede hacerse?. Mi plantilla es Storefront con el tema hijo Child Theme Storefront.

Agradeciendo vuestra colaboración, les saludo atentamente.

Guillermo.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 13/11/2018 8:17 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Guillermo.

Veo que ya se muestra como tu indicas, por defecto descripción siempre se mostrara.
¿ Lo que quieres es que no muestre la descripción ? personalmente no lo haría ya que estas privando al usuario de una descripción de tu producto y puede confundir al cliente y privar de contenido para el SEO.

Una cosa que puedes hacer es mostrar las tablas en horizontal, para eso añade el siguiente código en el archivo style.css que encontraras en la carpeta del tema hijo:

.product .woocommerce-tabs ul.tabs {
	width: 100%;
	float: none;
	margin-right: 5.8823529412%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	padding: 0 0 0 1em;
	margin: 0 0 1.618em;
	overflow: hidden;
	position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	position: absolute;
	content: ' ';
	width: 100%;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #d3ced2;
	z-index: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 1px solid #d3ced2;
	background-color: #ebe9eb;
	display: inline-block;
	position: relative;
	z-index: 0;
	border-radius: 4px 4px 0 0;
	margin: 0 -5px;
	padding: 0 1em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #fff;
	z-index: 2;
	border-bottom-color: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	border: 1px solid #d3ced2;
	position: absolute;
	bottom: -1px;
	width: 0;
	height: 0;
	content: ' ';
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	left: -6px;
	border-bottom-right-radius: 4px;
	border-width: 0 1px 1px 0;
	box-shadow: 2px 2px 0 #ebe9eb;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
	box-shadow: 2px 2px 0 #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	right: -6px;
	border-bottom-left-radius: 4px;
	border-width: 0 0 1px 1px;
	box-shadow: -2px 2px 0 #ebe9eb;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	box-shadow: -2px 2px 0 #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: .5em 0;
	font-weight: 700;
	color: #515151;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: inherit;
	text-shadow: inherit;
}

Un saludo

ResponderCitar
Respondido : 13/11/2018 9:40 am

Cursos Gratuitos WordPress

Guillermo
 Guillermo
Estimable Member

Hola Pepe,

Muchas gracias por tu ayuda. Verás, es que la descripción a que hago referencia, es diferente a la que se muestra al lado del producto y que en realidad es la que más interesa al visitante, ya que en ella se muestran las características principales, el nombre de lo que está comprando, precio y, alguna información más. Sin embargo, en el campo de "Descripción" al que me refiero, se detallan otros aspectos, tales como, de qué material está hecho, quienes lo hacen, quiénes son, de qué país y pueblo es originaria dicha artesanía, etc.. Es por esto, que que estos campos sólo se muestren si el visitante da clic en cada uno de ellos, ya que si con la descripción e imagen de la parte es superior le motiva, pase luego a mirar el resto de información. Espero que me haya hecho entender. También lo quiero así, por dar un diseño más limpio en la ficha. Por lo tanto, te vuelvo a preguntar, es posible hacer que no se muestre la información en esos tres campos hasta que el visitante no dé clic en cada uno de ellos?. Muchas gracias por gran disposición.

Un Saludo.

Guillermo.

ResponderCitar
Respondido : 13/11/2018 9:55 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Guillermo.

Puedes eliminarlas o por ejemplo cambiar el orden, es decir que muestre primero por ejemplo la información adicional, pero siempre se mostrara información a no se que lo elimines.

Revisa lo siguiente:

-> https://docs.woocommerce.com/document/editing-product-data-tabs/

Un saludo

ResponderCitar
Respondido : 13/11/2018 10:43 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Guillermo
 Guillermo
Estimable Member

Hola Pepe,

Mira, como alternativa que me sugieres, quiero entonces que se muestre inicialmente la información del campo "Información Adicional", pero al aplicar el código para reordenar las pestañas, según las instrucciones del enlace que me has indicado, se genera un error, no sé si es porque no lo estoy colocando en la línea que corresponde, te describo a continuación las líneas del fichero funtions.php del tema hijo y dime por favor, debajo de cuál línea debo colocar el código. Gracias.

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
add_filter( 'woocommerce_get_breadcrumb', '__return_false' );
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

// END ENQUEUE PARENT ACTION

El error que me muestra es el siguiente:
syntax error, unexpected '/', expecting end of file

Quedo a la espera de tu respuesta.

Un saludo.

Guillermo.

ResponderCitar
Respondido : 13/11/2018 12:05 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Guillermo.

Añade lo siguiente al final del archivo fuctions.php:

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority'] = 10;			// Reviews first
	$tabs['description']['priority'] = 15;			// Description second
	$tabs['additional_information']['priority'] = 5;	// Additional information third

	return $tabs;
}

La ultima linea que tengas libre del archivo, lo añades tal cual lo tienes en el código que te pase.

ResponderCitar
Respondido : 13/11/2018 12:59 pm

Guillermo
 Guillermo
Estimable Member

Hola Pepe,

Ya he procedido a realizar tus indicaciones y ha funcionado perfectamente, muchas gracias, eres un crack.

Que tengas una excelente tarde.

Guillermo.

ResponderCitar
Respondido : 13/11/2018 3:47 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Guillermo.

Jejeje, Gracias amigo pero nosotros solo indicamos el camino, el trabajo lo realizas tu 😉
Ya sabes cualquier consulta que tengas nos encontraras por aquí 😉

Cerramos el tema.

Un saludo

ResponderCitar
Respondido : 13/11/2018 3:57 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress