4

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.

2
  • 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. 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: Feb 7, 2020 at 10:20

1 Answer 1

9

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>';
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.