Question

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

配售：

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

在我的自定义CSS文件中成功地提出了贝蒂的价格：＆＃34;在新的＆＃34;销售＆＃34;之前价钱。问题是Betty's Price:现在加下划线并且可点击，并且它与价格文本的链接相同。

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

同样的情况适用于原价：

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

PS ：我还希望在＆＃34;贝蒂的价格＆＃34;之外添加一个新的字符。如果这改变了什么，那么这条线可以低于零售价。

Answer 1

方法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。此文件是在类别页面上显示产品的文件。您可以看到您的产品显示在＆lt; li＆gt;。

现在，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，以便根据需要进行修改。但解决方案可行。

方法2

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

现在您已了解如何添加操作或过滤器，请阅读Woocommerce挂钩here。

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

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

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

1 个答案: