WooCommerce:你是如何在价格之前和销售前添加文本的？

Question

我已经成功地使文本出现在价格之前和销售价格之前，但是文本被认为是价格的一部分，而不是独立于它。

放置：

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：除了“贝蒂的价格”之外，我还希望添加一个新的行字符，这样如果有任何变化的话，这条线可以低于零售价。

Answer 1

方法1

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

您可以根据需要编辑文件内容-Product.php。此文件是在类别页上显示产品的文件。您可以看到产品显示在< li >中。

现在，ContentProduct.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更改为div，以便根据需要对其进行修改。但解决办法会奏效的。

方法2

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

现在您已经知道了如何添加操作或过滤器，请阅读关于Woocommerce钩子这里的文章。

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

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