Load child theme CSS after Woocommerce CSS
As a WordPress developer, you may often find yourself in a situation where you need to override the default styles of the WooCommerce plugin to match the design of your custom WordPress theme. This can be a challenging task, as the WooCommerce styles are usually loaded before your theme's styles, making it difficult to override them effectively.
In this blog post, we'll explore two methods to ensure that your child theme's CSS is loaded after the WooCommerce CSS, allowing you to easily override the default styles.
Understanding the WordPress Enqueuing Process
Before we dive into the solutions, it's important to understand how WordPress handles the enqueuing of stylesheets and scripts.
When a WordPress page is loaded, the system goes through a specific process to load all the necessary assets. First, it loads the plugins' assets, followed by the theme's assets. This means that the WooCommerce CSS is loaded before your theme's CSS, making it challenging to override the WooCommerce styles.
To overcome this issue, we need to ensure that our child theme's CSS is loaded after the WooCommerce CSS. This can be achieved by using the wp_enqueue_scripts
action hook and adjusting the priority of our child theme's CSS enqueuing.
Method 1: Increasing the Priority of the Child Theme CSS Enqueuing
The first method involves increasing the priority of the child theme's CSS enqueuing to a higher value than the default priority used by WooCommerce.
Here's the step-by-step process:
-
Remove the default WooCommerce CSS enqueuing function:
remove_action('wp_enqueue_scripts', 'woocommerce_theme_styles');
This line of code removes the default WooCommerce CSS enqueuing function, which means that the WooCommerce CSS will no longer be loaded automatically.
-
Enqueue the WooCommerce CSS manually:
add_action('wp_enqueue_scripts', 'woocommerce_enqueue_styles', 10);
function woocommerce_enqueue_styles() {
wp_enqueue_style('woocommerce-smallscreen', plugins_url() . '/woocommerce/assets/css/woocommerce-smallscreen.css');
wp_enqueue_style('woocommerce', plugins_url() . '/woocommerce/assets/css/woocommerce.css');
wp_enqueue_style('woocommerce-layout', plugins_url() . '/woocommerce/assets/css/woocommerce-layout.css');
}
This code manually enqueues the necessary WooCommerce CSS files, ensuring that they are loaded in the correct order.
-
Enqueue the child theme's CSS with a higher priority:
add_action('wp_enqueue_scripts', 'theme_enqueue_styles', 20);
function theme_enqueue_styles() {
$the_theme = wp_get_theme();
wp_enqueue_style('child-understrap-styles', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array(), $the_theme->get('Version'));
// Add any other scripts or styles you need to enqueue
}
In this code, we use the wp_enqueue_scripts
action hook to enqueue the child theme's CSS. The important part is the 20
priority, which is higher than the default priority of 10
used by WordPress. This ensures that the child theme's CSS is loaded after the WooCommerce CSS, allowing you to easily override the styles.
By following these steps, you can ensure that your child theme's CSS is loaded after the WooCommerce CSS, making it easier to override the default styles.
Method 2: Using Dependencies
Another method to load the child theme's CSS after the WooCommerce CSS is to use dependencies. This approach ensures that the child theme's CSS file is loaded only after the necessary WooCommerce CSS files have been loaded.
Here's how you can implement this method:
-
Manually enqueue the WooCommerce CSS files:
add_action('wp_enqueue_scripts', 'woocommerce_enqueue_styles', 10);
function woocommerce_enqueue_styles() {
wp_enqueue_style('woocommerce-smallscreen', plugins_url() . '/woocommerce/assets/css/woocommerce-smallscreen.css');
wp_enqueue_style('woocommerce', plugins_url() . '/woocommerce/assets/css/woocommerce.css');
wp_enqueue_style('woocommerce-layout', plugins_url() . '/woocommerce/assets/css/woocommerce-layout.css');
}
This code manually enqueues the necessary WooCommerce CSS files, ensuring that they are loaded in the correct order.
-
Enqueue the child theme's CSS with dependencies:
add_action('wp_enqueue_scripts', 'theme_enqueue_styles', 20);
function theme_enqueue_styles() {
$the_theme = wp_get_theme();
wp_enqueue_style('child-understrap-styles', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array('woocommerce-smallscreen'), $the_theme->get('Version'));
// Add any other scripts or styles you need to enqueue
}
In this code, we use the wp_enqueue_style()
function to enqueue the child theme's CSS file. The third parameter, array('woocommerce-smallscreen')
, specifies that the child theme's CSS file should be loaded after the woocommerce-smallscreen
CSS file. This ensures that the child theme's CSS is loaded after the WooCommerce CSS, allowing you to override the styles more effectively.
It's important to note that if the woocommerce-smallscreen
CSS file is not loaded for any reason (e.g., the WooCommerce plugin is not active or the file doesn't exist), the child theme's CSS file will not be loaded either, as the dependency will not be met.
Both methods achieve the same goal of loading the child theme's CSS after the WooCommerce CSS, but the choice between them depends on your specific use case and preference.
Overriding WooCommerce Styles
Once you've ensured that your child theme's CSS is loaded after the WooCommerce CSS, you can start overriding the default WooCommerce styles. To do this, you'll need to use more specific CSS selectors to target the WooCommerce elements.
For example, if you want to override the styles for the "Add to Cart" button, you can use the following CSS:
.woocommerce a.button.add_to_cart_button {
/* Your custom styles go here */
}
The key here is to use the .woocommerce
class to target the WooCommerce-specific elements, as this class is added by WooCommerce to its HTML elements. By using this specific selector, you can ensure that your styles take precedence over the default WooCommerce styles.
Additionally, you can use the !important
declaration to force your styles to override the WooCommerce styles, but this should be used sparingly, as it can lead to specificity issues and make the codebase harder to maintain.
Conclusion
In this blog post, we've explored two methods to load your child theme's CSS after the WooCommerce CSS, making it easier to override the default WooCommerce styles. By either increasing the priority of the child theme's CSS enqueuing or using dependencies, you can ensure that your custom styles take precedence over the WooCommerce styles.
Remember, overriding styles can be a delicate process, and it's important to use specific and well-thought-out CSS selectors to avoid any unintended consequences. By following the techniques outlined in this article, you can effectively customize the appearance of your WooCommerce-powered website to match the design of your custom WordPress theme.
If you're using Flowpoint.ai to optimize your website's performance and user experience, you can leverage its advanced analytics and AI-powered recommendations to identify and address any technical issues that may be impacting your WooCommerce integration. Flowpoint can help you pinpoint the specific CSS conflicts and provide tailored solutions to ensure a seamless and visually appealing WooCommerce integration within your WordPress theme
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.