WooCommerce:如何在价格和销售价格之前添加文本? - WooCommerce: How do you add text before the price and before sale price?

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

放置:

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

自定义CSS文件中的

成功地将"Betty's price: "放在新的"sale"价格之前。问题是Betty's Price:现在是下划线和可点击的，它的一部分是与价格文本相同的链接。

我正在尝试将此文本插入到价格之前，而不是价格的一部分。我也不希望这个文本和价格一起被格式化。

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

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

PS:我还希望添加一个新的行字符，除了"贝蒂的价格"位，这样行可以低于零售价格，如果这改变了什么。

方法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>

你可以看到我在标题后面添加了一个span。您可以向该span添加一个类或样式属性，或者您可以将span更改为div，以便根据需要修改它。但是解决办法会起作用的。

方法2

当你想在Woocommerce区域之后或之前添加一些文本/图像时，你需要添加一个钩子。首先，你需要知道钩子是如何工作的，所以请在这里阅读Wordpress操作和过滤器。

现在你知道如何添加一个动作或过滤器，阅读Woocommerce钩子在这里。

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

下次当你有关于Wordpress CMS的问题时，请在这里发布:https://wordpress.stackexchange.com/