WooCommerce：如何在价格和销售价格之前添加文本？

Posted 2023-03-06

【中文标题】WooCommerce：如何在价格和销售价格之前添加文本？

【英文标题】：WooCommerce: How do you add text before the price and before sale price?

【发布时间】：2014-05-04 10:38:25

【问题描述】：

我已经成功地让文本显示在价格之前和销售价格之前，但文本被认为是价格的一部分，而不是与之分开。

放置：

ins:before
  content: "Betty's price: ";
  color: #000;
  font-size: 14px;

在我的自定义 CSS 文件中成功地将“Betty 的价格：”放在新的“销售”价格之前。问题是Betty's Price: 现在带有下划线且可点击，并且它与价格文本位于同一链接中。

我试图将此文本插入价格之前，而不是价格的一部分。我也不希望此文本与价格一起格式化。

同样的情况也适用于原价：

del:before
  content: "Retail: ";
  color: #000;
  font-size: 14px;

PS：我还希望在“Betty's price”位之外添加一个新的行字符，以便该行可以低于零售价，如果这有什么改变的话。 p>

【参考方案1】：

方法一

您已安装 woocommerce 插件。为了覆盖 woocommerce 页面模板，您需要在主题文件夹中创建一个名为“woocommerce”的文件夹。转到您网站的“wp-content/plugins/templates”并将文件 content-product.php 复制到“wp-content/themes/your-theme/woocommerce/”。如果您的主题名为“mytheme”，您将拥有以下路径：“wp-content/themes/mytheme/woocommerce/content-product.php”。

您可以根据需要编辑文件 content-product.php。此文件是在类别页面上显示产品的文件。可以看到你的产品显示在一个

里面。

现在，content-product.php 看起来像这样：

<li <?php post_class( $classes ); ?>>

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

<a href="<?php the_permalink(); ?>">

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <h3><?php the_title(); ?></h3>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

</a>

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

</li>

你可以看到在标题后面包含了这个函数：do_action('woocommerce_after_shop_loop_item_title');

该函数定义在：plugins/woocommerce\includes\wc-template-hooks.php，所以我们不会触及它，我认为它是一个核心文件。您应该只编辑模板文件，因为如果插件有更新，您将失去您的设置。

所以我建议你用这个替换上面的代码：

<li <?php post_class( $classes ); ?>>

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

<a href="<?php the_permalink(); ?>">

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <h3><?php the_title(); ?></h3>

       <span>Enter Your Text Here!</span>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

</a>

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

</li>

您可以看到我在标题后添加了一个跨度。您可以向该跨度添加一个类或样式属性，或者您可以将跨度更改为 div 以便根据需要对其进行修改。但解决方案会奏效。

方法二

当您想在 Woocommerce 区域之后或之前添加一些文本/图像时，您需要添加一个钩子。首先，您需要了解 hooks 是如何工作的，所以请阅读有关 Wordpress 操作和过滤器的内容here。

既然您知道如何添加操作或过滤器，请阅读有关 Woocommerce 钩子here。

您必须在主题的 functions.php 文件中创建一个过滤器，然后在价格之前或之后添加文本。

下次当您对 Wordpress CMS 有任何疑问时，请在此处发布：https://wordpress.stackexchange.com/

【讨论】：

非常感谢您花时间整理出如此高质量的答案。

很高兴能帮到你。如果您有任何其他问题，请在此问题中添加 cmets。因为我会收到通知，我会在有时间的时候发布答案。祝你有美好的一天。