How to update code snippets on the Theme’s functions.php file on your WordPress/WooCommerce site? (with Video)

Last updated - February 24, 2020

Due to its open-source nature, WordPress can be easily customized. From modifying how an element looks to what it does, you can customize the WordPress site based on your requirement. This customization is mainly done using WordPress hooks.

Even if you use WooCommerce and its third-party plugins, you can customize the eCommerce functionality or how the products look/behave. Having said that, you should know when and how to make additional updates to your site.

When you have found a code snippet for your customization, you should know how to add it to your WordPress site. A simple web search will show people telling to add your code snippet to your “functions.php” file.

But where and how to add the code snippet? Does it affect your plugin in any way? These are some of the questions not answered directly.

In this article, we’ll see how to update code snippet on the theme’s functions.php file of your WordPress site. We will take both design and behavior customization into consideration.

You can watch the video tutorial below.

Or continue reading the article.

Updating a Code Snippet to functions.php file

Let us understand this process using a simple demonstration. Let us hide the sale flash from the WooCommerce products on sale.

Below is a screenshot showing the sale flash on the WooCommerce products.

Updating Code snippets WordPress WooCommerce | Sale Flash is Visible
WooCommerce Sale Flash is Visible

The below code snippet will hide the sale flash for all the products on sale.

//Remove woocommerce_sale_flash completely
 add_filter('woocommerce_sale_flash', 'woo_custom_hide_sales_flash');
 function woo_custom_hide_sales_flash()
 {
 return false;
 }

As we already know, we need to update this code snippet in the functions.php file.

But where is this file?

From your WordPress left sidebar menu, go to Appearance > Editor, and click on Theme Functions (functions.php) located on the right sidebar, as shown in the screenshot below.

Updating Code snippets WordPress WooCommerce | functions.php file
Theme Functions (functions.php) file

It is a good practice to add a code snippet at the end of the code, as it is can be easily managed. Hence, we’ll add our code snippet at the end of the existing code and click on the Update button.

Updating Code snippets WordPress WooCommerce | Code snippet updated
Code snippet updated in the functions.php file

When you move to the front-end of your store, the sale flash will be displayed anymore. Notice the products still have sale price but no sale flash.

Updating Code snippets WordPress WooCommerce | Sale Flash Hidden
Sale Flash Hidden

In this way, you can update code snippet on functions.php file.

But is there another way?

Yes, there is.

There are is another functions.php file that resides under your /wp-includes/ folder of your WordPress site. Custom code snippets can also be updated in this file, except that the themes’ functions.php file is more safer to play with your code, rather than in WordPress files. Hence, the theme’s functions.php file is preferred for adding custom code snippets.

Is there a plugin for handling my code snippets?

A popular plugin for adding and managing your code snippets is the Code Snippets Plugin (pretty straight-forward name!).

Updating Code snippets WordPress WooCommerce | Code Snippets Plugin
Code Snippets Plugin

This is a free plugin that allows you to add code snippets, give them desired titles (for better understanding) and also allows you to enable/disable your code snippet any time.

Few things to keep in mind before updating a Code snippet

  • Use code snippets from a reliable source. If you are using code snippets from websites like WordPress Codex,  GitHub or Stack Overflow, it is easier to check the reliability, as you can check the credibility of the answers by other users. The code snippets from one of the developers of the plugins you are using can also be trusted. Even if there is an issue, you can always contact them to resolve.
  • Another approach is to use child themes. You can create child themes for your existing website theme and make changes to it. This will keep your parent theme intact and will also allow you to customize your site. If you are using WooCommerce’s StoreFront theme, you can check our blog articles on how to create WooCommerce Storefront Child Theme and Best WooCommerce Storefront Child Themes.
  • If you get an update for your theme, there are chances that your previously added code snippet may be gone. Hence, it is better to use child themes than regret later.
  • Do not confuse yourself the editor in Plugins > Editor with Appearance > Editor. The former editor is only related to your plugins and should not be tweaked, unless and until the respected plugin developer instructs you to. While the latter allows you to edit your theme files.
  • Most importantly, remember to follow the PHP syntax. Even if you are not technically sound, you need to figure out the general syntax of the PHP code (It’s not that difficult). While <?php indicates the start of the code, ?> indicates the end of the code. Also, learn to identify the action hooks and filter hooks. This will help you understand how your code snippet works.

Conclusion

Once you are fully aware of the method and the PHP syntax, updating code snippet will not be a difficult task. You should be aware of the code you are adding and remember how to rollback when things go awry. Use code snippets from a trusted source like WordPress codex and/or your third-party developers.

Sometimes updating code snippets can turn out to be a problem. As Beka found out the hard. After she lost all of her custom code snippets, she started using child themes and customizing them instead of the parent theme.

If you are adding a lot of code snippets on your WordPress site, you should consider using child themes and/or use the Code Snippets plugin for better code snippet management.

Code snippet source: How to hide “Sale-Flash” from your WooCommerce Products? (Code Snippet)

 


Check out our WooCommerce Customization articles for tips on customizing your WooCommerce store.

Or continue exploring LearnWoo for more amazing articles.

2 COMMENTS

  1. need to edit woo commerce single product page and customize it without elementor pro

Leave a Reply to Maninder Singh Cancel reply

Please enter your comment!
Please enter your name here