将 woocommerce-loop-product__title 从 H2 更改为 H6 [英] Change woocommerce-loop-product__title From H2 to H6

问题描述

我正在尝试将 Woocommercewoocommerce-loop-product__title"从 H2 更改为 H6，但我在定位该功能时遇到了一些麻烦.

I'm trying to change the Woocommerce "woocommerce-loop-product__title" from a H2 to a H6 but I'm having some trouble locating the function.

谁能就插件文件中的位置提出建议，或者更好的是如何在主题functions.php文件中覆盖它?

Can anyone advise on the location in the plugin files or better yet how to override it in the themes functions.php file?

谢谢

推荐答案

有两种方法可以做到这一点 - 使用钩子，或者覆盖子主题中的 WooCommerce 模板文件.首先，让我们找到代码.

There are two ways of doing this - with hooks, or by overriding the WooCommerce template file in your Child theme. First, let's find the code.

您要查找的文件位于 WooCommerce 插件中:

The file you're looking for is in the WooCommerce plugin:

templates/content-product.php

该文件的第 5 行说:

Line 5 of this file says:

 This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.

让我们先看看文件覆盖.

Let's look at the file override first.

方法 1 - 文件覆盖

将 templates/content-product.php 从 WooCommerce 插件复制到子主题内的 woocommerce/content-product.php.此文件现在覆盖插件中的模板.我们对这个新文件进行了所需的编辑.

Copy templates/content-product.php from the WooCommerce plugin to woocommerce/content-product.php inside your Child theme. This file is now overriding the template in the plugin. We make our desired edits to this new file.

默认content-product.php模板文件中的标题是这样输出的:

The title in the default content-product.php template file is outputted like this:

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

在 WooCommerce 文件 includes/wc-template-functions.php 中定义.

which is defined in the WooCommerce file includes/wc-template-functions.php.

如果你搜索woocommerce_template_loop_product_title()，你会看到定义的函数:

If you search for woocommerce_template_loop_product_title(), you will see the function defined:

if ( ! function_exists( 'woocommerce_template_loop_product_title' ) ) {

    /**
     * Show the product title in the product loop. By default this is an H2.
     */
    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>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    }
}

content-product.php 文件中的这行代码:

This line of code in the content-product.php file:

do_action( 'woocommerce_shop_loop_item_title' );

调用函数 woocommerce_template_loop_product_title 这是我们想要覆盖的函数.因此，让我们注释掉该行，并将其替换为您的代码:

calls the function woocommerce_template_loop_product_title which is the function we want to override. So let's comment out that line, and replace it with your code:

// do_action( 'woocommerce_shop_loop_item_title' );
echo '<h6 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h6>';

简单！

方法 2 - 使用钩子

另一个选项是从 woocommerce_shop_loop_item_title 钩子中取消删除 woocommerce_template_loop_product_title 函数并将其替换为我们自己的函数.您可以通过将以下代码添加到您的 functions.php 文件中来实现:

The other option is to unhook the remove the woocommerce_template_loop_product_title function from the woocommerce_shop_loop_item_title hook and replace it with our own function. You can do this by adding the following code to your functions.php file:

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
add_action('woocommerce_shop_loop_item_title', 'soChangeProductsTitle', 10 );
function soChangeProductsTitle() {
    echo '<h6 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h6>';
}

这篇关于将 woocommerce-loop-product__title 从 H2 更改为 H6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！