- NewspaperCreate Custom Code with the browser’s Inspector or the Live CSS Box
- NewspaperScroll Animation
- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperHow to setup Twitch for Social Counter
- NewspaperModal Popup
- NewspaperFlex Block Settings Guide
- NewspaperAutoptimize Plugin – install and configuration
- NewspaperAdding Multiple Authors to Your Articles
- NewspaperDesign your Post Pages using the Cloud Library Templates
- NewspaperBig Grid Flex Settings
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewspaperUsing Other Ads
- NewspaperBlock settings tutorial
- Using custom fonts
- Using typekit fonts
- NewspaperChild Theme Support
- NewspaperHow to Make the Site Faster
Hi,
Please try this custom css:
.woocommerce form,
body table tr th,
body .td-woo-default form table.shop_table tr td {
text-align: right!important;
}
body.woocommerce-page table.cart td.actions {
text-align: left!important;
}
body .td-woo-default .td-woo-billing {
margin-left: 40px;
margin-right: -30px;
}
I hope this will help you!
Hello, what CSS code can I use to set rounded corners on the Pricing Table element in Tagdiv Newspaper?
Good morning again.
I’m sending you three screenshots and my .htaccess file details so you can see that the filters are there, but they’re not displaying as you described.
If you need any further information, please let me know. Thank you very much.
Cabeceras base
<IfModule mod_alias.c>
# HTML: sin cache
<FilesMatch “\.(html?|rtf|rtx|txt|xsd|xsl|xml)$”>
<IfModule mod_headers.c>
Header unset Pragma
Header set Cache-Control “no-cache, no-store, must-revalidate”
Header unset Last-Modified
</IfModule>
</FilesMatch>
# Estáticos: permitir cache
<FilesMatch “\.(css|js|json|eot|otf|ttf|ttc|woff|woff2|svg|svgz|gif|jpe?g|png|webp|avif|avifs|ico|pdf|mp4|mov|webm|wav|mp3|zip)$”>
<IfModule mod_headers.c>
Header unset Pragma
Header set Cache-Control “public”
</IfModule>
</FilesMatch>
</IfModule>
https://postimg.cc/gallery/8pFV1Kf
Best regards
Hi,
We are using the Newspaper theme on elubaczow.com.
The theme seems to generate different HTML for mobile and desktop.
This causes issues with full-page caching (sometimes the cached mobile HTML is served to desktop users and vice versa).
I think so and I received this information from the hosting provider.
Is there an option in the theme or in the tagDiv Composer / Mobile Theme plugin to disable device-specific HTML output and use a single unified HTML structure (with only CSS-based responsiveness)?
If not, what is the recommended way to configure caching (plugin and server-level) for Newspaper to avoid this issue?
The problem only occurs for users who are not logged in.
I have the “tagDiv Mobile Theme” plugin disabled.
Is the problem something else?
Incorrect loading: https://prnt.sc/Ao3ObgNt1cia
It displays a completely different header – unused, and the rest of the page falls apart.
Correct loading: https://prnt.sc/n7TnA1Ls_ibw
Hi,
The simplest and fastest solution is a custom css like this one:
.td-container-wrap,
.td-main-content-wrap{
background-color: #0a0a0a!important;
}Please set teh code in the theme panel, custom code> custom css.
Thank you!
@Calin Hi! It’s improved a bit, but it’s still freezing. I disabled some plugins. You know what I think? At the end of last month it wasn’t like this, it was running smoothly.
I found something that might be causing the slowness. You know? It could be this: the theme isn’t identifying the caching plugin. Look at this: https://ibb.co/hFjWZy65
It says: “No caching plugin detected – for best performance we recommend using WP Super Cache”, even though I’m using LiteSpeed Cache, as you can see in the image.
However, there’s a message saying:
WARNING: The LSCache caching functions on this page are currently unavailable! To use the caching functions, you must have a LiteSpeed web server or be using the QUIC.cloud CDN. Learn more: https://ibb.co/fzyWqtg2
Then this page appears to click, to learn more: https://encurtador.com.br/nqXP. From what I understand, LiteSpeed doesn’t support PHP pages, or doesn’t work with caching PHP pages, and they have a paid service that performs better.
This might be causing the site to be slow. And this also appears:
5120M – Images, themes and plugins larger than this cannot be loaded. To learn how to change this, see our guide here.
What should be the ideal value for post_max_size? https://ibb.co/d0G7rfvG. “Images, themes and plugins larger than this cannot be loaded”. It could be a slow theme issue. This needs to be resolved, but I don’t know how.
Another thing: I need your help. Do you know the related channels block? This one: https://ibb.co/BVz63DqM.
You need to filter the main category: it appears here: https://ibb.co/NngYKwhK and is configured here: https://ibb.co/XxbXd2RT in the dav composer filter configuration. There’s no option to show only the main category: https://ibb.co/ksSHH8Bq.
Could you send me a custom CSS to do this? To show only the main category as shown here: https://ibb.co/RpdJ3VGT. It should appear in that block, but I don’t know what to do. I need a working CSS.
I ask for your help in solving these problems. Thank you for your attention.
Yep that works for single post template, I managed to edit the date time format.
However it seems for posts (w/ title, description, categories, date, reading time) inside a Flex Block Builder that came with the default Forest Beat example, there’s no way to edit the “date element” inside the Flex Block Builder. Clicking on the date brings me to the “Flex Block Builder” instead of the date element.
So it’s still not working for me specifically for the posts on Forest Beat homepage. Still has its own date time format.
I had to dig into the source code (i.e. via Edit instead of tagDiv composer) to find out:
[tdb_flex_block_builder limit=”2″ tdc_css=”eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJkaXNwbGF5IjoiIn19″ cloud_tpl_module_id=”23″ modules_on_row=”eyJhbGwiOiI1MCUiLCJwaG9uZSI6IjEwMCUifQ==” modules_gap=”eyJhbGwiOiI0MCIsInBvcnRyYWl0IjoiMzAifQ==” modules_vert_align=”stretch” all_modules_space=”eyJwaG9uZSI6IjMwIn0=” offset=”1″]
There’s no way to edit the date field inside tdb_flex_block_builder!
Hi,
It will be need to use a good cache plugin that can optimize the css. The most recommended is WP Rocket cache plugin. But there are other cache/optimization plugins that can be used, just to have the option to minify and remove unused css.
Thank you!
Hi,
You have cache and optimize images, but please use Autoptimize for optimizing html, css, and JS. This will bring better results.
WP Rocket doesn’t have a free version, only premium, but there are other free plugins that you can try, like – https://wordpress.org/plugins/wp-optimize/ – https://wordpress.org/plugins/litespeed-cache/
Setting an old version of the theme normally does not improve the site speed.
Thank you!
Hi,
You can update the php version to 8.3 and you can also use wp super cache will not be enough make sure that you use something for images and for html, css and js and Cloudflare – https://forum.tagdiv.com/how-to-make-the-site-faster/
For best results, we recommend WP Rocket – https://forum.tagdiv.com/wp-rocket-and-newspaper-theme-optimization-guide/
Thank you!
Hello support team,
I recently purchased the Newspaper theme and am using the “DEFAULT PRO” template because I was very impressed with its professional designs. I thought it would allow me to easily create a beautiful blog.
However, I discovered that most of the theme’s blocks (Flex Blocks, Big Grids, etc.) cannot be lazy-loaded, maybe because they use CSS background-image to display images ? I use lscache lazy load function and already tried others plugins.
This forces every single image in these blocks to load even if they are far below the fold. The lazy load option in the theme panel doesn’t improve performance metrics; it seems to be just a visual loading effect. Is that correct?
To keep a good performance score of 95+ on PageSpeed Insights, my only workaround has been to hide all images in these blocks on all single posts. While this fixes the speed issue, it completely defeats the purpose of buying a visually rich theme like Newspaper.
I already use others speed optimization like cache, css/javascript loading optimisation,etc. the only problem I can see is these theme’s blocks images on sidebar and footer not lazy-loaded.
My question is:
Is there a built-in setting or a recommended method to solve this? Or is this something that might be addressed in a future update?
This seems like a critical feature for any modern theme focused on performance.
My website : https://www.entrecampeurs.com/
Thank you for your help and guidance.
Hi RENATO,
The element shortcode from the single post template is a special one, which is why it is displaying only on the single post template, so if there are shortcodes that should trigger the article IDs, they will work correctly. BUG the shortcodes can be set in our theme on any page and cloud templates using the column text and text with title elements, you just need to set the shortcode in one of those elements and it will render the shortcode – https://imgur.com/DSSni9j
For the image situation, I will recommend setting a class on the row that is holding the image elements, doing this you can replace teh dynamic class tdi_98/7 – https://i.imgur.com/ngnSDSS.png
To hide an element using tagDiv Composer, select it and check the css tab, then on display, set the hidden option – https://i.imgur.com/CKrwQ2z.png use teh manage to see the hidden elements – https://i.imgur.com/IQ9JRUz.png
Related to the date from Google search results https://yoast.com/help/date-appears-search-results/
About the pagespeed, the best results are using the WP Rocket plugin, but this is a premium plugin and most of users prefer something free, here, it can be use the WP Super Cache, but with the Autoptimize plugin, othetrcache plugins that can be used with good results: WP Optimizer or LiteSpeed.
Also, using Cloudflare will help you a lot!
The live search element can be “translated” using tagDiv Composer select the element and look for the text set in composer https://i.imgur.com/0MuagAg.png
Related to the image requests for reducing the module image size, this is in the theme on flex blocks – https://i.imgur.com/PKmODaB.png https://i.imgur.com/tszBQkz.png and on single image element – https://i.imgur.com/jlzRLWu.png
The shortcode support in the theme is since teh theme was on Themeforest. As I mentioned above, the shortcodes should be set in column text or text with title.
Thank you!
hello, @Calin So about the previous issues, I can’t get shortcodes to work at all, because in TagDiv Composer! It doesn’t show up on the page, it only appears in posts. I spoke with the owner of the search plugin, and he said he tried to contact you guys from the theme to get support for his plugin and didn’t get a response. The guy from the search theme said this about your theme, https://imgur.com/a/HcEGq1O
I had to create a search field, I couldn’t add it to the header, but I managed to add it to the home page. I’m having some problems.
The block images, I can’t reduce the image size no matter what I do, I have to set up CSS for all of them, it’s a lot of work, and when I delete some tdi_ element it changes the number and messes everything up. Well, tdi_98, I can’t get the image to be 90px by 90px. I used this CSS when it was tdi_97 and it was working perfectly. Then I had to delete some elements, it changed to tdi_98 and it stopped working. I adapted everything correctly, only the images aren’t staying 90px by 90px, they’re huge. Look there, the CSS is correct. https://ibb.co/TMNTDZvB desktop mode only, because for mobile I had created a separate page. https://glostv.com/tv-ufg
Could you provide CSS to fix the large image issue? To make it 90px by 90px.
About this related thing, https://ibb.co/qLBYQZPX, I can’t set it to a primary category, like there’s this option, https://ibb.co/1GJkWGGs, to make it primary up there, https://ibb.co/VpJb4rCj. Is this possible via CSS?
About this, is there also a way to hide the title without needing CSS?
Is there somewhere in the theme that disables the date that keeps showing up?
Google searches, https://ibb.co/hFZNCXJf I already deleted everything in WordPress, did everything, hid it in WordPress, https://ibb.co/wFRmCNrh
Is there any way to make the site faster with this theme? You guys in the theme recommended Super Cache, which is horrible depending on the configuration, it modifies the CSS and everything. I measured my site on https://pagespeed.web.dev/ and it’s terrible, seems like the theme is too heavy. Is there a way to improve this? Because when I update something it takes too long to update the page; I’m not logged in.
Lastly, how do you translate https://ibb.co/LXG4WdqF I tried to find it and couldn’t. If you can help me with these problems.
Ask the theme owner to add in the next update the ability to reduce the image size of the tdi_ modules so we don’t need to keep using CSS code. Ask them to add shortcode support in TagDiv Composer! on pages, because it only appears in posts.
@Calin Sorry, I put Portuguese, correcting it, it’s English. I’m having 6 problems with https://glostv.com/. Can you help me solve them? I need to resolve this; I intend to buy another theme from you at the end of the month, but I need to fix this. First, the footer on mobile devices doesn’t show “About us, contact”. Quick links and useful links are not in the middle, but at the bottom. Below GosTV, the slogan, and “Watch TV channels” don’t appear on the same line. See link https://ibb.co/Cs5sZzFr
Second, the homepage and no static page (page, not post) allows/offers the option to add a shortcode for a search field. This option doesn’t exist for pages in TagDiv Composer! I bought a search plugin and I can’t use it. I search and nothing appears. See here: https://ibb.co/YT33pMyJ. However, in blog posts, the shortcode field appears normally. There’s a defect. In the normal post it appears, look here, https://ibb.co/QvwxFmwj. The “defect is only on the pages, the TagDiv Composer! doesn’t show the block/option to add the shortcode.” It’s not possible to edit the normal editor, as it has to be the TagDiv Composer editor!
Third, as I mentioned, I can’t put any shortcode on pages/posts (reaffirming item 2), but I can’t change this horrible search field in the header. I’ve already broken the site several times trying to solve this here https://ibb.co/M5M35FyV. I tried in TagDiv Composer! and via code, I can’t. I have the Ajax Search Pro plugin, which uses shortcode to add a search button and it doesn’t work. Here, https://ibb.co/M5M35FyV, I would need to use this, https://ibb.co/KjsV4FD2.
Fourth. On mobile devices, I really need these blocks to appear in the following sequence on this page and all pages created with TagDiv Composer!: Related Channels and Featured Channels. I created a CSS and it didn’t work:
CSS
@media (max-width: 767px) {
.tdi_99 {
order: 1 !important;
}
.tdi_82 {
order: 2 !important;
}
This is only for mobile devices, but I don’t want to have to create a separate mobile page for them. It would have to look like this: https://ibb.co/TDymN4NR, one below the other, and the rest would continue. I didn’t want to create a mobile page for all of them. Link: https://glostv.com/tv-sete-lagoas
Fifth, I really need to reduce the height and width of the contact form. It’s too large. Is this possible with custom CSS? If possible, please help. https://glostv.com/contato
Sixth, Please send me custom CSS for mobile devices to remove the spacing from this here https://ibb.co/99z0MQZ6 on this page: https://glostv.com/estados.
Estou com 6 problemas, no https://glostv.com/ pode me ajudar a resolver eles, preciso resolver, pretendo comprar mais um tema no final do mês de Vocês, mas preciso resolver isso. Primeiro, Rodapé no dispositivo móvel não mostra “Sobre nós, contato”. Links rápidos e links úteis não estão no meio, e sim embaixo. Abaixo GosTV, slogan, Assistir canais de TV, não aparece na mesma linha. Olhe link https://ibb.co/Cs5sZzFr
Segundo, A página inicial e nenhuma página estática (página, não postagem) não permite/oferece a opção de colocar shortcode para colocar campo de pesquisa. Não existe essa opção para páginas no TagDiv Composer! Comprei plugin de pesquisa e não consigo utilizar. Eu pesquiso e aparece nada. Olhe aqui. https://ibb.co/YT33pMyJ. No entanto, em postagens de blog, aparece normalmente o campo para shortcode. Tem algum defeito. Na postagem normal aparece, olhe aqui, https://ibb.co/QvwxFmwj. O “defeito está somente nas páginas, o TagDiv Composer! não aparece o bloco/opção de shortcode para ser adicionado.” não tem como editar editor normal, pois tem ser editor TagDiv Composer!.
terceiro, Como citei, não consigo colocar nenhum shortcode em páginas/postagens (reafirmando o item 2), porém não consigo mudar esse campo de pesquisa horrível no cabeçalho. Já quebrei o site várias vezes tentando resolver isso aqui https://ibb.co/M5M35FyV. Eu tentei no TagDiv Composer! e via código, não consigo. Tenho o plugin Ajax Search Pro, que usa shortcode para adicionar botão de pesquisa e não vai. Aqui, https://ibb.co/M5M35FyV, precisaria usar isso, https://ibb.co/KjsV4FD2.
quarto. https://ibb.co/RG6MtMws Em dispositivo móvel, preciso muito que nessa página e em todas feitas com o TagDiv Composer! apareçam esses blocos na seguinte sequência: Canais relacionados e Canais em destaque. Montei um CSS e não funcionou:
CSS
@media (max-width: 767px) {
.tdi_99 {
order: 1 !important;
}
.tdi_82 {
order: 2 !important;
}
}
Somente para dispositivo móvel, mas não quero ter que criar uma página móvel separada para elas. Teria que ficar desse jeito https://ibb.co/TDymN4NR, um debaixo do outro e o restante continuasse. Não queria criar página móvel para todos. link https://glostv.com/tv-sete-lagoas
quinto, Preciso muito diminuir a altura e largura do formulário de contato. Está muito grande. É possível com um CSS personalizado? Se for possível, ajude. https://glostv.com/contato
sexto, Me passe CSS personalizado para dispositivo móvel para remover o espaçamento disso aqui https://ibb.co/99z0MQZ6 nesta página: https://glostv.com/estados.
How to remove “My Woo Subscriptions and its sub categories” from my woo menu, from my newspaper theme?
Refer the image: https://prnt.sc/5iZy1nLpeFKW
I want to do 2 things, remove the my woo subscription box completely and change the “my woo account” to just “my account”.
I tried some Live CSS, i was able to remove only the subscriptions and and account details section, inside the the whole “my woo subscription section”, but was unable to change “my woo account” to “my account”
Refer to the screenshot : https://prnt.sc/zGtg8FuPscbl
website link: https://jeevahfoods.com/
Here is the CSS:
/*
* — REMOVE THE SUBSCRIPTION SECTION —
* This is the complete, combined code.
*/
/* Hides the “Account details” link */
a[href*=”?account_details”] {
display: none !important;
}
/* Hides the “Subscriptions” link */
a[href*=”?subscriptions”] {
display: none !important;
}
/* * — Hides the “My subscription account” HEADING —
* This is the new set of rules to find the stubborn heading.
*/
/* Rule 1: Target common tagDiv heading classes */
.td-account-links .tds-woo-sub-heading,
.td-woo-acc-menu .tds-woo-sub-heading,
.td-woo-acc-menu .tds-account-sub-header {
display: none !important;
}
/* Rule 2: Target any span that is a direct child of a list item (a common way to make a heading) */
.td-woo-acc-menu li > span {
display: none !important;
}
Hi,
Unfortunately, it’s not that simple. If it were only a CSS change to display the button, I would have already helped you with that.
I’ll make a note for our developers and hope they will consider this improvement in the future.
For now, the only option is for users to contact you directly, and you will need to cancel their subscriptions manually.
Thank you for your understanding!
Hi, since the very last update last week, the search buttons are no longer working. I can do a live search and items do show up but when I hit the button, the search results page wont open and a fatal error page will pop up instead. I have enabled debug and this is what I get:
Fatal error: Uncaught TypeError: Cannot access offset of type array on string in /var/www/html/news/wp-content/plugins/td-composer/legacy/common/wp_booster/td_util.php:1196 Stack trace: #0 /var/www/html/news/wp-content/plugins/td-composer/legacy/common/wp_booster/td_util.php(340): td_util::get_template_id() #1 /var/www/html/news/wp-content/plugins/td-composer/legacy/common/wp_booster/td_wp_booster_functions.php(513): td_util::check_header() #2 /var/www/html/news/wp-includes/class-wp-hook.php(324): td_load_css_fonts() #3 /var/www/html/news/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #4 /var/www/html/news/wp-includes/plugin.php(517): WP_Hook->do_action() #5 /var/www/html/news/wp-includes/script-loader.php(2299): do_action() #6 /var/www/html/news/wp-includes/class-wp-hook.php(324): wp_enqueue_scripts() #7 /var/www/html/news/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #8 /var/www/html/news/wp-includes/plugin.php(517): WP_Hook->do_action() #9 /var/www/html/news/wp-includes/general-template.php(3192): do_action() #10 /var/www/html/news/wp-content/plugins/td-composer/legacy/Newspaper/header.php(8): wp_head() #11 /var/www/html/news/wp-content/plugins/td-composer/td-composer.php(254): require_once(‘…’) #12 /var/www/html/news/wp-includes/class-wp-hook.php(324): {closure:/var/www/html/news/wp-content/plugins/td-composer/td-composer.php:249}() #13 /var/www/html/news/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #14 /var/www/html/news/wp-includes/plugin.php(517): WP_Hook->do_action() #15 /var/www/html/news/wp-content/themes/Newspaper/header.php(2): do_action() #16 /var/www/html/news/wp-includes/template.php(810): require_once(‘…’) #17 /var/www/html/news/wp-includes/template.php(745): load_template() #18 /var/www/html/news/wp-includes/general-template.php(48): locate_template() #19 /var/www/html/news/wp-content/plugins/td-cloud-library/wp_templates/tdb_view_search.php(8): get_header() #20 /var/www/html/news/wp-includes/template-loader.php(106): include(‘…’) #21 /var/www/html/news/wp-blog-header.php(19): require_once(‘…’) #22 /var/www/html/news/index.php(17): require(‘…’) #23 {main} thrown in /var/www/html/news/wp-content/plugins/td-composer/legacy/common/wp_booster/td_util.php on line 1196
I have tried to use another cloud template for the search page, I have tried editing the existing one and saving… but nothing helps same error all the time.
Any clues on what is going on?
Thanks in advance,
Jose
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!
Hi Giorgos,
The thing is that the fetchpriority=”high” is used only on images set with the html tag img and the flex block have set the image using css as background therefore there is no way to set the fetchpriority=”high” on it, but the module made with module builder will display teh image in html tag so it will automatically attach the fetchpriority=”high”.
Thank you!
Hi Calin,
I was using Newsletter plugin with Mailchimp and my idea was just to change the provider option to Mailerlite without any pain. Using a text column is not what I expected by the options of your plugin.
However I tried to follow your instrunctions in addition to https://forum.tagdiv.com/the-newsletter-plugin/
What I get is a broken form because the css added in the content box of Column text is ignored. It’s a real pain adjusting the aspect of the form via custom css.
I have checked and turned off CSS and js settings, but I still have the same problem.
Please solve my problem
Hi,
The mobile menu usualy is affected by settings form cache plugin, to make sure it is like that, please clear all cache and disable the cahce plugin afyter that check to see if the menu problem has been resolved, if has, then you need to go to you cache plugin (I think it’s litespeed) and check each options related to css and js in part.
Related to social icons, are you referring to those? https://i.imgur.com/FUw1bYj.png Usually, it’s related to cache settings too, so disabling the cache plugin should be resolve both situations, after that just check the cache options for css and js.
Correction in adobe type the css is loaded in all pages and works with classes so body p etc does not take priority. but we dont want the css to be loaded in all pages(uses import +parser blocking etc) only in the page we choose to have the font…
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?
