Author: techno

Filters can make or break the user experience on your website, especially when it comes to large product catalogs or content-heavy pages. JetSmartFilters from Crocoblock offers a smart solution for precise filtering, but with the Indexer option activated, it becomes even more powerful. By optimizing how your filters work behind the scenes, the Indexer ensures faster results, smoother navigation, and an overall better experience for your visitors. Let’s dive into how you can set up the Indexer and take your site’s filtering capabilities to the next level.

Step 1: Activate the Indexer Module

Before you can use the Indexer option, you need to make sure that the JetSmartFilters Indexer Module is activated.

• Go to WordPress Dashboard > JetPlugins > JetSmartFilters Settings.
• Under the Available Modules tab, find the Indexer module.
• Toggle the switch to enable it, and then click Save.

Step 2: Create or Edit a Filter

Now that the Indexer is activated, you can configure it for specific filters.

• Go to WordPress Dashboard > Smart Filters > Add New Filter (or edit an existing one).
• When creating or editing a filter, scroll down to the Filter Options section.
• You will see the option to enable the Indexer for this filter.

Step 3: Enable Indexer for the Filter

In the filter options, set the Indexer for the filter type you’re using (Checkboxes, Dropdown, Range, etc.).

1. Enable Indexer:
   • There will be a toggle or checkbox option labeled Enable Indexer. Turn it on to activate the Indexer for this specific filter.
2. Indexing by Term Count or Meta Value Count:
   • If your filter is based on taxonomies (like categories or tags), you can choose to index by term count.
   • If your filter is based on meta fields (like price or custom fields), the indexer can count meta values to improve filtering speed.

Step 4: Set the Indexer Options

Once the indexer is enabled, you will have additional settings available for more granular control:

• Reindex Automatically: Enable this option if you want the index to automatically refresh when new posts or products are added.
• Manual Reindexing: If you prefer to control when the index is refreshed, you can leave this option off and reindex manually.

Step 5: Reindex Filter Data

To ensure the index works properly, you may need to manually reindex the filter data. This process will cache the filter results for faster performance.

• After saving the filter, go to WordPress Dashboard > JetSmartFilters > Indexer.
• You’ll see a list of filters with indexing enabled.
• Click Reindex next to the filter you just configured. This will rebuild the index for the filter.

Step 6: Add the Filter to a Page

Once the indexer is enabled and configured, you can now add the filter to your product grid, post grid, or any listing you’ve created.

• Open your page in Elementor or Gutenberg where the filter will be used.
• Add the Smart Filter widget and link it to the grid you want to filter.
• Make sure to test the filter by selecting different options to confirm that the indexing is working and improving the filter’s response time.

Conclusion

Setting up the Indexer in JetSmartFilters may only take a few minutes, but the improvement in performance will be long-lasting. Once configured, your filters will respond faster, making your website more efficient and user-friendly.

Whether you’re managing a small blog or a large online store, activating the Indexer is a simple yet effective way to enhance the browsing experience for your users, ensuring they can easily find what they need, whenever they need it.

Building a portfolio gallery in Divi without relying on additional plugins is simpler. With just a bit of custom code, you can create a fully filterable, visually appealing portfolio that showcases your work beautifully. This guide walks you through the entire process, allowing you to create a stunning gallery that’s easy to manage and completely integrated with Divi.

Let’s get started on building your custom portfolio!

Step-by-Step Guide to Creating a Portfolio Gallery in Divi

Step 1: Add Custom Code to Your Theme

Access the Divi Settings:

• Go to Dashboard > Divi > Theme Options > Integration.
• Paste the following JavaScript code into the <head> or <body> box to enable dynamic filtering functionality:

 
<script>
  jQuery(document).ready(function ($) {
    // Assign categories to gallery items based on the title attribute
    $('.custom_gallery .et_pb_gallery_item').each(function () {
      var title = $(this).find('.et_pb_gallery_image a').attr('title');
      var category = title ? title.toLowerCase().replace(/\s+/g, '-') : 'uncategorized';
      $(this).addClass(category);
    });

    // Implement filter functionality
    $('.custom_gallery .gallery-filters button').on('click', function () {
      $('.custom_gallery .gallery-filters button').removeClass('active');
      var filterValue = $(this).attr('data-filter');
      if (filterValue === 'all') {
        $('.custom_gallery .et_pb_gallery_item').show();
      } else {
        $('.custom_gallery .et_pb_gallery_item').hide();
        $('.custom_gallery .' + filterValue).show();
      }
      $(this).addClass('active');
    });
  });
