Display the default discounted price and percentage on Woocommerce products

I am trying to display the percentage discount of a product on Woocommerce. The solution originally provided (linked below) works, however the discount percentage doesn't display if there is a default product variation set. Only when the selection is changed to another variation does the percentage discount appear. How would I modify the code to display the percent discount immidiately - without having to select another variation?

I am trying to display the percentage discount of a product on Woocommerce. The solution originally provided (linked below) works, however the discount percentage doesn't display if there is a default product variation set. Only when the selection is changed to another variation does the percentage discount appear. How would I modify the code to display the percent discount immidiately - without having to select another variation?

The original solution: Display the discounted price and percentage on Woocommerce products

2) The saving percentage:

add_filter( 'woocommerce_get_price_html',     'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
     // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
         // Get product prices
         $regular_price = (float) $product->get_regular_price(); // Regular price
         $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)
     // "Saving Percentage" calculation and formatting
     $precision = 1; // Max number of decimals
     $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%';

     // Append to the formated html price
     $price .= sprintf( __('<p class="saved-sale">Save: %s</p>', 'woocommerce' ), $saving_percentage );
}
return $price;

}


Building Custom WordPress Sites from Scratch - WordPress Theme Development

Building Custom WordPress Sites from Scratch - WordPress Theme Development

Learn to create a completely responsive website from scratch using WordPress, HTML, CSS, JavaScpript, and PHP. Also, learn to create a custom WordPress theme.

After watching this course you will have a solid understanding of how WordPress works and how to create your own custom theme in WordPress.

🔗 Design Source Code: https://github.com/Godsont/Responsive-Website-Design

🔗 Theme Source Code: https://gtcoding.net/product/gtcoding-wp-custom-theme/

⭐️ Contents ⭐️

⌨️ (0:00:00) Intro and Demo

⌨️ (0:00:55) Research & Planning

⌨️ (0:10:52) UI Design - The Front Page

⌨️ (0:27:47) UI Design - CSS

⌨️ (0:59:07) UI Design - JavaScript

⌨️ (1:05:11) UI Design - More Pages

⌨️ (1:20:43) PHP Basics

⌨️ (1:58:31) Installing WordPress locally

⌨️ (2:03:05) WordPress - style.css file

⌨️ (2:11:47) WordPress - linking CSS and JS

⌨️ (2:23:17) WordPress - Custom Post Type

⌨️ (2:33:31) WordPress - Template Hierarchy

⌨️ (2:43:29) WordPress - while loop

⌨️ (2:54:52) WordPress - the Front Page

⌨️ (3:11:44) WordPress - Blogs Index Page

⌨️ (3:26:42) WordPress - Single Post Page & Comments

⌨️ (3:52:59) WordPress - Sidebar & Search

⌨️ (4:14:35) WordPress - Contact Form

⌨️ (4:20:17) WordPress - Custom 404 Page

⌨️ (4:24:19) Finishing Up


Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Web Developer Bootcamp

Angular 8 (formerly Angular 2) - The Complete Guide

The Complete JavaScript Course 2019: Build Real Projects!

Modern React with Redux [2019 Update]

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Build Responsive Real World Websites with HTML5 and CSS3

Build a Progressive Web App In VueJs

Build Progressive Web Apps with React

The State of Progressive Web Apps - The State of the Web

A full-stack solution for fast PWA development

PHP 7.4: What Promises It Has in Store for The PHP Developers?

The new version of PHP has given a boost to PHP website development. In this blog, know everything about PHP 7.4 final release and alpha, beta versions.

Step by Step guide to Write your own WordPress Template

Step by Step guide to Write your own WordPress Template

Step by Step guide to Write your own WordPress Template - Writing your own WordPress template from scratch is fairly simple. If you are into Web Development industry, you might’ve already heard what “WordPress” is...

Step by Step guide to Write your own WordPress Template - Writing your own WordPress template from scratch is fairly simple. If you are into Web Development industry, you might’ve already heard what “WordPress” is...

Maybe a client has mentioned, but you’re not familiar with it. Maybe you’ve already worked with it before, but don’t know how to make a theme from scratch. Or maybe you’re a complete newbie. Whatever is the case, this post is for you.

