GoPymes's Blog

Personalizar content-single-product.php en Woocommerce 2.1.X

ecommerce

Recuerden que para personalizar las pantallas de Woocommerce, deben copiar los files dentro de /wp-content/plugins/woocommerce/template/ a tu theme actual, y ahí podrás modificarlos a tu gusto.

En nuestro content-single-product.php tenemos el sgte código :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<?php global $post, $product, $woocommerce; ?>

<?php
/**
* woocommerce_before_single_product hook
*
* @hooked woocommerce_show_messages - 10
*/
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
echo get_the_password_form();
return;
}
?>

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
<div class="summary entry-summary">

<?php
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div><!-- .summary -->
</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<?php
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
</div>
</div><!-- #product-<?php the_ID(); ?> -->

<?php do_action( 'woocommerce_after_single_product' ); ?>

Como ves todo se maneja con hooks, y cada uno de estos, llama a diferentes funciones con diferentes prioridades. Por ejemplo, el hook woocommerce_single_product_summary es el encargado de mostrar el título del producto, el precio, la descripción corta, el boton para agregar carrito de compras, las etiquetas meta y los links para compartir. Sin embargo, si queremos quitar o mover algunas de estas funciones podemos hacerlo usando las sintaxis del hook.

Basándonos en este pedazo de código lanzaremos ejemplos:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
?>

 

Ejemplo 1: No queremos mostrar la descripción corta

1
<?php remove_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',20); ?>

 

Ejemplo 2: Queremos que la descripción corta salga antes que el precio.

1
2
3
4
<?php
remove_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',20);
add_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',8);
?>

Explicación: Removemos el hook que contiene la descripción corta y luego la volvemos a poner con otra prioridad, es decir como el título tiene prioridad 5 y el precio tiene 10, la prioridad de la descripción corta debe ser comprendido entre esos 2 valores si quiero que salga en medio de ellos.

 

Ejemplo 3: Quiero agregar un texto al costado del precio.

1
2
3
4
5
6
7
<?php
add_action('woocommerce_single_product_summary','go_add_text',15);

function go_add_text() {
echo '<div class="pull">Este texto aparecerá al costado del precio</div>';
}
?>

Explicación: Basándonos en el mismo principio del ejemplo 2, esta vez creamos nuestra propia función y le damos prioridad 15, ya que queremos que aparezca al costado del precio, debemos darle un valor mayor a la prioridad del precio.

 

Recuerda que : todas estas funciones debes colocarlo en tu functions.php de tu theme actual