</script>

Note: This code dynamically assigns categories to your gallery images based on their titles and creates a filterable portfolio gallery.

• Go to Dashboard > Divi > Theme Options > custom css
  • Paste the following css code

.custom_gallery .et_pb_gallery_items {
     display: flex;
     flex-wrap: wrap;
}
.custom_gallery .et_pb_gallery_item {
     display: block;
     padding:15px;
}
.gallery-filters {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 20px;
     flex-wrap: wrap;
}
.gallery-filters button {
     padding: 10px 30px;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 14px;
     cursor: pointer;
     transition: 0.3s all ease;
     border: none;
     background: #00308F;
     color: #fff;
     border-radius: 30px;
     box-shadow: 4px 4px 0px 0px rgba(136,143,231,0.5);
      min-width: 160px;
}
.gallery-filters button.active,
.gallery-filters button:hover {
     background: #F0BD03;
     border-color: transparent;
     box-shadow: 4px 4px 0px 0px rgba(240,189,0,0.5);
}

Step 2: Create the Portfolio Section on Your Desired Page

Design Your Portfolio Section:

• Go to the page where you want to add the portfolio gallery.
• Add a new Section and assign it to the class “custom_gallery.”

• Within this section, add a Row.
• In the Raw setting, go to  Design > sizing > use custom gutter width and set the gutter width value to 1.

• Add a Text Block or Code Block inside the row and insert the following HTML code:

<div class="gallery-filters-main">
    <div class="gallery-filters">
       <button class="active" data-filter="all">All</button> 
       <button data-filter="engagement-photos">Engagement Photos</button> 
       <button data-filter="couple-photos">Couple Photos</button> 
       <button data-filter="single-photos">Single Photos</button>
   </div>
</div>

Note: You can customize the button text and data-filter values as needed.

• Add the Gallery Module:
  • After the above code, add the Gallery module within the same row.

Step 3: Assign Titles to Your Images

Set Titles for Filtering:

• Go to Dashboard > Media.
• Assign titles to each image in your gallery corresponding to the data-filter text you used earlier. For example, use ” engagement-photos,” ” couple-photos,” etc., to match the filter buttons.

Step 4: Save and Publish

Finalize and Publish:

• Save all changes and publish your page to showcase a beautifully filtered portfolio gallery on your website.

Extra Tips for Enhancing Your Portfolio Gallery

• Customize Your Filters: You can create additional categories or change the existing ones to fit your portfolio’s content better.
• Use CSS for Styling: Apply custom CSS to further style your gallery, filter buttons, and hover effects to make your portfolio more visually appealing.

Conclusion

Creating a dynamic portfolio gallery in Divi is straightforward and highly customizable. With a few lines of code and Divi’s built-in tools, you can easily manage and display your work without needing any extra plugins.

This setup keeps your site lightweight and flexible, making it an efficient choice for showcasing your portfolio. Now that your gallery is live, you have a professional way to highlight your projects and leave a lasting impression on visitors.

When building a website with Divi Builder, setting up global settings from the start can significantly simplify your design process and ensure consistency throughout your site. Global settings allow you to establish foundational elements such as fonts, colors, and spacing, which are applied across all pages, saving you from manually adjusting them on each section. This approach not only speeds up the creation of your website but also ensures that every part of it reflects a cohesive design language, no matter how large or complex the site becomes.

Whether you’re crafting a blog, portfolio, or business website, taking the time to configure global settings means you can focus on the creative aspects of your site rather than repeatedly tweaking design elements. This guide will walk you through how to set global typography, layout, and color options in Divi so you can build a site that’s visually appealing and easy to manage and update.

Let’s start laying the foundation for a streamlined, professional website!

Step 1: Adjusting Your Website’s Layout and Typography

To customize your website’s layout and typography, go to Dashboard > Appearance > Customize > General Settings.
In the General Settings panel, you will see three sections:

