WooCommerce显示产品价格优惠百分比

1. 在产品列表页显示价格优惠折扣百分比：

修改woocommerce插件文件-templates文件夹-loop文件夹-price.php：字体加粗部分

<style>
    .discount-percentage {
        background: #faeeec;
        font-size: 12px;
        font-family: 'Poppins-Medium', sans-serif, Arial;
        color: #de3a38;
        line-height: 20px;
        height: 20px;
        padding: 0 5px;
        min-width: 60px;
        max-width: 100px;
        overflow: hidden;
        border-radius: 2px;
        text-align: center;
    }

    @media only screen and (max-width: 1023px) {
        .before-content::before {
            content: '\A';
            white-space: pre;

        }
    }
</style>
<?php
/**
 * Loop Price
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/price.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @package     WooCommerce\Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product;
?>

<?php if ( $price_html = $product->get_price_html() ) : ?>
    <?php if ( $product->is_on_sale() ) : ?>
        <?php
        $regular_price = $product->get_regular_price();
        $sale_price = $product->get_sale_price();
        $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 );
        $discount_label = '<span class="before-content"></span><span class="discount-percentage">' . $percentage . '% OFF</span>';
        ?>
        <span class="price"><?php echo $price_html . ' ' . $discount_label; ?></span>
    <?php else : ?>
        <span class="price"><?php echo $price_html; ?></span>
    <?php endif; ?>
<?php endif; ?>

原始代码：

<?php
/**
 * Loop Price
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/price.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @package     WooCommerce\Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product;
?>

<?php if ( $price_html = $product->get_price_html() ) : ?>
	<span class="price"><?php echo $price_html; ?></span>
<?php endif; ?>

2. 在产品详情页显示价格优惠折扣百分比

修改woocommerce插件文件templates-single_product文件夹-price.php

<?php
/**
 * Single Product Price
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/price.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product;

?>

<?php if ( $price_html = $product->get_price_html() ) : ?>
    <?php if ( $product->is_on_sale() ) : ?>
        <?php
        $regular_price = $product->get_regular_price();
        $sale_price = $product->get_sale_price();
        $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 );
        $discount_label = '<span class="before-content"></span><span class="discount-percentage">' . $percentage . '% OFF</span>';
        ?>
        <span class="price"><?php echo $price_html . ' ' . $discount_label; ?></span>
    <?php else : ?>
        <span class="price"><?php echo $price_html; ?></span>
    <?php endif; ?>
<?php endif; ?>

原始代码

<?php
/**
 * Single Product Price
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/price.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product;

?>
<p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>