Progress Bar CSS Style

My progress bar Woodmart CSS style stopped working for some reason, even though it is activated in the theme menu.

Please take a look:

Hello,

The progress bar provided by our theme relates to product QTY only. Your screen shows the progress bar which does not relate to our theme.

Please provide a more detailed description of the problem step by step so that I could reproduce it. And provide your site admin access as well as the product URL where I can check it.

Best Regards

Hi Elise,

Please re-read private section of my previous message, it contains most of the info you are asking me for.

I will put additional screenshot and product link in the private area.

Hello,

WP Bakery page builder element Progress bar is an independent element that does not relate to our theme. Please here is theme-related elements https://xtemos.com/docs/woodmart/shortcodes-2/

That is why their styles are different and its customization is beyond our support scope.

Best Regards

Dear Elise,

Well, I am not asking to customize their styles. Problem I’ve encountered is your CSS style for the element not working, not WPBackery’s.

Hello,

I am confused.

My progress bar Woodmart CSS style stopped working for some reason, even though it is activated in the theme menu.

Which menu do you mean?

Your screen shows the Progress bar that does not related to our theme. Please provide the screen related to our theme. Describe the problem in the step by step action so that I could reproduce it.

However, if I activate WP Backery CSS for Progress Bar, it starts working, but styling slightly differs from Woodmart one.

This progress bar does not relate to our theme. Here are the elements relate to our theme https://xtemos.com/docs/woodmart/shortcodes-2/

Here is the Progress bar provided by our theme
https://xtemos.com/docs/woodmart/faq-guides/set-stock-progress-bar/

Best Regards

Elise,

Which menu do you mean?

CSS Generator in Woodmart options

Describe the problem in the step by step action so that I could reproduce it.

Take a look at the link in Private Section. You can try to add another bar or whatever, and see for yourself.

This progress bar does not relate to our theme.

It is not your element, but you have your own .css styling for the thing, and it is not working. That’s the problem.
https://i.gyazo.com/b31b14a0c0e745fa61d0c58720c49a26.png

Hi,

Sorry for the misunderstanding, but for resolving this issue we need to first explain how CSS Generators work in our theme.

Since our theme has two types of elements: Xtemos Elements and Default WPBakery Elements there are two style files. For both styles files, there are two Generator pages in our theme Dashboard http://prntscr.com/qnw2f1. If you disable Progress Bar in our theme styles generator http://prntscr.com/qnw3n3 you will disable only our theme styles that partially overwrite WPBkery element styles for better compatibility with our theme design (for example border-radius and ex).

But if you disable Progress Bar in WPBakery CSS Generator http://prntscr.com/qnw5qf you will remove all element styles and it will be no longer visible on your site. To resolve this issue try to enable the following element in WPBakery CSS Generator.

Regards

Hi Bogdan,

Thank you for thorough explanation.
I am aware of the way it is supposed to work, as I’ve studied the problem to the best of my ability before bothering you.

The reason I switched Progress Bar in WPBakery CSS Generator off was to showcase the problem to your colleague.

Yes, WPBackery CSS is functional. If I turn it on, progress bar works. However, same could not be said about Woodmart CSS. If I turn it on, it applies no significant changes. You can compare it to your demos (https://woodmart.xtemos.com/demo-corporate/demo/corporate/; https://woodmart.xtemos.com/demo-mobile-app/?opt=mobile_app) – it looks differently. And it looked differently on our site, too, beforehand. Now it has different, non-Woodmart appearance.

We have cached your site CSS and see the issue.

First, try to update your theme to the latest 4.4 version and update WPBakery to the latest 6.1 version via “Begin updating plugin” button on the Plugins page.

If the problem remains, please contact us and we will investigate in further.

Best Regards

Hi Bogdan,

I’ve updated both WPBakery and the theme, problem remains.

Hi,

We have found cause of the issue and it will be fixed in the next theme update. To fix this issue now, you can temporary disable child theme or add the following code snippet to the Custom CSS area in Theme Settings.

.vc_progress_bar .vc_single_bar {
  border-radius: 0;
  box-shadow: none;
}
.vc_progress_bar .vc_single_bar .vc_label {
  padding: 0.6em 1.2em;
  text-transform: uppercase;
  text-shadow: none !important;
  letter-spacing: 0.2px;
  font-weight: 600;
  font-size: 12px;
}
.vc_progress_bar .vc_single_bar .vc_bar {
  border-radius: 0;
  transition: width 0.8s ease;
}

Best Regards

[Author]

Posts