Add Discount Percentage WooCommerce

August 7, 2025 · AI Conversations

User
add discount percentage to product loop in elemenor products widgetes
Assistant
To **display the discount percentage** (e.g., **"25% OFF"**) in the **product loop** of Elementor’s default WooCommerce Products widget, you’ll need to add a custom PHP snippet. Elementor does not show discount percentage by default, but you can **extend it via a child theme** or a **custom plugin**.

—

### ✅ Step-by-step: Add Discount Percentage in Product Loop

#### ✅ 1. Add this PHP code to your **child theme’s `functions.php`** file or a custom plugin:

add_action('woocommerce_after_shop_loop_item_title', 'add_discount_badge_to_products', 6);

function add_discount_badge_to_products() {
    global $product;

    if (!$product->is_on_sale()) return;

    $regular_price = (float) $product->get_regular_price();
    $sale_price = (float) $product->get_sale_price();

    if ($regular_price <= 0 || $sale_price <= 0) return;

    $percentage = round((($regular_price - $sale_price) / $regular_price) * 100);

    echo '<div class="discount-badge" style="color: #fff; background: #e63946; display: inline-block; padding: 5px 10px; font-weight: bold; border-radius: 4px; margin-top: 8px;">'
        . $percentage . '% OFF</div>';
}

—

#### ✅ 2. Style it further (Optional):

Add this to **Appearance > Customize > Additional CSS**:

.woocommerce ul.products li.product .discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

—

### 📝 Notes:
– This works with any Elementor Products widget that uses the **default WooCommerce loop** (like `woocommerce_after_shop_loop_item_title`).
– For **Elementor Pro Custom Loop Templates**, you can insert this via a dynamic tag using shortcode or custom PHP widget.

—

### ⚠️ For Elementor Custom Loop (Elementor Pro):
If you're using a **Loop Grid** or **Custom Loop Template**, add a shortcode widget like this:

function get_discount_percentage() {
    global $product;

    if (!$product->is_on_sale()) return '';

    $regular = $product->get_regular_price();
    $sale = $product->get_sale_price();

    $percent = round((($regular - $sale) / $regular) * 100);
    return '<div class="discount-badge">'.$percent.'% OFF</div>';
}
add_shortcode('discount_percentage', 'get_discount_percentage');

Then add `[discount_percentage]` inside a **Shortcode widget** in your custom loop template.

—

Would you like it displayed on the **product image corner**, **near the price**, or somewhere else? I can tailor it.

User
after the price
Assistant
Great! To **display the discount percentage *after the price*** in the Elementor Products Widget loop, you’ll need to hook into the WooCommerce product loop **after the price is rendered**.

—

### ✅ Code to Add Discount After Price

Place this code in your theme’s `functions.php` file or in a custom plugin:

add_action('woocommerce_after_shop_loop_item_title', 'show_discount_after_price', 11);

function show_discount_after_price() {
    global $product;

    if ($product->is_on_sale()) {
        $regular_price = (float) $product->get_regular_price();
        $sale_price = (float) $product->get_sale_price();

        if ($regular_price > 0 && $sale_price > 0) {
            $discount = round((($regular_price - $sale_price) / $regular_price) * 100);
            echo '<span class="discount-percentage" style="display:inline-block; margin-left:10px; color:#e63946; font-weight:600;">(' . $discount . '% OFF)</span>';
        }
    }
}

—

### ✅ Optional CSS for Styling (Add in Appearance > Customize > Additional CSS)

.woocommerce ul.products li.product .price {
    display: inline-block;
}

.woocommerce ul.products li.product .discount-percentage {
    font-size: 14px;
}

—

### 📌 Result:

The final price section will look something like:

$45.00 (25% OFF)

Let me know if you want the **discount to show in red**, **bold**, or inside a badge!

User
also show 5.0/5 after rating start
Assistant
To show `5.0/5` (or the **actual rating value**) after the star rating in the Elementor product loop, here's what to do:

—

