Last Woodmart update breaking all custom CSS added previously

Hi,

I have just updated to the last Woodmart version on a test environment and it seems that update breaks all the custom CSS added previously. (see private content for clarification & details).

Thanks for checking this.
Best regards,
Bertrand

Hello,

We have refactored our CSS code to optimize our theme in our 6.0 update. That is why you need to revise all your custom CSS you wrote before. Read our 6.0 tutorial with all the explanation here https://xtemos.com/docs/woodmart/faq-guides/woodmart-update-6-0-explained/

Kind Regards

Hi,

This update is a total mess… I made a list with all CSS that needs to be revised:

Decrease menu items gap (header)

.mega-menu-list .sub-sub-menu li a, .menu-mega-dropdown .sub-sub-menu li a {
padding: 7px 0;
}

This one does not work at all

Instagram widget transparency & color homepage

.instagram-widget .instagram-content-inner {
background: rgba(197,91,82,0.4);
}

This one works and sometimes don’t…

increase logo brand sizing (homepage carrousel)

.brands-widget .brand-item img {
max-height: 80px;
}

Not working properly and has bugs (logos are not loading)
Logos are not resising at all

Decreasing size of checkout text tabs

.title-size-small .wt-checkout-steps ul li {
	font-size: 14px;
}

Does nothing

Accordeon tab adjustment (single product page)

.tabs-layout-accordion .woodmart-scroll .woodmart-scroll-content {
max-height: 600px;
}

Does nothing

Increasing text size of menu price in a tab module

.vc_tta-panel-body .menu-price-title {
  font-size: 14px;
  font-weight: 400;
}

Font weight working but not font size

Resising body text of tab module

.vc_tta-panel-body .menu-price-details {
    font-size: 14px;
	font-weight: 300;
	font-style: normal;
}

Font weight working but not font size and style either

Google map box background transparency

.woodmart-google-map-content-wrap>.woodmart-google-map-content {
	background: rgba(197,91,82,0.4);
	margin-top: 20px;
	height: 160px;
}

Background of the box remains white and is not transparent anymore

Shop little bag icon

.wd-add-btn-replace .add-to-cart-loop:before {
    content: ""\f126"";
}

Still working in shop area except on other Woodmart widgets (check homepage)

hide blog post author

body .woodmart-entry-meta .entry-meta-list .meta-author {
display: none;
}

Does nothing

Hide blog post category

body .meta-post-categories {
display:none;
}

Does nothing

Hide wishlist share icons (wishlist page)

.woodmart-wishlist-share {
display: none;
}

Does nothing

More CSS corrections in the private area

Plus, there are many other errors.

Checkout page became a mess (texts are not aligned properly, styles are not the same as before…)
I invite you to check for yourself (see weblink)
Internet Explorer became a mess (display is not even functional anymore on Internet Explorer)

Hope we can figure this out together.

Best regards,

In the latest theme update we refactor our theme styles to implement CSS variables. CSS variables and changing CSS classes prefix from “.woodmart-” to “.wd-” allows us to reduce theme styles and increase theme performance. In your case most of your custom CSS does not work because it contains old .woodmart- class prefix and simple changing it to .wd- will fix the issue, but unfortunately several classes has been completely renamed or removed due to theme HTML structure simplification and in that case custom CSS need to be refactored. More about changes in classes can be found in correspondence table (https://docs.google.com/spreadsheets/d/1b_PBt1itPNby4mkpeV_VcRrQHPHjtuF9DIs8jJE0maQ/edit#gid=0) and theme migration guide (https://xtemos.com/docs/woodmart/faq-guides/woodmart-update-6-0-explained/).

1. Decrease menu items gap (header).
Following custom code is working. Video: https://gyazo.com/03b05d17ca409dbcdcb901f759f866c1

2. Instagram widget transparency & color homepage.
Following custom code is working. Video: https://gyazo.com/52e3aba38516c2e1a660acf9802120b3

3. Following custom code is working.
Following custom code is working. Video: https://gyazo.com/0b1659d39facca744d4bd20212f45b1a

4. Decreasing size of checkout text tabs.
Try to replace the previous code with this one:

.title-size-small .wd-checkout-steps li {
	font-size: 14px;
}

5. Accordion tab adjustment (single product page).
Try to replace the previous code with this one:

.tabs-layout-accordion .wd-scroll .wd-scroll-content {
max-height: 600px;
}

6. Increasing text size of menu price in a tab module.
Try to replace the previous code with this one:

.vc_tta-panel-body .menu-price-desc-wrapp .menu-price-title {
  font-size: 14px;
  font-weight: 400;
}

7. Resising body text of tab module.
Try to replace the previous code with this one:

.vc_tta-panel-body .menu-price-desc-wrapp .menu-price-details {
    font-size: 14px;
	font-weight: 300;
	font-style: normal;
}

8. Google map box background transparency.
Try to replace the previous code with this one:

.wd-google-map-content-wrap>.wd-google-map-content {
	background: rgba(197,91,82,0.4);
	margin-top: 20px;
	height: 160px;
}

9. Shop little bag icon.
Following custom code is working. Video: https://gyazo.com/5b3be078680a7574302a22fa9a90e6c0

10. hide blog post author.
Try to replace the previous code with this one:

body .wd-entry-meta .entry-meta-list .meta-author {
display: none;
}

11. Hide blog post category
Following custom code is working. Video: https://gyazo.com/e01e9766edf07baeca3485bd2038258b

12. Hide wishlist share icons (wishlist page)
Try to replace the previous code with this one:

.wd-wishlist-share {
display: none;
}

13. changing icon in the cart panel
Try to replace selector from body .cart-widget-side .widget_shopping_cart .empty:before to body .cart-widget-side .widget_shopping_cart .wd-empty-mini-cart:before.

14. changing icon on the empty compare page.
Try to replace selector from .woodmart-empty-compare:before to .wd-empty-compare:before.

15. changing icon on the empty wishlist page.
Try to replace selector from .woodmart-empty-wishlist:before to .wd-empty-wishlist:before.

Since WordPress considers dropping support for IE 11 (https://www.pcmag.com/news/wordpress-wants-to-drop-support-for-internet-explorer-11) because browser usage for the first time fell below 1% and currently stand at 0.46% and to utilize modern web technologies such as CSS variables and modern JS, our team decided to reduce the support of Internet Explorer. Unfortunately, a completely equal frontend view relative to modern browsers is no longer guaranteed. Following changes allow us to hugely decrease theme style files, increase site performance in modern web browsers and implement even more modern web technics in the future.

Kind Regards

[Author]

Posts