• Layout Settings
• Typography
• Background

Step 2: Set Layout Settings

• The Layout panel helps you modify various sizing and spacing options.
• You can increase or decrease the spacing between sections, rows, and columns.

Set Website Content Width

• This is where you can set the maximum width of your content section. Your content will not expand wider than the maximum width set here. The default is set to 1080px.
• Recommended widths: 1400px, 1200px, or as per your design requirements.

Set Website Gutter Width

• Divi provides a gutter width for horizontal spacing between elements. Optional values for gutter width range from 1 to 4, with the default set to 3.
• Set Website Gutter Width to 3.

Step 3: Set Typography

In the Typography panel, you can adjust the default appearance of the text across your entire website.

• Body Text Size: Set the body font size. The default size is 14px.
• Body Line Height: Set the line height of the body text.
• Header Text Size: Set the header text size (e.g., 40px, 36px, etc.). The font size set here for H1 will automatically adjust all other headings (H2 to H6) to smaller sizes.
• Header Letter Spacing: Set the letter spacing for all headers (H1, H2, H3, H4, H5, H6), blockquotes, and slide titles.
• Header Line Height: Set the line height for header text.
• Header Font Style: Set header text to italic, uppercase, or underlined for site-wide application.
• Header and Body Font: Divi provides access to nearly all Google fonts, allowing you to set any font for both headers and body site-wide.
• Header Font Weight: Set header font-weight globally (e.g., thin, light, medium, bold, ultra-bold).
• Body Font Weight: Set body font-weight globally (e.g., thin, light, medium, bold, ultra-bold).
• Body Text Color: Set the global color for body text.
• Link Color: Set the link color for text, which will apply site-wide.

Step 4: Set Background

• Set the background color of your theme or add a background image for your entire site.
• This step is beneficial if you enable the boxed layout from the Layout Settings. However, it is optional based on your design preferences.

Step 5: Customize Font Styles for Tablets and Phones for Responsiveness

To customize font styles for responsive devices:

• Go to Dashboard > Appearance > Customize > Mobile Styles.
• You can set the section height, row height, body text size, and header text size for tablet and mobile views.
• These settings will help you create smaller font sizes for headers and body text on responsive devices globally.

Step 6: Set Global Colors Site-Wide

• Create any page and edit with Divi Builder.
• Create any section and go to Section Settings > Background.
• At the bottom of the background options are three tabs: Saved, Global, and Recent Colors.
• Click on Global.
• You can add, update, and delete global colors here.
• Add your site colors based on your design or logo, and use the global color option to use these colors throughout your site.

Make these changes before starting your site for easily apply font sizes of body text, header text, colors, section spacing and container width globally.

Conclusion,

Configuring global settings in Divi Builder lays the groundwork for a seamless, efficient design process. From typography to colors and spacing, these settings help maintain consistency across your website while allowing you to easily make adjustments. With these foundational elements in place, building and customizing your site becomes quicker, smoother, and more professional. Now, you’re all set to create a visually stunning and cohesive website that will leave a lasting impression.

Creating unique headers and footers for specific pages in Divi allows you to tailor the look and feel of different sections of your website. With Divi’s Theme Builder, you can design custom headers and footers and assign them to individual pages without hassle.

Here’s how you can easily create and manage distinct headers and footers for your site using Divi’s built-in features.

Step 1: Access the Divi Theme Builder

Navigate to the Divi Theme Builder:

• In your WordPress dashboard, go to Divi > Theme Builder.

Divi provides a default template for creating a global header and footer. So, if you want to apply a custom header and footer to all pages, you can easily create a global header and footer from the default template using the Divi builder.

Step 2: Create a New Header or Footer

Add a New Template:

• Click on the “Add New Template.”

• Then Click on “Builder New template.”

• A window asking you to choose the pages where you want this template to apply.

• Select the specific page(s) for which you want to create a custom header and footer, and click Create Template.

Build a Custom Header:

• Delete the global selected header if showing and Click on “Add Custom Header” under the new template.
• Choose “Build Custom Header” to start designing the header.
• Use the Divi Builder to create the layout and design of your header as per your needs.

