Cambiar el orden del HTML de los productos en WooCommerce


La ficha del producto en WooCommerce se muestra en el fichero “single-products.php”, en el podemos ver la siguiente función:

/**
 * woocommerce_single_product_summary hook
 *
 * @hooked woocommerce_template_single_title - 5
 * @hooked woocommerce_template_single_rating - 10
 * @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' );

Esta función llama a todos los “templates” para formar la ficha del producto. Pero si queremos cambiar el orden en el que se muestran estos “hooks”, podemos hacerlo escribiendo las siguientes lineas en el fichero functions.php

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

Con esto modificamos la “prioridad” del template, eliminándolo primero y volviéndolo a agregar. En este caso lo que hemos hecho es que el “add_to_cart” vaya delante que el “excerpt”.

Si quisiéramos ahora por ejemplo poner el “meta” (etiquetas) justo abajo del add_to_cart haríamos lo siguiente:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 16 );
Etiquetas: , ,

You may also like

9 comentarios

  • jaime
    16 mayo, 2014 at 9:09 am

    Buenas días, muy buena información!

    Tengo una duda, y es si podría a la hora de ordenar mis productos en la tienda, la manera por defecto de verlos sería la “predeterminada” que en este caso sería por orden alfabético, la cuestión es si podría colocar los productos, de esa misma forma predeterminada, pero que fue en vez de alfabéticamente, la condición fuese, por ejemplo, el código de cada producto, y así poder tener más control de como visualizan los usuarios los productos de mi tienda.
    Un saludo!

    • Marcos Aguayo
      16 mayo, 2014 at 10:55 am

      Prueba porner esto en tu functions.php:

      add_filter(‘woocommerce_default_catalog_orderby’, ‘custom_default_catalog_orderby’);

      function custom_default_catalog_orderby() {
      return ‘date’; // Can also use title and price
      }

      Donde pone ‘date’ pon el campo por el que quieras ordenar.

      Saludos

  • JAIME
    16 mayo, 2014 at 2:47 pm

    gracias por contestar! he probado el código y deben de ir por ahí los tiros, porque cuando sustituyo ‘date’ por ‘price’ o ,’rating’ se ordena de esa manera, pero cuando utilizo el menu, luego vuelve a la manera predeterminada. El tema es que cuando pongo ‘sku’ no se me ordena por el código de producto, no sé si esa es la palabra que tengo que poner o si es porque no está definido en orderby.php como el resto de alternativas del menu_order;

    $catalog_orderby = apply_filters( ‘woocommerce_catalog_orderby’, array(
    ‘menu_order’ => __( ‘Default sorting’, ‘woocommerce’ ),
    ‘popularity’ => __( ‘Sort by popularity’, ‘woocommerce’ ),
    ‘rating’ => __( ‘Sort by average rating’, ‘woocommerce’ ),
    ‘date’ => __( ‘Sort by newness’, ‘woocommerce’ ),
    ‘price’ => __( ‘Sort by price: low to high’, ‘woocommerce’ ),
    ‘price-desc’ => __( ‘Sort by price: high to low’, ‘woocommerce’ )
    ) );

    No sé si tendrá que ver esta última parte.

    Un saludo y gracias-!

  • Gustavo
    3 diciembre, 2014 at 4:10 pm

    Hola Marcos, después de buscar mucho en google..creo que tu podrías darme alguna pista…
    Estoy empezando con woo y estoy armando una pequeña web de reservas y tengo el siguiente problema:
    he añadido un plugin de reserva que se integra con woocommerce mediante un atributo…ahora bien intento diseñar la pagina de producto con un page builder..pero cuando agrego un producto lo pone al principio y todo lo que diseñe con el page builder abajo..el diseño queda horrible en todos los aspectos y no se como empezar a organizar el layout..me darías una pista? muchas gracias…

  • Dies Arzola
    30 enero, 2015 at 4:52 pm

    Hola, que buena info!! Muy útil para los que somos nuevos en woocommerce.

    Te tengo otra duda. Quiero editar la manera en que se muestran los productos en tienda. Primero me gustaría que mostrara el excerpt y segundo poder acomodar la información del producto de manera horizontal (foto-descripcion-precio), es decir un producto debajo del otro.
    Saludos!

  • gonzalo
    28 marzo, 2015 at 8:12 am

    hola
    Que bueno.
    Te agradecería si me facilitas esta información:
    Cual es el hook para las imágenes?
    A qué corresponde el hook single_sharing?
    Muchas gracias por adelantado

  • Armando
    30 junio, 2015 at 4:41 pm

    Me funciono a la perfección, pero también quisiera poder modificar como se ve el orden de mi producto, es decir:
    ———————————————–
    Ficha del producto
    IMAGEN
    Descripción
    ———————————————–
    No como se muestra por el momento que es
    ———————————————–
    Ficha del producto
    IMAGEN

    Descripción
    ———————————————–
    Quisiera ver si podrían ayudarme ya tengo unos cuantos días y lo e acomodado mediante CSS pero quisiera ver si se tiene algún plugin o modificando el código.

    De antemano agradezco su ayuda!!!!!

  • Armando
    30 junio, 2015 at 4:45 pm

    IMAGEN Ficha del producto
    IMAGEN Descripción

  • eduardo
    29 febrero, 2016 at 10:52 am

    ¿como elimino el enlace “volver a categoría”? está situado en la parte superior derecha.

LEAVE A COMMENT