Theme styling broken after update

Hello, I’ve built a website for a client with your WoodMart theme + Elementor, and up until this point we had no issues. During our scheduled maintenance period we updated the theme from 7.5.2 to 8.0.4 and Woodmart Core from 1.0.43 to 1.1.0.

After updating the website styling is broken, especially in the header and footer.

Hello,

Please provide us with your admin access from your updated website so we can log in and check this on your end.

Thank you in advance.

Admin access provided

Attachments:

You must be logged in to view attached files.

1. Header Buttons:
• Go to the button settings and set the text color to white on hover (Screenshot https://monosnap.com/file/78FGHuoUO16VGKnhJmclGzPhK6B5qj).
• Then add the following custom CSS to the Global Custom CSS Area in Theme Settings:

.btn.btn-style-bordered.btn-color-white:hover {
    background-color: transparent;
}

2. Search Button in the Header:
• Add the following custom CSS to the Global Custom CSS Area in Theme Settings:

.whb-main-header .searchform .searchsubmit {
    background-color: transparent;
}

3. Button Underline in the Footer:
• Open your footer in the Elementor editor.
• Select the required buttons and set a transparent color for the option highlighted in this screenshot:
(Screenshot https://monosnap.com/file/xccrxyeV8OMAj6fFyfm9uA9i1kXXiy)

Kind Regards

Bogdan, our developer can fix this with CSS, that was not the point. We can’t go through the complete website and every page to check if your theme didn’t break something on every update. Please advise with some better solution

Also there is padding for the <main class=”container”> element, and probably a lot of other issues

Hi,

Since your site includes custom code and uses Elementor Kits for forms and buttons styling, the only solution is further use of custom CSS. Our theme cannot fully support all client-created customizations. If you implement customizations, you need to check the changelog, test the site before updates, and adapt your code to new versions. Unfortunately, the alternative is to avoid custom code or keep the site on an older theme version.

Regarding your container padding issue, it is caused by custom code in your child theme. Remove this code or disable the child theme to verify the issue.

Kind Regards

Hi,

The header buttons are entirely managed by Woodmart and have no connection to the Elementor Kit. Despite this, they remain broken.

Thank you for the help so far, we will keep this client in WoodMart since we built the entire site but if I could choose again I would pick some other theme.

Best regards,
Marko

Search Button in the Header. The Elementor Kit on your site is causing an issue with the border of the search button (video: https://monosnap.com/file/fvOQYBOnRdp41svDCskB2WKs3eDHjC). To fix this, you can either modify the Elementor Kit or use the Custom CSS code provided in the previous response https://xtemos.com/forums/topic/theme-styling-broken-after-update/#post-622289.

Header Buttons. Changes to buttons, which were mentioned in our changelog, were made to consolidate button styles, reduce style file sizes, and improve performance by allowing the disabling of unused button styles. These changes added a hover background to bordered buttons, which differs from earlier versions. If you prefer the previous style, you can keep the custom code provided earlier (https://xtemos.com/forums/topic/theme-styling-broken-after-update/#post-622289) or use Elementor’s button element already present on your site (screenshot https://monosnap.com/file/IveqhyvHDeH2hlGFbtAT2KkXRRmocb) by adding it to the header via an HTML Block. Currently, there are no significant changes to bordered button styles planned in the near future, and you can continue using the previous custom code related to the header bordered buttons, knowing it will work in the future updates.

If you encounter any other issues on your site, feel free to reach out to us, and we’ll be happy to help.

Kind Regards

On top of the currently broken things I’ve provided, you

changed the structure of the blog page

changed the name of the CSS variables for margins (https://prnt.sc/-DfTpTN9zalX) I can provide more links if needed

you’ve introduced dynamic pagination for the product page gallery (https://prnt.sc/0YkUSNxOr8jS) which can’t be turned off/adjusted in the admin panel, so we had to write custom code for this filter: “woodmart_min_items_for_dynamic_pagination”

And I can provide even more details once our developer is done with all the tasks.

I can understand that you removed the CSS code to save on the file size (less than 1kb when compressed), but by changing all of the names for margin variables, introducing new features without fallback, and layout changes, you are making us spend 2 days in the regular maintenance process (QA + Fixes + QA). And that is insane.

The second piece of advice you provided is to skip updating the theme. In order to skip updating the theme, we need to skip updating the WordPress version (since having the newest WP and old theme will cause an error sooner or later), and by skipping that we are skipping the update process for all of the other plugins. That is not acceptable.

Thank you for your help, I’m sure we will need it in the future.

Best,
Marko

Hi,

Dynamic Pagination in the Main Product Gallery. Dynamic pagination was introduced in update 7.6 (19-08-24). This feature was implemented based on client requests and activates when there are 6 gallery items. It was optimized for better performance in galleries placed within narrow columns and on mobile devices.

From the screenshot you provided, the pagination on your single product page appears to have been modified with custom code. In this case, you need to:
• Disable the custom code,
• Update your custom code to match the current theme structure, or
• Disable the dynamic gallery pagination using the following custom code, which should be added to the functions.php file of your Child Theme:

add_filter('woodmart_min_items_for_dynamic_pagination', function () {
	return 100;
});

Over the past 4 months, we have not received significant complaints regarding the dynamic pagination in the product gallery. For this reason, the option to disable it is not yet available as a built-in setting and can only be done with custom code.

Margin variable. As part of the grid and layout structure refactor in update 8.0, we renamed the technical variable --margin-bottom to --wd-mb. This change shortened the variable and added a theme-specific prefix to avoid conflicts with third-party plugins, which had been a recurring issue reported by clients.

These changes should not cause major problems unless you were using the old variable in your custom code. Unfortunately, we cannot support custom code created by clients and if this variable was used in your custom code, you need to update it according to the new theme changes.

Kind Regards

[Author]

Posts