Hello
I’ve created a custom shortcode function in my functions.php file to show the discount percentage (e.g. “50% OFF”) dynamically on my WooCommerce product pages.
The shortcode works perfectly on desktop, and even when I view the desktop version on mobile, it displays correctly.
However, when I use a custom mobile template, the shortcode output does not appear at all.
Here’s my code setup:
functions.php
function product_discount_percentage_shortcode() {
// Ensure we are on a product page, or have a valid product context
global $product;
// Check if the global $product object is available
if ( ! is_a( $product, 'WC_Product' ) ) {
// Attempt to get product ID from the loop/query if not on single product page
$product_id = get_the_ID();
if ( $product_id ) {
$product = wc_get_product( $product_id );
}
}
// Check if we successfully have a product object
if ( ! is_a( $product, 'WC_Product' ) ) {
return '';
}
// --- Calculation and Output Logic ---
// 1. Check if the product is on sale
if ( $product->is_on_sale() ) {
// 2. Handle Simple and Variable Products differently for prices
if ( $product->is_type('simple') ) {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
} elseif ( $product->is_type('variable') ) {
// For variable products, we'll calculate the *maximum* possible discount
// by comparing the highest regular price and the lowest sale price.
$prices = $product->get_variation_prices( true );
// Exit if there are no variations or prices
if ( empty( $prices['regular_price'] ) || empty( $prices['sale_price'] ) ) {
return '';
}
// Get the highest regular price and the lowest sale price across all variations
$highest_regular_price = max( $prices['regular_price'] );
$lowest_sale_price = min( $prices['sale_price'] );
// Use these for the calculation (finding the max discount)
$regular_price = (float) $highest_regular_price;
$sale_price = (float) $lowest_sale_price;
} else {
// Not a simple or variable product, so we can't calculate easily
return '';
}
// 3. Final calculation check and execution
if ( $regular_price > 0 && $sale_price < $regular_price ) {
$discount_amount = $regular_price - $sale_price;
// Calculate the percentage discount: (discount_amount / regular_price) * 100
$percentage = round( ( $discount_amount / $regular_price ) * 100 );
// Return the output string (don't use echo in shortcodes)
$output = '<span class="woocommerce-discount-percentage">';
$output .= '' . esc_html( $percentage ) . '% ' . esc_html__( 'OFF', 'your-text-domain' );
$output .= '</span>';
return $output;
}
}
// Return empty string if not on sale or calculation conditions are not met (0% off)
return '';
}
// Register the shortcode with WordPress
add_shortcode( 'product_discount_percentage', 'product_discount_percentage_shortcode' );
CSS :
.woocommerce-discount-percentage {
display: inline-block;
padding: 7px 8px;
margin-left: 0px;
background-color: #e44d26;
color: #ffffff;
border-radius: 4px;
font-size: 0.9em;
text-transform: uppercase;
line-height: 1;
}
.woocommerce-discount-percentage strong {
font-weight: 700;
font-size: 1.1em;
}
.summary .price + .woocommerce-discount-percentage {
margin-left: 10px;
vertical-align: middle;
}
Shortcode Used: [product_discount_percentage]
so finally the issues is
Works fine on desktop version.
Works fine when viewing desktop layout on mobile browser.
❌ Does not display when using a custom mobile template.
Could you please confirm:
How can I make this shortcode work inside tagDiv mobile templates?
Hi,
Ok, so the code is working for the desktop and responsive version, this is good because you can use the responsive version.
Now the question is, are you facing the problem using the tagDiv Mobile theme plugin or using the mobile page template?
If is the mobile page template, it should be working without any extra code, but in case you are using the tagdiv mobile theme plugin then the code should be set in mobile functions.php too wp-content/plugins/td-composer/mobile/functions.php
Thank you!
Just I’m Using Mobile template only i not installed tagDiv Mobile Theme. the problem is only with mobile template, i shared one video please check that
http://grookfit.com/share/mobile_theme_problem.mkv
i’m not using mobile plugin https://prnt.sc/G2eKzPKQ-OYS, anyway i added script in mobile function.php but not working https://prnt.sc/tgS9aUhJyLJk still showing empty https://prnt.sc/vEAz1RiA8hcP
Hi,
The mentioned path was only if the mobile theme plugin was in use, if you are using the mobile page template, then there is no need to set the code in that path.
The shortcode where it is set, did you use a child theme to set it in functions.php? If so it should work, is working for me – https://i.imgur.com/mqFWgu0.png
Css – https://i.imgur.com/nt5jVHF.png
code -https://i.imgur.com/VA2JNSe.png
Thank you!
For My Mobile Template not showing
Hello,
I’ve created a custom discount shortcode for my WordPress website to display the product discount percentage (for example, “50% OFF”).
The shortcode works correctly on the desktop template, but it’s not showing on the mobile template.
I’ve shared my website URL, temporary admin login, and FTP details with your developer account (contact@tagdiv.com) for review.
I also included the product page link, the code snippet, and a detailed explanation in the email for reference.
Please help me make this shortcode fully functional on the Product Page for both desktop and mobile versions.
Hello,
We’ll check all emails as fart as we can.
Thank you!