Build a Custom Footer:

• Delete the global selected footer if showing and Click on “Add Custom Footer” under the new template.
• Choose “Build Custom Footer” to design the footer.
• Customize the footer using the Divi Builder.

Step 3: Save and Assign the Template

Save Your Changes:

• After creating the header and footer, click the green Save button at the builder’s top.

Assign the Template to Specific Pages:

• Ensure the template is assigned to the correct page(s) per your earlier selection.
• You can also change conditions easily by clicking on the Setting Icon.

Manage and Edit Your Templates

– You can edit the custom headers and footers anytime by returning to the Divi Theme Builder and clicking on the template you want to modify.

Additional Tips

• Use Display Conditions: You can create multiple templates and assign different headers/footers to various pages, categories, or post types using the display conditions in the Divi Theme Builder.
• Export/Import Templates: You can export templates from one Divi site to another, making it easier to reuse designs.

Ending notes,

By leveraging Divi’s Theme Builder, you can effortlessly create custom headers and footers for specific pages. This approach not only enhances the user experience but also gives you complete control over the design and layout of your site. With the flexibility to edit, assign, and reuse templates, you can maintain a consistent and professional look across all website sections, no matter how diverse your content may be.

Setting up global settings in Elementor before starting your website can save you time and effort while ensuring a consistent, professional design throughout your site. With Elementor’s powerful tools, you can easily define your global fonts, colors, button styles, and more, which will automatically apply to all your pages and widgets. Whether you’re building a personal blog or a full-scale business site, establishing these settings early on helps streamline your workflow, allowing you to focus more on creativity rather than repetitive design adjustments.

This guide will walk you through each step to set up and customize your global settings, ensuring your website looks polished from the start.

Step 1: Open Elementor Settings

• Log in to your WordPress Dashboard.
• Navigate to Elementor > Settings from the WordPress sidebar.

Step 2: Access Global Settings in Elementor

• Create or edit a page/post using Elementor.
• Click the Edit with Elementor button to launch the Elementor editor.

Step 3: Access the Global Settings Menu

• In the Elementor editor, click on the three horizontal lines (hamburger menu) located in the top-left corner of the Elementor panel.

• Select Site Settings from the menu.

Step 4: Customize Global Settings

In the Site Settings panel, you can modify several global settings:

1. Global Colors

• Click on Global Colors to set color palettes for your entire site.
• Edit the predefined colors (Primary, Secondary, Text, Accent) or add new ones.
• Any color change here will automatically apply to all elements using global colors.

2. Global Fonts

• Go to Global Fonts to define typography across your website.
• You can set the font family, weight, size, and style for different categories (Primary, Secondary, Text, Accent).
• Applying global fonts ensures a consistent text style across all widgets and pages.

3. Typography

• Customize the overall typography for headings (H1 to H6), body text, and paragraphs.
• Set default font sizes, line height, and letter spacing.

4. Buttons

• Define global button styles, including text size, padding, background colors, border radius, and hover effects.
• Any button created on the site will use these default settings unless customized individually.

5. Background

• Set a global background for your website using a solid color, image, or gradient.

6. Theme Styles

• Manage default styles for forms, images, and other essential elements.
• You can override certain theme styles here for a more consistent look.

Step 5: Save Global Settings

• After configuring all the desired settings, click the  Update  button at the bottom of the panel to save your changes.
• These settings will now apply globally across all pages and elements designed using Elementor.

Step 6: Applying Global Styles to Widgets

• When editing any widget in Elementor, you can apply the global colors or fonts by clicking the Global tab in the Style settings for that widget.
• Choose from your predefined global colors or fonts to ensure consistency.

Step 7: Reset Global Settings (If Needed)

• If you need to reset any global settings to their default state, you can do so from the same  Site Settings  menu.
• Click the “Reset” button for the respective setting you want to revert.

Conclusion:

By setting up global settings in Elementor, you simplify the design process and create a cohesive look across your entire site. From fonts and colors to button styles and background settings, these global configurations will apply seamlessly to all your pages, allowing for a consistent and unified design. With these settings in place, you’ll find it much easier to maintain and update your site as it grows. Now that you’ve mastered the global settings, you can confidently build a website that stands out and performs beautifully.

