We are pleased to announce the release of WoodMart Theme Update 7.4, a result of extensive efforts undertaken over the past few months. This update is strategically aligned with our upcoming 8.0 release, which will feature full Gutenberg compatibility. This update includes comprehensive refactoring, optimizations, a new mobile menu style, checkout fields manager, the integration of a new Swiper slider JavaScript library, and of course new prebuilt websites. WoodMart 7.4 is engineered to bolster the theme’s foundation, ensuring enhanced performance and adaptability to evolving web development standards. This update serves as a critical preparatory phase for the imminent major release, focusing on aligning the theme with the latest industry standards. Users are advised to carefully review potential breaking changes as we advance towards a more technically refined and feature-rich WoodMart experience.
In this update, we change a lot in our theme’s code base so let’s walk through all significant updates and we will try to explain why we did them. Pay attention to changed or removed CSS classes to adjust your customizations made in the child theme or Custom CSS if any.
Checkout fields manager
In the new version, we’ve introduced the capability to edit checkout fields. By adding this feature, you can also eliminate one more plugin on your website. Within this interface, users can disable specific fields, rearrange their positions, and even organize them into two columns for a more customized and streamlined checkout experience. Also, you can make them required/not required. Note that it works with the default WooCommerce checkout and not with the new WooCommerce checkout block.
Swiper JS carousel
In prior versions of the WoodMart theme, three distinct carousel libraries—OWL, Slick, and Flickity—were employed. However, the 7.4 update marks a significant shift, replacing all carousel libraries with Swiper. This strategic transition was executed to optimize both the scripts and styles within the theme, facilitating the seamless integration of valuable enhancements. Beyond mere optimization, this change contributes to accelerated website rendering, directly influencing Google PageSpeed scores. The decision to move away from OWL, Slick, and Flickity was driven by the stagnant development of OWL carousel over the past four years, leading to issues in quality support and the incorporation of diverse enhancements. Slick carousel, while functional, was exclusively utilized in the single product gallery, and Flickity carousel was confined to the slider. Opting for a more contemporary solution, the shift to Swiper allowed us to consolidate our carousel functionality into a single library.
Swiper itself underwent modularization, enabling a reduction in library size by excluding modules not utilized in the theme. Post-transition, WoodMart now incorporates several beneficial features. Users can now select fractional item quantities (e.g., 3.5, 4.2, 5.7) for improved visual representation on the carousel, a useful feature signaling to customers that they can swipe to reveal more items. The update introduces options for styling carousel arrows to enhance user experience or align with specific design preferences. Additional customization options include carousel pagination and scrollbar styles, catering to diverse user interactions with the carousel. Noteworthy new functionalities include a “Synchronization” option, allowing the linkage of two carousels. For instance, a carousel featuring banners can now be synchronized with a carousel showcasing advertised products, ensuring that changing banners dynamically alters the associated products. The “Auto height” option proves valuable when dealing with items of varying dimensions. Finally, the “Dynamic pagination control” option becomes particularly useful when dealing with large carousels, providing a more aesthetically pleasing solution to pagination on websites. Furthermore, it is crucial to highlight that classes prefixed with owl–, flickity-, slick-* have been removed, and media queries for carousels have undergone modification, streamlining the overall theme structure.
“Drilldown” layout for “Mobile menu”
Introducing the “Drilldown” for the Mobile Menu – In our relentless pursuit of enhancing user experience on mobile devices, we have implemented a refined layout for the mobile menu. Recognizing that a significant portion of sales now occurs through mobile devices, this enhancement is a pivotal step in our commitment to optimizing and elevating our theme’s performance on these platforms. With each subsequent update, our dedication to refining and improving the mobile theme experience remains unwavering, ensuring a seamless and user-friendly interface for mobile users. You can see how it looks live on our demo.
Refactored “Single product image gallery”
Revamped “Single product image gallery” – Formerly relying on two different libraries, OWL and Slick, for this component posed challenges when clients attempted edits or introduced new designs. In response to client queries and identified issues, our team thoroughly reassessed and re-engineered this element, introducing options tailored to our clients’ needs in the 7.4 update. New options include “Gallery gap,” allowing precise adjustments between thumbnails and the main gallery carousel—useful for fine-tuning the gallery to your design and enhancing user experience on mobile devices. The “Thumbnails per slide: auto” option preserves image proportions for clients with varying image heights. The addition of the “Thumbnails position bottom in mobile devices” and “Thumbnails left” options addresses client requests for a consistent layout on mobile screens. Further, the layout “Carousel” unifies three gallery designs, providing flexibility in selecting image quantities for display, mobile adjustments, and enabling centered mode for varying image quantities.
Notably, the WoodMart Slider now offers customization options for arrows and pagination, independent of global settings. Users can also select different color schemes for pagination and arrows. It’s essential to highlight the removal of classes prefixed with flickity-* for streamlined integration.
Refactored grid system for elements
Overhauled Grid System on Elements – Previously, the WoodMart theme utilized the Bootstrap grid system. However, upon scrutinizing our CSS files, it became evident that only a small portion of styles were applicable to our pages, rendering them unsuitable for carousels. Consequently, the decision was made to devise a proprietary grid system tailored to all our elements, compact in size and reliant solely on CSS variables. This approach eliminates the need to append three CSS classes to each grid item, as was required in Bootstrap. In the 7.4 update, grid sizes were reduced by 5 times, accompanied by the removal of numerous carousel styles, as the grid can now be repurposed for them. The Bootstrap grid remains in the theme for a smoother transition, but it will be deemed unnecessary in the upcoming 8.0 update. If you’ve utilized classes such as row, col-, col-sm-, col-md-, col-lg-, col-xl-*, modifications to your code will be necessary.
“Space between” responsive control
In response to frequent queries on our support forum regarding the adjustment of spacing between items on carousels and grids, we have introduced a responsive control solution. Now, users can effortlessly increase or decrease the spacing between items without the need for additional code. Notably, the classes wd-spacing-* have been removed for a more streamlined and intuitive approach to managing item spacing.
“Grid items with different sizes” option for “Product categories” element
The introduction of this option addresses a specific need. Previously, we utilized this feature in the category element’s “Masonry (with first wide)” layout. However, a crucial distinction lies in the fact that this functionality is now achieved solely through CSS. In the past, achieving varying grid item sizes required the inclusion of Masonry scripts, which constitutes a sizable and cumbersome library. With this new option, users can now choose not only a single item but as many as needed, allowing for a more visually engaging and dynamic grid layout tailored to the preferences of our clients and their customers.
Brands element
This element has undergone a comprehensive overhaul aimed at optimizing styles. Notably, as part of our forthcoming major update, we are streamlining the structure of elements. The “Brands” element has been included in the list of elements that should conform to a consistent structure across all builders. With each update, we make necessary adjustments to ensure a seamless transition during major updates. Additionally, we’ve introduced options based on valuable feedback from our clients, including “Disable links,” “Space between,” “Padding and background color for brand logo,” “Alignments,” and “Image height and width.” These options address common challenges faced by users, such as managing different logo sizes, aspect ratios, and alignments, providing a more flexible and user-friendly experience for our esteemed clients.
Similar to the Brands element, the “Instagram” element underwent refactoring. We’ve introduced options to enhance content customization, providing users with more flexibility in tailoring their Instagram displays to meet specific preferences.
“Quick view” Option
Acknowledging its popularity among our clients, the “Quick view” option has undergone significant optimization. We have reduced the CSS size by half, improving performance without compromising functionality. Additionally, a redesign has been implemented to enhance client orientation and facilitate easier utilization of this feature.
“AJAX product tabs” Element
In tandem with the overhaul of grids and carousels, the “AJAX product tabs” element underwent a comprehensive refactoring. This was necessary as many of the styles associated with this element became obsolete due to the structural changes implemented in the theme. The refactoring ensures the continued relevance and seamless integration of this element with the updated theme architecture.
Padding options for popup and dropdowns
By default, paddings that are present around the content of popups or mega-menu dropdowns can create difficulties if their content is HTML-blocks that have the own unique design. Previously, in such cases, customers had to add negative margins for HTML blocks to compensate for the default padding. Now, the option to change or completely remove this padding has been added, which will make it possible to more accurately configure the fields in the HTML block content itself without using negative margins.
Improved Elementor prebuild websites import using “Flexbox container” element.
From Elementor version 3.16.1 “Flexbox Container” feature is activated by default for existing sites, forcing all Elementor builder users to convert all their site content that built with old Section/Column elements to Flexbox Container. Since Flexbox Container is now the main instrument to create the layout in Elementor builder, we rebuilt our prebuild website import using new flexbox layout options which were brought by a new “Flexbox Container” feature.
Deprecation of “Font Awesome library” and “Icon name (from FontAwesome 5 set)” options in Elementor page builder
From Elementor version 3.18.0 “Inline Font Icons” performance feature is enabled by default, replacing the whole icon font with individual SVG images. After those changes, the “Font Awesome” icon font can’t be added to site pages, making all related options deprecated. From now, if “Inline Font Icons” is enabled on site, clients need to upload an image file using the “Use image as: Menu item icon” option to add icons to menu items. More about “Inline Font Icons” and why it was implemented can be found in the plugin documentation.
Full changelog
- NEW VERSION: Kids
- NEW VERSION: Plants
- NEW FEATURE: Checkout fields manager. (Screenshot)
- NEW FEATURE: Layout “Drilldown” to “Mobile menu” in header builder. (Video)
- NEW FEATURE: Owl Carousel, Slick, and Flickity jQuery carousel plugins were replaced and unified with one Swiper carousel.
- ADDED: Options for all element with carousel. (Screenshot)
- ADDED: “Auto height” option for carousel settings. (Video)
- ADDED: “Center mode” option for carousel settings. (Screenshot)
- ADDED: “Arrows position” option for carousel settings. (Video)
- ADDED: “Hide pagination control” responsive control for carousel settings. (Screenshot)
- ADDED: “Dynamic pagination control” option for carousel settings. (Video)
- ADDED: “Hide Scrollbar” option for carousel settings. (Screenshot)
- ADDED: “Synchronization” option for carousel settings. (Video)
- ADDED: Ability to show half of the next carousel item. (Video)
- ADDED: Carousel arrow style options in theme settings. (Screenshot)
- ADDED: Carousel pagination style options in theme settings. (Screenshot)
- ADDED: Carousel scrollbar style options in theme settings. (Screenshot)
- ADDED: “Gallery gap” option for “Single product image gallery”. (Video)
- ADDED: “Thumbnails per slide: auto” option for “Single product image gallery”. (Screenshot)
- ADDED: “Thumbnails position bottom in mobile devices” option for “Single product image gallery” layout “Thumbnails left”. (Video)
- ADDED: “Thumbnails gallery width” option for “Single product image gallery” layout “Thumbnails left”. (Video)
- ADDED: “Thumbnails gallery height” option for “Single product image gallery” layout “Thumbnails left”. (Video)
- ADDED: “Column selector” control and “Center mode” option to Gallery layout “Carousel”. (Screenshot)
- ADDED: “Arrows color scheme” option for “Slider” element. (Screenshot)
- ADDED: “Pagination color scheme” option for “Slider” element. (Screenshot)
- ADDED: “Arrows custom style” option for “Slider” element. (Screenshot)
- ADDED: “Pagination custom style” option for “Slider” element. (Screenshot)
- ADDED: “Space between” responsive control.
- ADDED: “Grid items with different sizes” option for “Product categories” element. (Screenshot)
- ADDED: “Pagination arrows position” option for “Products (grid or carousel)” element. (Screenshot)
- ADDED: “Disable links” option for “Brands” element. (Screenshot)
- ADDED: “Space between” option for “Brands” element. (Screenshot)
- ADDED: “Padding” option for “Brands” element. (Screenshot)
- ADDED: “Alignment” option for “Brands” element. (Screenshot)
- ADDED: “With background” option for “Brands” element. (Screenshot)
- ADDED: “Image height” option for “Brands” element. (Screenshot)
- ADDED: “Image width” option for “Brands” element. (Screenshot)
- ADDED: “Design option” tab for “Testimonials” element on “WPBakery Page Builder”. (Screenshot)
- ADDED: “Display grid” option for “Pricing tables” element. (Screenshot)
- ADDED: “Space between” option for “Pricing tables” element. (Screenshot)
- ADDED: “Content width” option for “Instagram” element. (Screenshot)
- ADDED: “Color Scheme” option for “Instagram” element. (Screenshot)
- ADDED: “Text color” option for “Instagram” element. (Screenshot)
- ADDED: “Background color” option for “Instagram” element. (Screenshot)
- ADDED: “Typography” option for “Instagram” element. (Screenshot)
- ADDED: “Design option” tab for “Blog” element on “WPBakery Page Builder”. (Screenshot)
- ADDED: New style “Simple” to element “Countdown timer”. (Screenshot)
- ADDED: Styles option to “Product countdown” element on layouts. (Screenshot)
- ADDED: Support of Elementor experimental feature “Inline Font Icons” in elements: “List”, “Popup”,”Button”, “Tabs”, “AJAX Products Tabs”, “Accordion”, “Marquee”.
- ADDED: New option “Submenu opening action” for mobile menu. (Video)
- ADDED: New option “Popup padding” for promo popup. (Screenshot)
- ADDED: New option “Dropdown paddings” for dropdown menu items. (Screenshot)
- ADDED: Tablet and mobile controls for “Scrolling speed” option in “Marquee” element. (Screenshot)
- ADDED: Hide “Sort by” and hide “Price filter” widgets options for shop filters section on Theme Settings. (Screenshot)
- ADDED: “Sticky container” option on Elementor. (Screenshot)
- ADDED: Styles to WooCommerce block-related notices.
- ADDED: “woodmart_get_standard_fonts” filter.
- ADDED: Quantities option for dynamic discounts. (Screenshot)
- ADDED: Duplicate post action for HTML Blocks. (Screenshot)
- ADDED: Duplicate post action for Layouts. (Screenshot)
- ADDED: Duplicate post action for slides on edit slider page. (Screenshot)
- ADDED: Show SKU on Thank you page. (Screenshot)
- CSS: Refactored grid system on elements.
- CSS: Refactored carousel on elements.
- CSS: Refactored “Quick view” option.
- CSS: Refactored “Ajax product tabs” element.
- CSS: Refactored “Brands” element.
- CSS: Refactored “Slider” element.
- CSS: Refactored “Instagram” element.
- CSS: Refactored “Images gallery” element.
- CSS: Refactored “Single product image gallery”.
- CSS: Refactored “Sticky off canvas sidebar button” element in Layouts.
- CSS: Refactored “Countdown timer” element.
- CSS: Refactored Blog loop styles “Flat” and “With background”.
- CSS: Refactored Blog loop format “Quote” styles.
- CSS: Refactored “Font Awesome 5” library in “Dokan” plugin.
- CSS: Refactored carousel styles in “YITH Woocommerce Compare” plugin.
- FIXED: Patches counter updating.
- FIXED: Simple dropdown sub-menus position with sticky header.
- FIXED: Frequently bought together product styles: “Bordered grid”, “Products background”, “Products shadow”.
- FIXED: Marque element on mobile devices. (Topic)
- FIXED: Renamed “Twitter” related options and elements to “X”.
- FIXED: Action button border-radius on “Video” element. (Topic)
- FIXED: Error in processing coordinates for Google map and Open street map elements. (Topic)
- FIXED: Bordered grid Outside options with product categories on shop archive page. (Topic)
- FIXED: PHP error in Wishlist. (Topic)
- FIXED: Active filters scrollbar on mobile devices. (Topic)
- FIXED: Fixed “Stripe” plugin payment form styles with “Updated checkout experience” option enabled. (Topic)
- FIXED: Elementor Pro cart page remove product button on iOS devices. (Topic)
- FIXED: Quick view in related product issue. (Topic)
- FIXED: Sticky navigation dropdown with full height design on tablet devices. (Topic)
- FIXED: Swatches variations on reset action. (Topic)
- FIXED: Enqueue styles for Wc Product Widgets element. (Topic)
- FIXED: Removed strong tag from HTML Block shortcode text on backend. (Topic)
- FIXED: Image hotspot element with validator issue. (Topic)
- FIXED: Layared nav widget dropdown layout on movile devices. (Topic)
- FIXED: Performance bug with wishlist. (Topic)
- FIXED: Wishlist promotional emails. (Topic)
- FIXED: Single product breadcrumb on mobile devices with layout builder. (Topic)
- FIXED: Dynamic discount rules can be specified for one product item. (Topic)
- FIXED: Dynamic discounts table can be rewritten in the child theme.
- FIXED: Full-height dropdown with RTL. (Topic)
- FIXED: Display of the message that no products were found for the on sale filter in the WOODMART Stock status widget. (Topic)
- FIXED: Product dynamic discounts table element when option ‘Show discounts table’ is disabled. (Topic)
- FIXED: Render dynamic discounts table if the product has no price.
- FIXED: Wishlists permalinks in admin panel. (Topic)
- FIXED: PHP errors. (Topic)
- FIXED: Show single variation with wishlist issue. (Topic)
- FIXED: Social login issue. (Topic)
- FIXED: Promo popup element with WPBakery Page Builder issue. (Topic)
- FIXED: Output wishlist products with “out of stock” product issue. (Topic)
- FIXED: The translation of html tags in the Information box shortcode. (Topic)
- FIXED: “Update cart item” ajax action after cleaning the basket.(Topic)
- IMPROVED: Elementor prebuild websites import using “Flexbox container” element.
- IMPROVED: “White lable” option with WPBakery elements.
- IMPROVED: Links created via onClick event replaced with regular link tags in Infobox, Banner, Slider and Menu price elements.
- REMOVED: Deprecated function ‘get_page_by_title’.
- DEPRECATED: “Icon name (from FontAwesome 5 set)” menu option for Elementor builder.
- DEPRECATED: “Font Awesome library” for Elementor builder.
- UPDATED: Google fonts list.