[Resolved] override wcviews-onsalebadge.css

[Author]

Posts

[Marj]

I am trying to: change CSS for sales flash icon

I visited this URL: https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/

I expected to see: how to override CSS

Instead, I got: no help

Using Firebug, I could disable the styles for the flash icon but, when I transported that CSS to my stylesheet and used the !important declaration, it had no effect. The only way to overcome these styles, so far as I could tell, was to modify the stylesheet located here:
woocommerce-views\res\css\wcviews-onsalebadge.css

I understand that code is at risk of being overwritten in the case of your plugin updating.

I spent a good half hour trying to figure out how to modify this style in Views settings and I got absolutely no where. When I scanned the forum, no one else seemed to want to know how to do this.

I am using the Genesis Framework with a custom child theme.

The code brought in with the plugin was tossing the sale flash nearly off screen in responsive viewports. I merely remarked out the offending code. These are the elements modified in
/wp-content/plugins/woocommerce-views/res/css/wcviews-onsalebadge.css?ver=2.6.0:

.woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale {
display: block;
position: absolute;
top:0px;
/*left:0px;*/
}
.wcviews_onsale_wrap {
/*float: left;
position:relative;*/
}

Shall I disable updates for the plugin in functions.php or is there a better way to preserve these changes so the site doesn't break on update?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

This is really weird case since we managed to overwrite styles for both: WooCommerce and WooCommerce Views plugin in our theme: Toolset Starter.

Stylesheet: woocommerce.css

You can see example here:
=> hidden link

If overwriting CSS really does not work there is no need to edit the plugin. You can just disable on sale badge CSS by pasting this code to function.php:

add_action( 'wp_enqueue_scripts', 'dequeue_onsale_badge' );
function dequeue_onsale_badge()
{
 wp_dequeue_style(woocommerce_views_onsale_badge);
}

But you have to remember that there still is the original WooCommerce styling for that badge.

If your issue still persists:
1)
Could you please share problem URL?

2)
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.