How to Add Custom Code to Your WooCommerce Website (Without Breaking It)

Want to customize your WooCommerce store but aren’t sure where to add custom code? Whether it’s tweaking the design with CSS, adding JavaScript for dynamic behaviour, or modifying functionality with PHP, we’ll cover the right way to do it—without breaking your site.

Where to Add Custom Code in WordPress & WooCommerce

WooCommerce customization usually involves three types of code:

• CSS – Styles your site (colors, fonts, spacing, layouts).
• JavaScript (JS) – Adds dynamic behaviour (e.g: show/hide elements, popups, live updates).
• PHP – Modifies core functionality (e.g: checkout behaviour, product display logic).

Let’s look at the best places to add them.

1. Adding Custom CSS

Best for: Changing colors, layouts, fonts, button styles, etc.

Where to Add CSS Code

• Theme Customizer (Recommended)
  • Go to Appearance → Customize → Additional CSS and paste your styles.
• Child Theme’s style.css
  • If you’re using a child theme, place your CSS in: wp-content/themes/your-child-theme/style.css
    • Learn how to make a chid theme here

Example: Changing the Add to Cart Button Color

.woocommerce button.button {
    background-color: #ff6600;
    color: white;
}

2. Adding Custom JavaScript

Best for: Dynamic features like interactive menus, popups, and live updates.

Where to Add JavaScript Code

• Code Snippets Plugin
  • Install the Code Snippets plugin and create a new JS snippet.
• Child Theme’s functions.php
  • Enqueue your JavaScript file in functions.php:

function wpo_custom_scripts() {
    wp_enqueue_script('wpo-custom-js', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpo_custom_scripts');

Then place your JS code in custom.js inside the child theme.

PRO TIP: Loading JavaScript in the footer (true in wp_enqueue_script) improves page speed because it prevents scripts from blocking the loading of the page’s main content. This means your website will appear faster to users, and search engines favor sites that load quickly.

Example: Hide the Price for Out-of-Stock Products

jQuery(document).ready(function($) {
    $('.stock.out-of-stock').closest('.product').find('.price').hide();
});

3. Adding Custom PHP

Best for: Adding new features, modifying WooCommerce behavior, creating hooks.

Where to Add PHP Code

• Code Snippets Plugin (Recommended)
  • Use the Code Snippets plugin to add PHP code safely.
• Child Theme’s functions.php
  • If you’re using a child theme, add PHP code to functions.php. Avoid modifying the parent theme, or updates will erase your changes.

Example: Add a Custom Text After the Price

add_filter('woocommerce_get_price_html', 'wpo_add_custom_price_text');
function wpo_add_custom_price_text($price) {
    return $price . ' <span style="color: red;">(Limited Offer!)</span>';
}

PRO TIP: Test PHP code in a staging environment before applying it to your live site.

4. How to Add Custom CSS & JS in Popular Themes (Bonus)

If you’re using a common theme like Astra, Divi, Elementor, Bricks, GeneratePress, or Kadence, here’s how to inject your code:

Astra

• CSS: Customizer → Additional CSS
• JS: Customizer → Custom Layouts → Hooks (Or use Code Snippets)

Divi

• CSS: Divi → Theme Options → Custom CSS
• JS: Divi → Theme Options → Integration (Add scripts body)

Elementor

• CSS: Site Settings → Custom CSS
• JS: Elementor → Custom Code (Pro Feature)

Bricks

• CSS: Bricks → Custom CSS
• JS: Bricks → Custom JavaScript

GeneratePress

• CSS: Customize → Additional CSS
• JS: Elements → Hook → wp_footer

Kadence

• CSS: Customize → Additional CSS
• JS: Kadence → Custom Scripts

Conclusion

Adding custom code to WooCommerce is a powerful way to enhance your store, as long as you do it the right way.

Best Practices Recap:

• Use Theme Customizer for CSS
• Use Code Snippets Plugin for PHP & JS
• Use a Child Theme for permanent changes
• Always test in a staging environment first

We hope this helps you make awesome sites better!