**Prerequisites: **Before we begin, you’ll need to fulfill the following set of requirements.
You need to have a fully fledged WordPress setup, either on localhost or live hosting. If you want to learn more about starting with WordPress, refer to this article.A conceptual design, either as PSD or HTML CSS to follow throughout the development process.A little introduction to PHP programming. However, it’s not a necessity for this particular post but still recommended.## Scope

Designing a WordPress theme is a long, tedious, never ending but a great programming challenge. The development process depends entirely on how you want your theme to look like. This post is just a tutorial and does not cover all the bits and pieces required for a standard WordPress theme. After going through this article, you have to heavily rely on WordPress Codex and WordPress StackExchange for your further queries.

Getting Started

With the prerequisites in mind, let’s get started. The very first thing you need to know is the fact that almost everything you do in WordPress is inside the wp-content directory. Everything else is the WordPress CMS itself and you don’t want to mess with that.When you’ll open wp-content -> theme directory, you’ll find default WordPress themes, like twentyfifteen, twentyfourteen, twentythirteen, etc. To start with one of your own, create a directory with whatever name you prefer. For this post, we’ll call it wpstart.

*A WordPress theme atleast needs two files to exist – style.css and *index.php
So go into wpstart folder and create these two files. In style.css, insert the following comment. This tells the WordPress dashboard about the theme details and meta information.

/* 
Theme Name: WP Start 
Author: FedUser 
Description: A bare bone WordPress theme 
Version: 0.0.1 
*/

Now switch to your WordPress dashboard, and click on Appearance > Themes. You’ll find WP Start in your theme collection.

Go ahead and activate this theme, and then visit the site. And Voila! You’ve technically created a custom theme, all by yourself. Of course, it doesn’t do anything except it has a blank white screen. This is where index.php comes into action.

Open index.php in text editor and write in the following code.

<!DOCTYPE html> 
<html> 
<body> 
<h1>This is a sample WordPress theme.</h1> 
</body> 
</html> 

Visit the site once again and get your first WordPress template up and running.

Divide and Conquer

To develop a standard WordPress theme, you need to divide all your work into sections. This is not necessary, as you can do everything in index.php, but a good programming practice involves modularity. For this particular post, we will divide our entire work into four sections, viz. header, footer, sidebar and content. Corresponding to these sections, we will create four different files, namely header.php, footer.php, sidebar.php and content.php.header.php: For this particular example, this file will do the following;Define all the meta and link tags inside <head> for HTML.Display site branding like name and description.Provide navigation to different pages.With these points in mind, let’s code our theme header.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<title>WP Start</title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		crossorigin="anonymous" /> 
</head> 

<body> 

<nav></nav> 

Now there is one thing I want to bring your attention to. You can see how “hard-coded” our site title is. Meaning, the title is going to remain the same “WP Start”, no matter what site you apply this theme on. If the author has to change it, he has to manually edit the code to do so. In order to avoid these manual tweaking of templates, WordPress provides various function calls to deal with these situations dynamically. In this particular case, I want the title to be the name of the site/blog. For this, I’ll replace

<title>WP Start<title>

with

<title> <?php echo get_bloginfo( "name" ); ?> </title>

This is called embedding small php excerpt into HTML. (Technically, we are writing HTML in php file. So we’re embedding HTML in php code).

So the header.php, with some additional code, becomes;

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 


<title> <?php echo get_bloginfo( "name" ); ?> </title> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		crossorigin="anonymous" /> 


<link rel="stylesheet" href="<?php echo get_bloginfo( 'template_directory' ); ?>/style.css" /> 
<?php wp_head(); ?> 
</head> 


<body> 


<nav class="navbar navbar-default"> 
	<div class="container"> 
	<div class="navbar-header"> 
		<a class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>"> 
		<h3 class="site-branding"> <?php echo get_bloginfo( "name" ); ?> </h3> 
		</a> 
	</div> 


	<ul class="nav navbar-nav navbar-right"> 
		<li class="active"><a href="#">Home</a></li> 
		<li><a href="#">Contact</a></li> 
		<li><a href="#">About</a></li> 
	</ul> 
	</div> 