### ✅ PHP Code to Show Rating Text (e.g., `4.7/5`) After Stars

Add this to your **theme’s `functions.php`** or a custom plugin:

add_action('woocommerce_after_shop_loop_item_title', 'show_numeric_rating_after_stars', 6);

function show_numeric_rating_after_stars() {
    global $product;

    if (get_option('woocommerce_enable_review_rating') === 'no') return;

    $average = $product->get_average_rating();
    if ($average > 0) {
        echo '<span class="numeric-rating" style="margin-left: 5px; font-size: 14px; color: #555;">' . number_format($average, 1) . '/5</span>';
    }
}

—

### ✅ Style it (Optional)

Add this in **Appearance > Customize > Additional CSS**:

.woocommerce .star-rating {
    display: inline-block;
    vertical-align: middle;
}
.woocommerce .numeric-rating {
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
}

—

### 🔍 Output Example:

If a product has a 4.7-star rating:

★★★★★ 4.7/5

—

Let me know if you want to:
– **Show “No Ratings Yet”** when there are 0 reviews
– **Add review count** (e.g., `4.7/5 (12 reviews)`)
– **Align it below title or price**

I can customize that instantly.

User
change Add to cart button to Add to basket
Assistant
To change the **"Add to cart"** button text to **"Add to basket"** across your WooCommerce store (including Elementor product widgets), add the following snippet to your theme’s `functions.php` file or a custom plugin:

—

### ✅ PHP Snippet to Rename “Add to cart” to “Add to basket”

add_filter('woocommerce_product_single_add_to_cart_text', 'change_add_to_cart_single');
add_filter('woocommerce_product_add_to_cart_text', 'change_add_to_cart_archives');

function change_add_to_cart_single() {
    return __('Add to basket', 'woocommerce');
}

function change_add_to_cart_archives() {
    return __('Add to basket', 'woocommerce');
}

—

### ✅ This will apply to:
– **Shop/product archive pages** (used in Elementor product widgets)
– **Single product pages**

—

Let me know if you want it changed only:
– On product loop (not single)
– For specific categories or product types
– With multilingual (e.g., using WPML or Polylang)

I can tailor it easily.

User
Okay how we add discount percentage in loop item for elementor loop
Assistant
To **add discount percentage in an Elementor Loop Item** (using **Elementor Pro's Loop Grid**), you can do this using a **shortcode** and a **Shortcode Widget** inside the loop item template.

—

### ✅ Step-by-Step: Add Discount Percentage in Elementor Loop Item

#### 🟨 Step 1: Add PHP Function as Shortcode

Add this to your theme’s `functions.php` or a custom plugin:

function get_loop_discount_percentage() {
    global $product;

    if (!$product || !$product->is_on_sale()) {
        return '';
    }

    $regular_price = (float) $product->get_regular_price();
    $sale_price = (float) $product->get_sale_price();

    if ($regular_price <= 0 || $sale_price <= 0) return '';

    $percentage = round((($regular_price - $sale_price) / $regular_price) * 100);

    return '<span class="discount-badge" style="color: #e63946; font-weight: bold; margin-left: 10px;">' . $percentage . '% OFF</span>';
}
add_shortcode('discount_percentage', 'get_loop_discount_percentage');

—

#### 🟨 Step 2: Edit Your Elementor Loop Template

1. Go to **Templates > Loop Items** and edit your custom loop item.
2. Drag a **Shortcode** widget to the desired location (e.g., below or after the price).
3. In the shortcode field, enter:

[discount_percentage]

—

#### ✅ Optional CSS (Customize Look)

Add in **Customize > Additional CSS**:

.discount-badge {
    font-size: 14px;
    color: #e63946;
    font-weight: 600;
}

—

### 🧠 Tip:
You can also use conditions via `Elementor > Display Conditions` or wrap the shortcode in a “ if needed for layout tweaks.

Would you also like to add this **as a ribbon over the product image** or show only if the product is on sale? I can help with both.

Leave a Comment

Your email address will not be published. Required fields are marked *