Creating a dynamic, visually appealing mega menu can significantly improve your website’s navigation and user experience. With the Essential Addons for Elementor (ElementsKit), you can easily build a custom mega menu that enhances the structure and accessibility of your site, all without needing any coding knowledge.

This guide walks you through setting up a fully customizable mega menu that integrates perfectly with your website’s design. Let’s begin making your site’s navigation more user-friendly and engaging!

Step 1: Install Required Plugins

• Install Elementor and Elementor Pro  (if you don’t have it installed).
• Install and activate Essential Addons for Elementor  (Elements Kit).
• Navigate to ElementsKit> Modules to ensure the  ElementsKit Mega Menu module  is activated, then enable the  Mega Menu  option.

Step 2: Enable Mega Menu for Your Theme

Some themes need a slight adjustment to support the Mega Menu.

• Go to ElementsKit > Header Footer & Mega Menu.
• Enable the  Header Footer   builder.
• Make sure the  Mega Menu  module is activated.

Step 3: Create a New Mega Menu Template

• Go to Templates > Add New  in the WordPress dashboard.
• Choose  Section  as the type, and name it appropriately (e.g., “Mega Menu Section”).
• Click  Create Template  to open the Elementor editor.

1. Design Your Mega Menu Content

• In the Elementor editor, design the content you want to display in your mega menu.
• To organize the mega menu layout, use  sections, Columns,  and  Widgets (such as images, headings, or icons).
• Add  Navigational Links, Product Listings, Images,  or  Custom Widgets  as needed.
• Style your menu using Elementor’s design options to fit your site’s theme.

2. Save the Mega Menu Template

• Once you’ve finished designing, click  Publish.

Step 4: Assign the Template to the Menu Item

• Go to Appearance > Menus.
• Find the  menu item  where you want to apply the mega menu (create one if needed).
• Expand the menu item by clicking the arrow.
• You will see an  ElementsKit Mega Menu Options  section under the menu item.

• Toggle the  Enable  button to activate the mega menu for that specific item.
• In the  Mega Menu Template  dropdown, select the template you created earlier.
• You can also enable  Full Width  if you want the mega menu to span across the screen.

Step 5: Configure Mega Menu Settings

1. Mega Menu Column Settings:

• You can set the width for each column inside your mega menu template.
• If you want a custom width for each column, go to the Columns settings in Elementor and adjust the width for desktop, tablet, and mobile.

2. Mega Menu Alignment:

• In the ElementsKit Mega Menu Options, choose how you want the mega menu to appear (left-aligned, right-aligned, or centered).

Step 6: Add Styling (Optional)

You can customize the  hover effects, background colors, padding,  and  typography  of your mega menu to match your website’s branding. To further customize, use Elementor’s styling options in the editor.

Step 7: Preview and Publish

1. Preview Your Mega Menu:

• After assigning the template, visit your website and hover over the menu item to see how the mega menu appears.

2. Return to  Appearance > Menus  if everything looks good and click  Save Menu.

Conclusion:

Building a mega menu with ElementsKit is a simple yet powerful way to enhance your site’s navigation and showcase more content in a structured way. By following these steps, you can create a custom, visually striking menu that fits seamlessly with your website’s style and offers a smooth browsing experience for your visitors. Once your mega menu is live, managing and updating it is just as easy, making it a valuable addition to any website requiring robust navigation options. Your site is ready to impress with a sleek and functional mega menu!

Creating multiple columns within Divi Tabs is a great way to enhance your content’s visual appeal and organization. Whether you’re looking to display products, services, or detailed information, Divi’s flexible design options make it easy to customize your tabbed layouts.

In this guide, we’ll walk you through the simple steps to create a stunning, multi-column layout within your Divi tabs, giving your website a polished and professional look. Let’s get started!

Step 1: Install the ‘Shortcodes for Divi’ Plugin

First, you need to install a plugin that helps create shortcodes for your saved Divi sections:

• Go to Plugins > Add New in your WordPress dashboard.
• Search for ‘Shortcodes for Divi’ and click Install and Activate plugin.

Alternatively, you can download the plugin directly from this link: https://wordpress.org/plugins/shortcodes-for-divi/ and upload it to your site.