</nav> 


Additional php excerpts used in this code are;

<?php echo get_bloginfo( 'template_directory' ); ?>

This is to get the directory of the template, so that addition resources like CSS, JS, fonts, etc. can be located.

<?php echo esc_url( home_url() ); ?>

This will echo the homepage url of the site.

footer.php: This is the file where we will add whatever we want in the site footer, like custom footer, script tags, etc. Also, the HTML tags that started in header.php are closed in this file.

<footer class="site-footer"> 
	<div class="container"> 
	<div class="row row-30"> 
		<div class="col-md-4 col-xl-5"> 
		<div class="pr-xl-4"> 
			<h3> 
			<a href="<?php echo esc_url( home_url() ); ?>"> 
				<?php echo get_bloginfo( "name" ); ?> 
			</a> 
			</h3> 
			<p><?php echo get_bloginfo( "description" ); ?></p> 
			<p>© 2018 FedUser. All Rights Reserved.</p> 
		</div> 
		</div> 


		<div class="col-md-4"> 
		<h5>Contacts</h5> 
		<dl class="contact-list"> 
			<dt>Address:</dt> 
			<dd>798 ABC Nagar, JKL, Rajasthan</dd> 
		</dl> 
		<dl class="contact-list"> 
			<dt>e-Mail:</dt> 
			<dd><a href="mailto:#">[email protected]</a></dd> 
		</dl> 
		<dl class="contact-list"> 
			<dt>Phone No.:</dt> 
			<dd><a href="tel:#">+91 1234567890</a> 
			</dd> 
		</dl> 
		</div> 


		<div class="col-md-4 col-xl-3"> 
		<h5>Links</h5> 
		<ul class="nav-list"> 
			<li><a href="#">About</a></li> 
			<li><a href="#">Projects</a></li> 
			<li><a href="#">Blog</a></li> 
			<li><a href="#">Contacts</a></li> 
			<li><a href="#">Pricing</a></li> 
		</ul> 
		</div> 
	</div> 
	</div> 
</footer> 


<script src="https://code.jquery.com/jquery-1.12.4.min.js"
	integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
	crossorigin="anonymous"> 
</script> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"> 
</script> 


</body> 
</html> 


The additional php excerpt used in this file is;

<?php echo get_bloginfo( "description" ); ?>

This will fetch and place the site description.Another thing to mention here is that I have used “hard-coded” sub-sections like “Contacts” and “Links” in the footer.php file. Instead, you can use WordPress Widgets to automate and make them modifiable directly via Customizer. This, however, is beyond the scope of this post and we’ll discuss it any time in the future articles.sidebar.php: Most of the websites have a sidebar, so do ours. Often sidebars display archive links, recent posts, social media accounts, advertisements, etc. In our case, we’ll go with archive links and social media links. Again, a WordPress widget is way better than the “hard-coded” junk! But for the sake of clarity, we’ll stick to the latter.

<div class="sidebar"> 
<div class="widget"> 
	<h3 class="widget-title">Archives</h3> 
	<div class="widget-content"> 
	<ul> 
		<li><a href="#">October 2018</a></li> 
		<li><a href="#">November 2018</a></li> 
		<li><a href="#">December 2018</a></li> 
	</ul> 
	</div> 
</div> 


<div class="widget"> 
	<h3 class="widget-title">Social</h3> 
	<div class="widget-content"> 
	<ul> 
		<li><a href="#">Facebook</a></li> 
		<li><a href="#">Twitter</a></li> 
		<li><a href="#">LinkedIn</a></li> 
		<li><a href="#">Github</a></li> 
	</ul> 
	</div> 
</div> 
</div> 


content.php: Now that header, footer and sidebar are all set up, we’ll move towards the main content of the site. For the moment, we will stick to some dummy content inside this file.

<div class="main-content"> 
<h3>Sample Title</h3> 
<p>Sample text goes here.......</p> 
</div> 


Integration

Now let’s move back to the index.php where we will integrate all the above sections into one. As this file is an entry point for our theme, we can cleverly choose to put these sections. Here’s how I’ve done it.

