We continue working on our WoodMart WordPress theme, and our new 7.5 update has been released. The main goal of this update was to enhance the user experience when working with the WoodMart theme on mobile devices, adding some quality-of-life features, regular bug fixes, and, of course, introducing two new modern design prebuild websites.
Shop page mobile categories
It is well known that one of the most important factors for the successful development of a store is its accessibility and ease of navigation from mobile devices. That’s why in this update, we have added another option for navigating shop page product categories, which serves as an alternative to the accordion and visually replicates the navigation of the mobile menu, enhancing the store page with a more cohesive design.
Mobile accordion categories
New mobile menu categories
Refactored popups
Pop-up windows serve as an important means of alerting website visitors and providing quick access to specific functionality. In version 7.5, we focused on improving the functionality of pop-up windows based on feedback from our clients. For easier detection, now the close button on all pop-up windows has been moved closer to the window itself. Additionally, mobile scrolling has been enhanced to prevent situations where the entire site is accessible for scrolling after opening a pop-up window despite the site being dimmed and inaccessible for touch. Finally, it’s worth noting that the entire code related to the Magnific Popup library, which our pop-up windows are based on, has been refactored. This has significantly reduced the CSS associated with its operation.
Backdrop-filter header row background
The development of web technologies and the gradual transition of most users to newer versions of web browsers enable us to add options to the WoodMart theme that were not available until recently. Among these options is the “backdrop-filter”, which we have added to the background options of the header builder. The backdrop-filter property allows you to apply graphical effects such as blurring or color shifting to the area behind an element. It’s worth mentioning that because it applies to everything behind the element, to see the effect, the element or its background needs to be transparent or partially transparent. The simplest, but not the only, example of using such an option is the ability to create a frosted glass effect, which will look particularly nice when scrolling through the site with a sticky header enabled. You can see how it looks live on our demo.
Render SVG with image tag in various elements
In older WoodMart versions we displayed SVG images as HTML tags instead of using images. Due to this, certain web server configurations do not allow direct access to SVG files, which in turn requires additional web server settings from the user. Without these settings, SVG images may not be displayed at all. Additionally, rendering full HTML content from SVG images where identical CSS class names define styles can affect one another, often resulting in a broken appearance for all SVG images on the page. To avoid such cases, we have changed the output type of SVG images in elements such as Infobox, Section title, Tabs, and AJAX product tabs, so they are now rendered using a regular “img” tag. The old rendering can be restored using the “woodmart_render_svg_with_image_tag” filter if needed.
“Hidden sidebar” layout for “Product tabs” on single product layout builder
Along with our new “Organic Farm” prebuild website, we have added a product tab layout called “Hidden Sidebar,” which allows for the creation of compact single product pages where content appears from the edge of the screen. This layout also includes options to customize the width, color scheme, and position of appearing content. You can see how it looks live on our demo.
“Accordion on mobile” option for “Product tabs” on single product layout builder
One of the reasons that hindered our clients from fully utilizing the single product layout builder was the inability to simultaneously use product tabs on the desktop and an accordion on mobile. In this update, we have added this capability for the product tab element as well, which can be enabled with the additional option “Accordion on mobile” in case the “Tabs” layout is selected for the element.
Empty cart layout builder
The layout builder allows you to create various cart layouts, but quite often there are cases where after removing all products, the design of the empty cart does not match the custom design of the cart page created by the layout builder. That’s why in this update, we have added a layout builder for the empty cart. You can add it from the “Cart” tab on the “Layout” page.
Refactored “Header builder styles”
Significant changes have been made to the functioning of the header builder’s features, making it less reliant on JavaScript computations. Numerous options related to header height are now executed using CSS custom properties, reducing the overall CSS file size. This will allow for more flexible header customization, make website content adjustments more convenient, and eliminate the need to reload the page when switching between desktop and mobile versions of the site.
Update of tooltip CSS classes
Adding tooltips to various new areas on our website prompted us to update the JavaScript library responsible for rendering tooltips. This change aims to address certain issues with calculating tooltip positions when displayed off-screen on mobile devices. As a result of this update, certain CSS class names in the tooltip structure have been changed, which may affect any custom code created by our clients. If you encounter such issues, please check your code and update the CSS class names according to the following rules: arrow renamed to tooltip-arrow, show renamed to in, bs-tooltip-top renamed to top.
Full changelog
- NEW VERSION: Pills
- NEW VERSION: Organic Farm
- ADDED: Layout “Hidden sidebar” for “Product tabs” in layouts. (Video)
- ADDED: Mobile categories’ layout “Hidden sidebar”. (Video)
- ADDED: Backdrop-filter for header builder rows. (Video)
- ADDED: Option “Accordion on mobile” for “Product tabs” element. (Screenshot)
- ADDED: Product attributes term tooltip. (Video)
- ADDED: Show SKU on checkout page option. (Screenshot)
- ADDED: Option “Dropdown padding” for “Default” design dropdown. (Screenshot)
- ADDED: “Initial number in stock” option in product bulk edit. (Screenshot)
- ADDED: Show the name of the selected HTML Block in the WPBakery admin. (Screenshot)
- ADDED: Width option for Image or SVG element on WPBakery. (Screenshot)
- ADDED: Animation options for Video element on WPBakery. (Screenshot)
- ADDED: WooCommerce Empty Cart page builder. (Screenshot)
- ADDED: Product archive “Filtered by term” condition. (Screenshot)
- FIXED: Hide empty categories option.
- FIXED: Frequently Bought Together JS error.
- FIXED: Sticky navigation issue in Firefox browser.
- FIXED: WCFM buttons on product archive page.
- FIXED: “Empty Space” element size range options on WPBakery. (Topic)
- FIXED: Sticky product on single product page, without layouts. (Topic)
- FIXED: Double dropdown icon in Elementor forms. (Topic)
- FIXED: Duplicated “clear” button on the single product page. (Topic)
- FIXED: Product categories default style with white color scheme.
- FIXED: Scrollbar width on Chromium browser. (Topic)
- FIXED: Product hover buttons in Advanced button styles option. (Topic)
- FIXED: Removed scroll when popups are enabled on the mobile. (Topic)
- FIXED: Removed empty wrapper in “Product meta value” short code. (Topic)
- FIXED: Some themes check warnings. (Topic)
- FIXED: Sticky column with load AJAX issue. (Topic)
- FIXED: Sticky container visibility issue. (Topic)
- FIXED: Translations in theme settings and theme license page. (Topic)
- FIXED: AJAX product tabs element with AJAX load page issue. (Topic)
- FIXED: Wave Validator errors.
- FIXED: Connect Instagram API issue. (Topic)
- FIXED: Duplicate selections in “Product filters” after return to the previous page. (Topic)
- FIXED: Load product grid element issue.(Topic)
- FIXED: Product element issue. (Topic)(Topic)
- FIXED: Output the values of the “Discount” column in the Dynamic Pricing Table. (Screenshot)
- FIXED: Product gallery on the products loop with product list view issue. (Topic)
- FIXED: Swap menus option in Mobile menu Header Builder element. (Topic)
- FIXED: 360 degree view element init. (Topic)
- FIXED: Ajax Products Tabs element for WPBakery page builder. (Topic)
- FIXED: Update WooCommerce registration form. (Topic)
- FIXED: Scroll per page with element Brand issue. (Topic)
- FIXED: PHP error in product element. (Topic)
- FIXED: Ajax action “woodmart_get_recently_viewed_products”. (Topic)
- FIXED: PHP Error. (Topic)(Topic)
- FIXED: Google Map element on Elementor builder. (Topic)
- FIXED: Mobile menu console errors. (Topic)
- FIXED: Lazy loading image issue. (Topic)
- FIXED: Links validator issue. (Topic)
- FIXED: Product filter with query type “AND” issue. (Topic)
- FIXED: Layout PHP notice on WooCommerce order page. (Topic)
- FIXED: Checkout Manager fields render. (Topic)
- FIXED: Free shipping bar compatibility with WooCommerce Payments. (Topic)
- FIXED: Capability for Layouts and Dynamic Discounts. (Topic)
- FIXED: Dynamic Discounts with Login to see add to cart and prices option. (Topic)
- FIXED: Side login form issue. (Topic)
- FIXED: Remove unnecessary products from wishlist on first page loading. (Topic)
- FIXED: Single product tabs issue. (Topic)
- FIXED: WooCommerce export products issue. (Topic)
- FIXED: Image crop with SVG image issue.
- REFACTORED: Header builder styles.
- REFACTORED: Magnific popup styles.
- IMPROVED: Render SVG with image tag in Infobox, Section title, Tabs, AJAX tabs elements.
- IMPROVED: Moved close button for popup. (Topic)
- IMPROVED: Renamed Accordion style “Shadow” to “Boxed” and added background option for this style.
- IMPROVED: Warning notice when trying to create a single product layout when no products exist. (Screenshot)
- IMPROVED: Recently view product with cache plugin. (Topic)
- DEV: Added filter “woodmart_render_svg_with_image_tag” for SVG icons in Infobox, Section title, Tabs, AJAX tabs elements.
- DEV: Added “woodmart_show_all_products_button_in_categories_nav” filter.
- UPDATED: Google fonts list.
