Public Ticket #4555475

CSS Overrides not working on Bulk Order Form

Closed
Comments
2 Tickets
Solacon started the conversation 6 months ago on April 1, 2026 at 8:50am

Hi WebWizards Team,

We are currently styling a B2B project using B2BKing, and we are facing a persistent issue when trying to customize the Bulk Order Form styles.

Despite our efforts, we cannot override the default styles of the "Add to Cart" buttons and filters within the Bulk Order section. We’ve noticed that style-bulkorder.min.css seems to be taking priority regardless of our customizations.

We have already tried the following without success:

  1. High Specificity Selectors: Using html body #b2bking_my_account_container ... to increase weight.
  2. !important declarations: Added to all our CSS rules.
  3. PHP Enqueueing: Using wp_enqueue_scripts with priority 9999 to load our child theme CSS last.
  4. PHP Injections: Using wp_head and wp_footer hooks to inject <style> tags directly into the HTML.
  5. Dashboard Hooks: We even tried the salesking_dashboard_head hook (as suggested by your AI assistant) but it didn't solve the issue.

It seems the plugin is loading the minified CSS in a way that bypasses standard WordPress hierarchy.

Our goal: We need to change some styles of the Bulk Order elements and other panels to match our corporate identity.

Could you please point us to the correct way or the specific hook/method to properly override these styles?

Thanks for ur help! Best regards!

2,762
KingsPlugins replied 6 months ago on April 1, 2026 at 1:15pm

Hi there,

Thank you for purchasing our plugin!

 

B2BKing doesn't affect the loading hierarchy but it does use highly specific CSS selectors - we have to do this because otherwise themes constantly overwrite the plugin's styles.

The key is to write your CSS rules with equal or greater specificity than ours, combined with `!important`. Just using `!important` alone won't be enough.

For example, to override the "Add to Cart" button in the bulk order form, you'd need something like this:

 

.b2bking_cream_order_form_final_lines button.b2bking_bulkorder_indigo_add.b2bking_bulkorder_cream_add {

    background: blue !important;

}

.b2bking_cream_order_form_final_lines button.b2bking_bulkorder_indigo_add.b2bking_bulkorder_cream_add:hover {

    background: green !important;

}

 

And for the filters:

 

.b2bking_bulkorder_form_cream_main_container .b2bking_bulkorder_form_container_cream_filters.b2bking_filters_open {

    background: gray !important;

}

 

The idea is to match or exceed the specificity of our selectors (that usually means having more elements. The browser's Inspect tool can be very helpful to see exactly which selector is being usd).

 

Feel free to send me the CSS rules you're trying to apply and I'm happy to adjust them so they work properly. That should save you some time!

Kind regards,
Stefan

Sign In