This plugin will allow you to generate shortcodes for any saved Divi sections.

Step 2: Create Section and Save Your Column Layouts

Next, use the Divi Builder to create your desired 2-column or 3-column sections:

• Open the Divi Builder and design your column layouts as needed.
• Save each section to your Divi Library for easy access later.

Step 3: Add Tabs to Your Page

Now, it’s time to add tabs to your page:

• Edit the page where you want to add the tabs using the Divi Builder.
• Use the Tabs module to insert a tabbed section on your page.

Step 4: Set Up Your Tab Titles

In the Tabs module settings, add the titles for each of your tabs under the ‘Tab Title’ fields.

Step 5: Insert Your Saved Section Short codes To tab Description Area

To display your saved column layouts within the tabs:

• Go to Divi Library and locate the section you saved earlier.

• Copy the shortcode for the saved section (e.g., [divi_library_layout id=”255664″]).

Paste the shortcode into the Content Area of the respective tab.

Step 6: Save and Publish

Finally, save your changes and publish the page. Your custom multi-column layout will now appear within the tabs!

With these simple steps, you can now effortlessly create eye-catching, multi-column layouts within Divi Tabs that enhance the user experience and add a professional touch to your website. By utilizing Divi’s flexibility, you can design unique layouts that fit your content perfectly. So, experiment with different combinations to create a polished, engaging tabbed interface that keeps your visitors coming back for more!

In WooCommerce, the “sold individually” setting ensures that customers can only purchase one unit of a specific product per order. However, when they attempt to add the same item again, they receive a generic notification: “You cannot add another product to your cart.” While functional, this message may not fully resonate with your store’s unique branding or tone of voice.

The good news is that WooCommerce offers the flexibility to customize this default notification, enabling you to tailor it better to reflect your brand’s personality and enhance the overall shopping experience.

In this blog post, we’ll guide you through modifying this message using a straightforward code snippet, empowering you to create a more cohesive and customer-friendly interaction.

Understanding the Default Behaviour

The default WooCommerce behavior when a product is set as “sold individually” is to restrict customers from adding more than one product to their cart. When they attempt to add another, WooCommerce displays the following message:

"You cannot add another product to your cart."

This message is clear, but it might not fit your store’s communication style best. You might want to soften the tone, add a bit of humor, or simply make it more informative.

Customizing the Notification Message

WooCommerce provides a PHP filter that makes it easy to customize this notification. By adding a small piece of code to your theme’s functions.php file, you can change the message’s wording to anything you like.

Step-by-Step Guide

1. Access your theme’s functions.php file: Navigate to Appearance > Theme Editor in your WordPress admin dashboard.

2. Add the following code:

/**
 * @snippet       Custom "You cannot add another __" Woo Message
 * @author        Technocrackers
 * @compatible    WooCommerce 8
 * @authorURI     https://technocrackers.com/
 */
 
add_filter( 'woocommerce_cart_product_cannot_add_another_message', 'technocrackers_override_cannot_add_another_message', 9999, 2 );
 
function technocrackers_override_cannot_add_another_message( $message, $product_data ) {
    $message = sprintf( 'Sorry, you can only buy one "%s" at a time', $product_data->get_name() );
    return $message;
}

How It Works

• Hooking into the Filter: The woocommerce_cart_product_cannot_add_another_message filter allows us to modify the message WooCommerce displays when a customer tries to add more than one of an “individually sold” product to their cart.
• Customizing the Message: The function technocrackers_override_cannot_add_another_message takes in the default message and the product data as parameters. We use sprintf to dynamically insert the product name into our custom message, resulting in something like:
  "Sorry, you can only buy one 'Product Name' at a time"
• Returning the New Message: The modified message is then returned, replacing the default WooCommerce notification.

Conclusion

Customizing the “You cannot add another _ to your cart” notification in WooCommerce is an easy yet impactful way to ensure your store’s messaging reflects your brand’s identity. Whether you aim to infuse the message with warmth, humor, or additional information, this simple code snippet allows you to make it your own.

Implementing this customization ensures that every customer interaction feels deliberate and aligned with your brand, contributing to a more cohesive and engaging shopping experience.