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”的文件夹。转到您网站的“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。该文件是在类别页面上显示产品的文件。您可以看到您的产品显示在< li>中。

眼下，内容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/