Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Override theme styles with plugin styles – Woocommerce

I am writing a custom WordPress plugin, I am using the OceanWP Theme with Elementor, and am trying to enqueue/register Bootstrap 4.5 styles/scripts as well as my own custom styles/scripts.

However, OceanWP’s styles are still taking precedence being used instead of my styles/scripts.

Currently, I am trying to over ride the themes assets by upping the priority in the add_action hook but am not having any luck.

I am trying to display a custom multi-part form and display it on a page using a shortcode.

public function __construct()
        {
            //set dirpath
            $this->_dirpath = dirname(__FILE__);

            add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 9999);
            add_action('wp_footer', array($this, 'cmmc_scripts'));

            add_shortcode("sme-cmmc-form", array($this, "displayCmmcForm"));
        }

        public function cmmc_scripts()
        {

            ///wp_enqueue_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all');
            wp_enqueue_script('popper_js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', array('jquery'), NULL, true);
            wp_enqueue_script('bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), NULL, true);

            wp_enqueue_script('cmmc_js', plugin_dir_url( __FILE__ ) . 'assets/js/app.js', array('jquery'), '1.0' );
            //wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
            
        }

        public function cmmc_styles() {

                wp_register_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all' );
                wp_enqueue_style('bootstrap_css');
                wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));

        }

Can someone please tell me how I could possibly over ride the themes styles, even if it is just for this plugin, or dequeue the styles for this single page temporarily?

EDIT: to add in the enqueued styles and scripts from the theme

            add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_css' ) );

            // Load his file in last.
            add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );

            // Remove Customizer CSS script from Front-end.
            add_action( 'init', array( 'OCEANWP_Theme_Class', 'remove_customizer_custom_css' ) );

            // Load theme js.
            add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_js' ) );

/**
     * Load front-end scripts
     *
     * @since   1.0.0
     */
    public static function theme_css() {

        // Define dir.
        $dir           = OCEANWP_CSS_DIR_URI;
        $theme_version = OCEANWP_THEME_VERSION;

        // Remove font awesome style from plugins.
        wp_deregister_style( 'font-awesome' );
        wp_deregister_style( 'fontawesome' );

        // Load font awesome style.
        wp_enqueue_style( 'font-awesome', OCEANWP_THEME_URI . '/assets/fonts/fontawesome/css/all.min.css', false, '5.11.2' );

        // Register simple line icons style.
        wp_enqueue_style( 'simple-line-icons', $dir . 'third/simple-line-icons.min.css', false, '2.4.0' );

        // Register the lightbox style.
        wp_enqueue_style( 'magnific-popup', $dir . 'third/magnific-popup.min.css', false, '1.0.0' );

        // Register the slick style.
        wp_enqueue_style( 'slick', $dir . 'third/slick.min.css', false, '1.6.0' );

        // Main Style.css File.
        wp_enqueue_style( 'oceanwp-style', $dir . 'style.min.css', false, $theme_version );

        // Register hamburgers buttons to easily use them.
        wp_register_style( 'oceanwp-hamburgers', $dir . 'third/hamburgers/hamburgers.min.css', false, $theme_version );

        // Register hamburgers buttons styles.
        $hamburgers = oceanwp_hamburgers_styles();
        foreach ( $hamburgers as $class => $name ) {
            wp_register_style( 'oceanwp-' . $class . '', $dir . 'third/hamburgers/types/' . $class . '.css', false, $theme_version );
        }

        // Get mobile menu icon style.
        $mobileMenu = get_theme_mod( 'ocean_mobile_menu_open_hamburger', 'default' );

        // Enqueue mobile menu icon style.
        if ( ! empty( $mobileMenu ) && 'default' !== $mobileMenu ) {
            wp_enqueue_style( 'oceanwp-hamburgers' );
            wp_enqueue_style( 'oceanwp-' . $mobileMenu . '' );
        }

        // If Vertical header style.
        if ( 'vertical' === oceanwp_header_style() ) {
            wp_enqueue_style( 'oceanwp-hamburgers' );
            wp_enqueue_style( 'oceanwp-spin' );
        }

    }

    /**
     * Returns all js needed for the front-end
     *
     * @since 1.0.0
     */
    public static function theme_js() {

        // Get js directory uri.
        $dir = OCEANWP_JS_DIR_URI;

        // Get current theme version.
        $theme_version = OCEANWP_THEME_VERSION;

        // Get localized array.
        $localize_array = self::localize_array();

        // Comment reply.
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }

        // Add images loaded.
        wp_enqueue_script( 'imagesloaded' );

        // Register nicescroll script to use it in some extensions.
        wp_register_script( 'nicescroll', $dir . 'third/nicescroll.min.js', array( 'jquery' ), $theme_version, true );

        // Enqueue nicescroll script if vertical header style.
        if ( 'vertical' === oceanwp_header_style() ) {
            wp_enqueue_script( 'nicescroll' );
        }

        // Register Infinite Scroll script.
        wp_register_script( 'infinitescroll', $dir . 'third/infinitescroll.min.js', array( 'jquery' ), $theme_version, true );

        // WooCommerce scripts.
        if ( OCEANWP_WOOCOMMERCE_ACTIVE
            && 'yes' !== get_theme_mod( 'ocean_woo_remove_custom_features', 'no' ) ) {
            wp_enqueue_script( 'oceanwp-woocommerce', $dir . 'third/woo/woo-scripts.min.js', array( 'jquery' ), $theme_version, true );
        }

        // Load the lightbox scripts.
        wp_enqueue_script( 'magnific-popup', $dir . 'third/magnific-popup.min.js', array( 'jquery' ), $theme_version, true );
        wp_enqueue_script( 'oceanwp-lightbox', $dir . 'third/lightbox.min.js', array( 'jquery' ), $theme_version, true );

        // Load minified js.
        wp_enqueue_script( 'oceanwp-main', $dir . 'main.min.js', array( 'jquery' ), $theme_version, true );

        // Localize array.
        wp_localize_script( 'oceanwp-main', 'oceanwpLocalize', $localize_array );

    }