<?php get_header(); ?> 


<div class="container"> 
<div class="row"> 
	<div class="col-md-9"> 
	<?php get_template_part( 'content', get_post_format() ); ?> 
	</div> 
	<div class="col-md-3"> 
	<?php get_sidebar(); ?> 
	</div> 
</div> 
</div> 


<?php get_footer(); ?> 


The php excerpts used here are self explanatory. get<em>header(), get</em>sidebar() and get_footer() are predefined functions used for embedding corresponding sections. For a custom section like content.php, embedding is done by the following code;

<?php get_template_part( 'content', get_post_format() ); ?>

style.css: Now that we have updated our index.php file, let’s add some charm with CSS.

/* 
Theme Name: WP Start 
Author: FedUser 
Description: A bare bone WordPress theme 
Version: 0.0.1 
*/


nav.navbar .navbar-brand .site-branding { 
margin: 0; 
} 


footer.site-footer { 
background-color: #502550; 
color: #fff; 
padding: 40px 0 20px 0; 
} 


footer.site-footer a { 
color: #fff; 
} 


And Voila! The first look of your custom WordPress theme is ready.

The Loop

This is the most exciting part of the entire WordPress theme development where you have control of all the posts. The Loop is a functionality with which you can dynamically insert content into your theme. Our aim in this tutorial is to present all the blog posts as a user-friendly list so that the reader can choose any one of them. Let’s see how we do it.The loop itself is self-explanatory.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 


<!-- contents of the loop --> 


<?php endwhile; endif; ?> 


IF there are any posts, WHILE there are none left, DISPLAY them. Anything inside this loop will be repeated, till the page runs out of all the posts. We can use this concept to display our list. Here’s how I have done it.

<div class="panel panel-default blog-post"> 
<div class="panel-heading"> 
	<h3 class="panel-title post-title"> 


	<?php if( !is_single() ): ?> 


		<a href="<?php echo esc_url( get_permalink() ); ?>"> 
		<?php the_title(); ?> 
		</a> 


	<?php else: 
		the_title(); 
	endif; ?> 


	</h3> 


	<p class="post-meta"> 
	<?php the_date(); ?> 
	by <a href="#"> 
		<?php the_author(); ?> 
		</a> 
	</p> 
</div> 


<div class="panel-body"> 


	<?php if( !is_single() ): 
	the_excerpt(); 
	else: 
	the_content(); 
	endif; ?> 


</div> 
</div> 


And changed the index.php to this.

<?php get_header(); ?> 


<div class="container"> 
<div class="row"> 
	<div class="col-md-9 blog-main"> 
	<?php if( have_posts() ): 
			while( have_posts() ): 


				the_post(); 
				get_template_part( 'content', get_post_format() ); 


			endwhile; 
			endif; 
	?> 
	</div> 
	<div class="col-md-3"> 
	<?php get_sidebar(); ?> 
	</div> 
</div> 
</div> 


<?php get_footer(); ?> 


Let’s look at what just happened!

The Loop in index.php is calling the content.php everytime the page has a post. Inside content.php, I’ve checked if the current post is_single(). This condition will hold true if the current page contains only a single post to loop through. When it is not single, I wanted a link to that post via its title. So I used get_permalink() to get the url of that particular post. However, if the page is single, there is no need of a link and therefore, I’ve used only the_title() function.

Moving on to the meta info of the post. I’ve displayed the_date() on which the article was published and its the_author().

Finally, I’ve used the same concept of is_single() to either display the_excerpt() or the_content() of the post.

See, it was that easy and fun. Now with a little charm of CSS, I got the following result.

Conclusion:
We’re ending this post on this very point but you need to know that there is still a lot to learn about WordPress. It was just an example drill but a standard theme would be much complex. Still, we hope that you’ve learnt something new.If there was something that you didn’t understand, do mention it in the comments. If there is something that needs to be corrected, please let us know! If you’ve any feedback or suggestions for further improvements, we would highly appreciate that as well.We would love to see what you’ve learnt through this post. So do share links to your first WordPress themes. Your first steps can cheer up the new-comers.