woocommerce offtopic - wc_get_template_part( 'content', 'product' )

I seem to keep going in a loop trying to find an example / answer / resource on this.

I have built a custom WooCommerce homepage in /theme-name/woocommerce/archive-product.php where I use this snippet to output products:

$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>

The output is a ul filled with li's:

<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="diamond foil" 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">Diamond</h2>
    </a>

</li>

Where can I make amends to the layout of these li's created by this line:

wc_get_template_part( 'content', 'product' );

I have created a child theme folder WooCommerce and made the changes to archive-product.php in there.

Where can amends to this part wc_get_template_part( 'content', 'product' ); of the WooCommerce product loop be made?

EDIT (After comment response): I am now inside the content-product.php. But this then just has more WP actions such as

do_action( 'woocommerce_shop_loop_item_title' );

Now my question would be, where is this file edited - woocommerce_shop_loop_item_title?

Thanks to all contributors, Jason.

I seem to keep going in a loop trying to find an example / answer / resource on this.

I have built a custom WooCommerce homepage in /theme-name/woocommerce/archive-product.php where I use this snippet to output products:

$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>

The output is a ul filled with li's:

<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="diamond foil" 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">Diamond</h2>
    </a>

</li>

Where can I make amends to the layout of these li's created by this line:

wc_get_template_part( 'content', 'product' );

I have created a child theme folder WooCommerce and made the changes to archive-product.php in there.

Where can amends to this part wc_get_template_part( 'content', 'product' ); of the WooCommerce product loop be made?

EDIT (After comment response): I am now inside the content-product.php. But this then just has more WP actions such as

do_action( 'woocommerce_shop_loop_item_title' );

Now my question would be, where is this file edited - woocommerce_shop_loop_item_title?

Thanks to all contributors, Jason.

Share Improve this question edited Feb 10, 2020 at 9:13 asked Feb 6, 2020 at 16:18 Jason Is My Name 3782 gold badges7 silver badges21 bronze badges

2 /theme-name/woocommerce/content-product.php is the file you're looking for. if not there you can copy it from the /templates folder from woocommerce plugin dir. – Andrea Somovigo Commented Feb 6, 2020 at 16:55
This file then just has more links out to other template pieces. I want to be able to have the variables such as title. Then be able to change it to a h3 opposed to the current h2. Things like that c: – Jason Is My Name Commented Feb 7, 2020 at 10:20

Add a comment |

1 Answer 1

Sorted by: Reset to default 10

As mentioned in the comments, wc_get_template_part() tries to locate and load the requested template file.
These template files could be ether in the /woocommerce/ sub-directory of a child-theme, or defined in another third party plugin (with the help of woocommerce_locate_template filter hook). If none of these exists, WC loads the default template file from /plugins/woocommerce/templates/ directory.

Updated Question

WoocCommerce uses WordPress Plugin API to load template content. That's why there are plenty of do_action() functions in the template files. You can ( and probably should) use these action filters to manipulate the content. Overriding the whole template file should be the last choice (duo to best practices).
In this case content-product.php file contains this line:

do_action( 'woocommerce_before_shop_loop_item_title' );

Default content for all templates is defined in /plugins/woocommerce/includes/wc-template-hooks.php and for the title we have this:

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

In this case, woocommerce_template_loop_product_title function adds the HTML markups and the content to the title section and is located in this file: /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>';
}

You can ether use woocommerce_shop_loop_item_title to add extra HTML markups in the title part, or remove the default content and add your own:

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() . '</string></h3>';
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

woocommerce offtopic - wc_get_template_part( 'content', 'product' ) | Where is this file located

1 Answer 1

Updated Question

与本文相关的文章

评论列表(0)