Tags:

3

Answers


  1. 0

    It’s hard to say how to dequeue the scripts w/o having a look at the theme source code. Anyways usually you just need to wait until the theme has done it’s job, hook into wp and them remove the styles searching for their handles name. Something like this:

    add_action('after_setup_theme','alter_styles');
function alter_styles(){
    wp_dequeue_style();
    wp_dequeue_script();
}

    Instead, speaking of your code, first question is: are you sure you load that code at the right time, in the right place or does it get executed at all?
    You can do something like:

    add_action('template_redirect','my_template_redirect');
function my_template_redirect(){
    if (is_page('your_page')){
        // Load class / do stuff with scripts/styles
    }
}

    to be sure and execute the code just for that particular page

    Login or Signup to reply.
  2. 0

    If you’re using the same css class names, in your css file just add !important before the semi-colon to the attributes you want to force.

    Login or Signup to reply.
  3. 0

    There are a number of ways you can get your stylesheets to load after other stylesheets are loaded. You have already tried a few ways, but the parent theme is a very high priority of 9999 so you need to use an even higher one or it won’t work.

    1. Priority

    You are using priority 9999 in your add_action, but if you look at the parent theme, it uses:

    add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );

    The priority for your code isn’t actually higher than the parent theme, so you need to go higher again, e.g.

    add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 10000);

    2. Dequeuing (Note, you need to match the values used when it was enqueued)

    You said dequeuing didn’t work for you, but note that when you dequeue a style the priority determines when it runs – just like when you are enqueuing – so you need to use a higher priority than what was used when it was enqueued. It also must use the same hook (or a later one).

    As we saw above, you need to do this with a priority higher than the 9999 they were enqueued with, e.g.

    function dequeue_oceanwp_styles() {
    wp_dequeue_style('oceanwp-style');
    wp_deregister_style('oceanwp-style'); 
}
/* Now call this function with a higher priority than 9999 */
add_action( 'wp_enqueue_scripts', 'dequeue_oceanwp_styles', 10000);

    3. Dependencies

    If that doesn’t work you can set up dependencies between the styles to force the order.

    When you use either wp_register_style or wp_enqueue_style, you can specify dependencies for the stylesheet you are registering/enqueuing – i.e. the other stylesheets needed by your stylesheet. This means that the stylesheet you are registering won’t get loaded until after the ones it depends on.

    To do this, you pass an array of the handles for the stylesheets that must be loaded first, e.g.

    // create an array with the handles of the stylesheets you want to load before yours
$dependencies = array('oceanwp-style', 'oceanwp-hamburgers', /* etc. */ ); 
/* Noew pass this in as the dependencies for your stylesheets */
wp_register_style('bootstrap_css', 
    'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', 
    $dependencies, /* array of dependencies */
    NULL, 'all' );
wp_enqueue_style('bootstrap_css');

/* Add bootstrap to the dependencies, if your custom_styles needs it */
$dependencies[] = 'bootstrap_css'; 

wp_enqueue_style('custom_styles', 
    plugins_url('/assets/css/styles.css', __FILE__),
    $dependencies, /* array of dependencies */
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search