wc_get_template_part( 'content', 'product' ) | ¿Dónde se encuentra este archivo?

6 feb 2020, 18:18:00
Vistas: 46.1K
Votos: 5

Parece que sigo dando vueltas tratando de encontrar un ejemplo / respuesta / recurso sobre esto.

He construido una página de inicio personalizada de WooCommerce en /theme-name/woocommerce/archive-product.php donde uso este fragmento para mostrar productos:

$display_count = 9;
$page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$offset = ( $page - 1 ) * $display_count;
$args = array(
    'post_type'         => 'product',
    'post_status'       => 'publish',
    'posts_per_page'    => $display_count,
    'page'              => $page,
    'offset'            => $offset,
    'orderby'           => 'menu_order',
    'order'             => 'ASC'
); ?>

<div class="homepage-content">

    <div class="product-list-contain">

        <?php
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) :

            // do_action( 'woocommerce_before_shop_loop' );

            woocommerce_product_loop_start(); ?>

            <div id="product-list">

                <?php
                while ( $loop->have_posts() ) :

                    $loop->the_post();

                    wc_get_template_part( 'content', 'product' );

                endwhile;
                ?>

            </div>

            <?php
            woocommerce_product_loop_end(); ?>

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

        <?php
        else :

            do_action( 'woocommerce_no_products_found' );

        endif; ?>

        <?php
        wp_reset_postdata(); ?>

    </div>

</div>

La salida es un ul lleno de elementos li:

<li class="product type-product post-2048 status-publish first instock product_cat-uncategorized product_tag-aesthetic product_tag-hard product_tag-thermoconductive has-post-thumbnail shipping-taxable product-type-simple">

    <a href="/example/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">

        <img width="300" height="300" src="/example.jpeg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="lámina de diamante" srcset="example.jpeg 300w, example.jpeg 150w, example.jpeg 100w, example.jpeg 80w" sizes="(max-width: 300px) 100vw, 300px">

        <h2 class="woocommerce-loop-product__title">Diamante</h2>
    </a>

</li>

¿Dónde puedo hacer modificaciones al diseño de estos elementos li creados por esta línea:

wc_get_template_part( 'content', 'product' );

He creado una carpeta de tema hijo WooCommerce y he realizado los cambios en archive-product.php allí.

¿Dónde se pueden hacer modificaciones a esta parte wc_get_template_part( 'content', 'product' ); del bucle de productos de WooCommerce?

EDICIÓN (Después de la respuesta en comentarios): Ahora estoy dentro de content-product.php. Pero esto solo tiene más acciones de WP como

do_action( 'woocommerce_shop_loop_item_title' );

Ahora mi pregunta sería, ¿dónde se edita este archivo - woocommerce_shop_loop_item_title?

Gracias a todos los contribuyentes, Jason.

2
Comentarios

/theme-name/woocommerce/content-product.php es el archivo que estás buscando. Si no está ahí, puedes copiarlo desde la carpeta /templates del directorio del plugin de WooCommerce.

Andrea Somovigo Andrea Somovigo
6 feb 2020 18:55:48

Este archivo luego simplemente tiene más enlaces a otras piezas de plantilla. Quiero poder tener las variables como el título. Luego poder cambiarlo a un h3 en lugar del h2 actual. Cosas como esa c:

Jason Is My Name Jason Is My Name
7 feb 2020 12:20:31
Todas las respuestas a la pregunta 1
0
10

Como se mencionó en los comentarios, wc_get_template_part() intenta localizar y cargar el archivo de plantilla solicitado.
Estos archivos de plantilla pueden estar en el subdirectorio /woocommerce/ de un tema hijo, o definidos en otro plugin de terceros (con la ayuda del gancho de filtro woocommerce_locate_template). Si ninguno de estos existe, WC carga el archivo de plantilla predeterminado desde el directorio /plugins/woocommerce/templates/.

Pregunta actualizada

WooCommerce utiliza la API de plugins de WordPress para cargar el contenido de las plantillas. Es por eso que hay muchas funciones do_action() en los archivos de plantilla. Puedes (y probablemente deberías) usar estos filtros de acción para manipular el contenido. Sobrescribir todo el archivo de plantilla debería ser la última opción (según las mejores prácticas).
En este caso, el archivo content-product.php contiene esta línea:

do_action( 'woocommerce_before_shop_loop_item_title' );

El contenido predeterminado para todas las plantillas se define en /plugins/woocommerce/includes/wc-template-hooks.php y para el título tenemos esto:

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

En este caso, la función woocommerce_template_loop_product_title agrega los marcados HTML y el contenido a la sección del título y se encuentra en este archivo: /plugins/woocommerce/includes/wc-template-functions.php

function woocommerce_template_loop_product_title() {
    echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2>';
}

Puedes usar woocommerce_shop_loop_item_title para agregar marcados HTML adicionales en la parte del título, o eliminar el contenido predeterminado y agregar el tuyo propio:

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
add_action( 'woocommerce_shop_loop_item_title', 'tst_your_function', 10 );

function tst_your_function() {
    echo '<h3 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '"><strong>' . get_the_title() . '</strong></h3>';
}
7 feb 2020 17:47:19