CSS / JS Files Not Added to Page

118 June 13, 2024

Occasionally, plugins or themes may unintentionally remove the necessary CSS and/or JS files required by Donation Platform for WooCommerce. When this occurs, you’ll need to manually add these files to ensure the proper functioning of the plugin.

Identifying the Issue

Symptoms

  • Missing Styling: Elements of the Donation Platform for WooCommerce may appear unstyled or broken.
  • Functionality Issues: Donation Form spinner loads forever.

Troubleshooting

  1. Open Browser Developer Tools: Press F12 or right-click on the page and select Inspect to open the developer tools.
  2. Navigate to the Console: Click on the Console tab within the developer tools.
  3. Search for Missing Files: Type wcdp.min.js and wcdp.min.css in the search bar of the console (Cmd F) to check if these files are being loaded or if there are any errors related to them.
    • Missing Files: If you do not find the files, it confirms that the required CSS and/or JS files are missing.

Manually Adding CSS/JS Files

Step 1: Add the Files to Your Page

To manually include the required CSS and JS files, insert the following HTML code into your page. Most page builders allow you to add custom HTML by using an HTML block.

  1. Adding the CSS File:
<link rel="stylesheet" href="/wp-content/plugins/wc-donation-platform/assets/css/wcdp.min.css">

Add the CSS file when the donation form shortcode appears unstyled or broken.

  1. Adding the JS File:
<script src="/wp-content/plugins/wc-donation-platform/assets/js/wcdp.min.js"></script>

Add the JS file when the donation form shortcode spinner loads forever.

Step 2: Verify Changes

  1. Test: Check your website to ensure that the Donation Platform for WooCommerce is now functioning correctly and styled appropriately.
  2. Inspect: Use your browser’s developer tools to confirm that the CSS and JS files are being loaded successfully.

Conclusion

If you encounter issues with missing CSS or JS files for the Donation Platform for WooCommerce, following these steps to manually add the files should resolve the problem. By ensuring that the necessary assets are properly enqueued, you can guarantee the smooth operation of the plugin on your WordPress site.