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

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

Placing:

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

在我的自定义 CSS 文件中，成功地将“贝蒂的价格：”放在新的“销售”价格之前。问题是Betty's Price:现在带有下划线且可点击，其部分与价格文本相同。

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

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

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

PS：我还希望在“贝蒂的价格”位之外添加一个新的行字符，以便该行可以低于零售价（如果这会改变任何内容）。

Method 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 以便根据需要对其进行修改。但解决方案会起作用。

Method 2

当您想要在 Woocommerce 区域之后或之前添加一些文本/图像时，您需要添加一个挂钩。首先，您需要了解钩子是如何工作的，因此请阅读Wordpress操作和过滤器here http://codex.wordpress.org/Plugin_API.

现在您已经知道如何添加操作或过滤器，请阅读有关 Woocommerce 挂钩的信息here http://docs.woothemes.com/document/hooks/.

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

下次当您有关于 Wordpress CMS 的问题时，请在此处发布：https://wordpress.stackexchange.com/ https://wordpress.stackexchange.com/