Comments 17

  1. Carlos Mercado says:

    Muchas gracias por la información, ha sido de gran utilidad para mi, exitos

  2. Gustavo says:

    Excelente tu post y muy claro. Tengo una duda y no le encuentro la vuelta. Necesito poner el título y el precio en la misma línea, es decir uno al costado de otro en una misma linea en el archivo que arma los loops de productos ara poner en el HOME por ejemplo. No lo puedo manejarlo con CSS porque estan encabezados por la clase clearfix. Copio, sin el enlace, como es la estrura que muestra esa partecita que digo

    <div class="product-details">

    <div class="product-details-container" style="width: 220px;">

    <h3 class="product-title"></h3>

    <div class="clearfix">

    <span class="price" style="margin-top: 35px;"><span class="amount">3€</span></span>

    </div>

    </div>

    </div>

    Si me pudieras tirar alguna idea te agradecería mucho. Saludos!

  3. clara says:

    muy interesante el post!! solamente una duda, y podría añadir también los atributos, lo he intentado pero no se muy bien cuál es el hook que maneja los atributos del producto!!

    y otra duda: si ya modifico el content-single-product.php, ¿tengo que modificar tmbién functions.php? si es asi, que tendría que añadir? el add_action que haya añadido por ejemplo en el content-single-product?

  4. Borja says:

    Excelente post, si señor!! Te comento me estoy introduciendo en el mundo de woocommerce porque siempre he utilizado prestashop, pero un cliente quiere trabajar con woocommerce y hay que adaptarse, y está bien porque así aprendes. Te comento, estoy montando una web para vender tela por internet en el reino unido. El problema es el siguiente a parte del producto tengo la opción de vender una muestra. Lo he intentado hacer por combinaciones pero no me gusta como queda, entonces me gustaría poner debajo del botón add to cart que ponga order sample, La relación que tienen el producto con su muestra es que tiene el mismo SKU pero se le añade o "M" o "-M". Estamos aún en duda. Otra forma sería meterlo con un shortcode en una pestaña o tab nueva. y por último meterlo en la columan derecha en la página de cada producto con un botón que ponga ORDER SAMPLE. La primera opción es la más limpia e interesante, las otras dos opciones sería meterlo en linked products o productos relacionados y buscar algún shortcode para añadirlo. Si me puedes echar un cable.

  5. Estimado Alexander
    Me ha encantado el post, porque es precisamente lo que estaba buscando, pero tengo una duda.
    ¿Cómo puedo hacer para insertar un hook nuevo entre "las pestañas del producto" y "los productos relacionados"
    /**
    * woocommerce_after_single_product_summary hook
    *
    * @hooked woocommerce_output_product_data_tabs – 10
    * @hooked NUEVO
    * @hooked woocommerce_output_related_products – 20
    */
    Gracias de ante mano por tu ayuda.

  6. elda says:

    Hola,

    Tengo una duda que no logro resolver. A ver si alguien me puede ayudar, le estaré muy agradecida.
    En el catálogo de productos aparece un cuadro gris encima de la imagen de cada producto , donde pone “select options” o “add to cart”. Lo quiero quitar, para que solamente se vean las fotos de producto. Una vez dentro de cada producto ya se pueden elegir las opciones y añadir al carro. Lo conseguí quitar pero me apareció de nuevo cuando actualicé el theme.

    Muchas gracias!

    1. elda says:

      Por cierto, el link de la web donde ocurre esto es el siguiente:
      http://www.eldasign.com/product-category/rings/

      Y mi mail es eldasign@gmail.com

      Muchas gracias.

  7. jorge says:

    Hola muchas gracias por el post me ayuda mucho pero quisiera saber si me puedes ayudar con una duda que tengo:

    crees que pudiera cambiar el nombre de unos de los elementos de
    * @hooked woocommerce_template_single_meta
    por otro nombre en el caso especifico de “Etiqueta:” y yo lo quisiera cambiar por otra cosa digamos promoción

    1. Alexander says:

      Buen día Jorge, no entiendo el motivo por el que quieras cambiar de nombre, creo que lo mejor es crear un nuevo hook con el nombre que quieras.

      Si me lo explicas mejor.

      Saludos

  8. Enrique says:

    Estoy iniciándome en manejo de templates de wordpress y al mismo tiempo en woocommerce. ¿Este tutorial me puede ayudar a iniciar en la creación de un template para página de detalle de producto? o me recomiendan ver otro diferente

    1. Alexander says:

      Buen día Enrique. Por su puesto que te sirve en el caso de detalle del producto, pronto estaremos publicando más temas al respecto.

      Saludos

  9. Francisco says:

    Buenas noches una pregunta deseo quitar el siguiente codigo de la pagina de woocommerce:

    3615 Home/Seguridad

    Ya q no quiero que me muestre ningun link ni sobre nombre de cada categoria. La verdad es que no se si esto se pueda hacer, modificar el codigo html de la tienda

    1. Alexander says:

      Hola Francisco.
      Lo siento no entendí tu pregunta, que quiere decir 3615 /home/Seguridad ? un breadcumb?

      Me comentas

  10. Miguel says:

    buenas tardes, una duda, tengo un tema que x defecto, tiene en el lado derecho “descripción corta del producto” y también “descripción del producto” los 2 ubicados debajo del titulo. precio, añadir al carrito etc, mi pregunta es, si se puede pasar la “descripción” al otro lado, debajo de la imagen, como lo tienen otras plantillas, espero pronta respuesta, gracias anticipadamente.

    1. Alexander says:

      Miguel que tal, es un poco complicado darte una respuesta sin ninguna imágen o algún código que lo acompañe.

      Te recomiendo el grupo de WPPeru donde también esta mi equipo, y podremos ayudarte: https://www.facebook.com/groups/wpperu/?fref=ts

Leave a Reply

Your email address will not be published. Required fields are marked *