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

问题描述

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

I have managed to successfully get text to show up before the price and before the sale price, but the text is being considered part of the price not separate from it.

放置:

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

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

in my custom CSS file successfully puts "Betty's price: " before the new "sale" price. The problem is that Betty's Price: is now underlined and clickable and its part of the same link as the price text.

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

I'm trying to get this text inserted before the price, and not be part of the price. I don't want this text to be formatted along with the price, either.

同样的情况适用于原价:

The same situation applies to the original price:

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

PS:除了Betty's price"位之外，我还希望添加一个新行字符，以便该行可以低于零售价(如果有任何改变).>

PS: I'm also hoping to add a new line character in addition with the "Betty's price " bit so that that line can go below the retail price, if that changes anything.

推荐答案

方法一

您已安装 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".

You have the woocommerce plugin installed. In order to overwrite the woocommerce page templates you need to create a folder called "woocommerce" in your theme's folder. Go to your website's "wp-content/plugins/templates" and copy the file content-product.php to "wp-content/themes/your-theme/woocommerce/". If you're theme is called "mytheme" you will have this path: "wp-content/themes/mytheme/woocommerce/content-product.php".

您可以根据需要编辑文件 content-product.php.该文件是在类别页面上显示产品的文件.您可以看到您的产品显示在 <李>.

You can edit the file content-product.php as you want. This file is the one that displays the products on the category pages. You can see that your product is displayed inside a < li >.

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

Right now, the content-product.php looks like this:

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

You can see that after the title it's included this function: do_action( 'woocommerce_after_shop_loop_item_title' );

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

That function is defined in: plugins/woocommerce\includes\wc-template-hooks.php, so we won't touch it, I consider it a core file. You should edit only the templates files, because, if there will be an update to the plugin, you will loose your settings.

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

So I suggest you to replace the above code with this one:

<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 以根据需要对其进行修改.但解决方案会奏效.

You can see that I've added a span after the title. You can add a class or a style attribute to that span, or you can change the span to a div in order to modify it as you wish. But the solution will work.

方法二

当您想在 Woocommerce 区域之后或之前添加一些文本/图像时，您需要添加一个钩子.首先，您需要了解钩子的工作原理，因此请在此处阅读有关 Wordpress 操作和过滤器的信息.

When you want to add some texts/images after or before a Woocommerce zone, you need to add a hook. First of all, you need to know how hooks works, so please read about Wordpress actions and filters here.

既然您知道如何添加操作或过滤器，请在此处阅读有关 Woocommerce 挂钩的信息.

Now that you know how to add an action or a filter, read about Woocommerce hooks here.

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

You will have to create a filter in your theme's functions.php file and there you'll add your text before or after the price.

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

Next time when you have a question regarding the Wordpress CMS, please post it here: https://wordpress.stackexchange.com/

这篇关于WooCommerce:您如何在价格之前和销售价格之前添加文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！