If you were struggling to figure out how to customize your LearnDash templates using your child theme, well, good luck!

Just Kidding!

It can be a pain to figure out how to customize your LearnDash templates with your existing Child Theme, we know this because we recently ran into this. Unfortunately, there are no real guides or documentation on how to customize your LearnDash templates, so we had to figure this one out, and thought we’d share.

Just follow along below and we’ll show you.

Steps to Customize a LearnDash Template

It is important to note that the steps might change depending on the LearnDash Theme you are using – but in most cases, all you’d need to do to customize your LearnDash theme is to change the name from ld30 to the name of whatever LearnDash Theme you are using.

Example 1

If you are overwriting: wp-content/plugins/sfwd-lms/themes/ld30/templates/lesson.php
The path in your child theme will be: wp-content/themes/child-theme/learndash/ld30/lesson.php

Example 2

If you are overwriting: wp-content/plugins/sfwd-lms/themes/ld30/templates/module/tabs.php
The path in your child theme will be: wp-content/themes/child-theme/learndash/ld30/module/tabs.php

Soooo, have you folks heard about the new Full Site Front-End Editing For Divi? Everybody is talking about it and we can’t believe the sheer amount of features the team at Elegant Themes have released over the last month. Full Site Front-End Editing is another addition aimed at making us more efficient when building Divi sites.

Now here comes the but!

Not everybody is a big fan, and if you are an antiquated Divi user such as myself, you prefer things like the Classic Editor and that dusty odor extends to new things like the Full Site Front-End Editing For Divi. Elegant Themes has not added a setting to natively disable this feature, so we whipped up some CSS to remove it from the Front-End Editor, but before we look at that, let’s just quickly cover what this feature does.

What is Full Site Front-End Editing For Divi?

With the introduction of the Divi Theme Builder, we were finally given a space to create global layouts for various parts of our site like headers and footers. It was an unprecedented step towards greater efficiency for developers, but something was always missing, one could not edit these Theme Builder layouts on the front-end of our sites. We were always relegated to going through the back-end of our site to the Theme Builder section and then editing these layouts without seeing them as they would appear on the page.

Say hello to Full Site Front-End Editing For Divi, which solves this issue by allowing you to edit these Theme Builder layouts on the front-end as you would any other page. This is great as you can now see how it fits into your overall design and saves you time bouncing around, or as in my case, having 20 tabs open at any given time.

For more information on the Full Site Front-End Editing For Divi, check out the official post over at Elegant Themes.

Disable Full Site Front-End Editing For Divi

So as I mentioned before, maybe you are averse to change right now and want to cozy up to the idea of the new Full Site Front-End Editing For Divi and that is ok. With just a few lines of code, you can send this efficiency tool into oblivion.

Just follow the steps below, beat your chest, and claim your freedoms!

Head over to Divi > Theme Options > Custom CSS

Paste the code below in the Custom CSS box

Save

Buh-bye Full Site Front-End Editing For Divi

Conclusion

Congrats, you did it. We understand that some of these new features are not always easy to get into at first, but we promise once you embrace them, that they will be a gamechanger for your efficiency….uh…game? You know what we mean.

Use this code as a breather but we encourage you to play with all the new Divi features as they come out and we will try to continue to release content that helps you on that journey.

We hope you found this post on how to Disable the New Full Site Front-End Editing For Divi helpful! We will be back soon with more valuable content.

Until next time 😁

Having your text links highlighted can be a great way to get people exploring your website and let’s be honest if done right, can look pretty cool. You can Highlight Links in the Divi Text Module with CSS even if you are not a code ninja. You’ll see how with just a few lines of CSS code that you add a much more bespoke look to the links in the Divi Text module. 

Let’s take a look at what we will be building today.

Preview:

Video Tutorial

Setting it Up

Preparing Our Text Module for the Animated Highlights

The first thing we need to do before adding the CSS that will highlight the links in our Divi Text module is to make sure we either already have a page with a Text Module containing some links, or we need to create one. If you do not, go ahead and quickly create a page and add a Divi Text module to the page and add some text with at least one link.

Text Module Settings > Advanced Tab > CSS ID & Classes > Add CSS Class de-highlights

Save

Adding the CSS Code

Transforming the Links into Animated Highlights

So the CSS we need to add here will look for the Divi Text module on the page that has the class de-highlights assigned which we did in the previous step, then apply the CSS to the <a> tags in the module. Just add that class to any text module where you want the CSS applied.

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

Polishing the Design

Changing the Colors

You can easily customize this CSS to highlight your links in the Divi Text module to fit the colors of your brand. You’ll see that the comments in the code show you exactly where to adjust the colors. For a quick guide, check below:

Text Color

Initial: Line 5
Hover: Line 17

Line Color

Initial: Line 6 Change the second linear-gradient color values (both) to your desired color
Hover: Line 6 Change the first linear-gradient color values (both) to your desired color

Look at them fancy highlighted links over there…

Conclusion

Today was a little shorter than usual, but as you can see, dynamite comes in small packages. If you blog often or create content with a bunch of links, this is a great way to make things just that little bit cleaner and easy to identify your linked content.

If you found this guide on how to Highlight Links in the Divi Text Module with CSS helpful, please consider subscribing to our Youtube Channel, and as always, we love hearing your thoughts and suggestions in the comments below.

Until next time!

Copy & Paste todays Freebie Code Snippet for your Divi site.

It is FREEBIE FRIDAY and for this edition, we have 4 Styles for Your Divi Menu CTA Buttons that were lovingly crafted just for you!

These snippets work fantastic with this week’s tutorial on How to Add a CTA Button to the Divi Menu, so pick the button style you like, and get cracking!

Preview:

CTA Style 2

CTA Style 4

Using the Divi Menu CTA Button Styles:

Step 1) Decide Which Button Style you Like

Just scroll up to see all the styles again.

Step 2) Copy the Corresponding Style Code Below

With your style selected, scroll down to the style number and copy the CSS code and go paste it into the Custom CSS in Divi > Theme Options > Custom CSS

Step 3) Add the CSS Class to Your Divi Menu

Take note of the CSS Class for your button styles then head to Appearance > Menus and add the class to your button menu link.

For step-by-step instructions on how to do all this, check out our post on How to Add a CTA Button to the Divi Menu.

CSS Code for the Divi Menu CTA Button Styles:

Style 1: Full to Hollow Color Transition

Style 2: Skew to Straight

Style 3: Icon Button

Style 4: Gradient Flip

UPDATED: April 22nd, 2022

Today we have a quick Code Snippet for you that will allow you to Reverse Loop Layout Columns in Divi Machine. This is another Code Snippet that was inspired by a request that we received from one of our awesome customers, maybe it was you 😉

Basically, we are going to reverse the column order in our loop layout on an interval that we specify. This can mean that we will alternate the order of the columns for every 2nd, 3rd, or 4th loop, and so on, you get to decide! In our example today we will be alternating the column order for every second loop in our Divi Machine Archive Loop module and we’ll be doing all of this with some clever CSS.

Preview:

AFTER

Video Tutorial

Let’s Talk CSS and :nth-child(n)

So like we mentioned, we want every second loop in our archive loop to reverse the order of the columns in that loop. That is heavy usage of the word loop and can get confusing, so definitely check out our support article on What Is The Custom Loop Layout to lift some of the fog on that topic.

To achieve this, we will need to convert every second loop to a flex layout, and then reverse the order by setting the flex-direction property to row-reverse. Sounds easy right? Well, it actually is because all we need here is 4 lines of IQ1000 CSS. But wait? How will my CSS be applied to only every second loop? Say hello to our little friend, Tony Mon:nth-child.

:nth What now? :nth-child‘s formal definition is as a structural pseudo-class which means that it is used to style content as it relates to its parent and sibling elements. Maybe you can now start to see how we would use this to select every second loop on the page and reverse those columns. We are not going to get too much into it for this post, but let me quickly explain How to Reverse Loop Layout Columns in Divi Machine using it.

:nth-child(n) takes an argument (n) which can be used in two ways.

:nth-child(2)

We can replace the (n) with an integer number which will literally count out the loops until it reaches the second loop as used in this example, then apply the relevant CSS to ONLY that loop. If you changed that (2) to (7), it would count out the loops until it reaches the seventh loop, and play the CSS and so forth.

:nth-child(2n)

Now when we prefix the (n) with an integer number, we are telling it to count out the loops until it reaches the second loop, apply the relevant CSS, BUT THEN, it restarts the count and continues to the page applying the CSS to EVERY second loop. Again, if you change the (2n) to (7n), it will apply the CSS to every seventh loop.

Adding the CSS Code

To add the code, we have two options, depending on the scope of where you want the CSS applied.

If we want the code to be applied across our entire site and to all the Divi Machine Archive Loop Modules, then we would add it to the DIvi Theme Options.

Or if we would like it to only be applied to a single page, we would add it to a Code Module on that page.

Entire Site

Go to Divi > Theme Options > Custom CSS

Paste the Code below in the Custom CSS Box

Save

Single Page

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

Tutorial Update – Reversing Margins

UPDATED: April 22nd, 2022

Sometime you may have margin added to your columns that are uneven, which means that you would need to reverse that uneven margin also. Margin can be added through the margin properties on columns, but also through the gutter between the columns, so you would need to inspect the page to determine whether there is uneven margin applied if you are unsure.

How to inspect the page for uneven margin?

To inspect the page all you need to do is right-click the loop where you want to reverse the columns, then click on inspect.

This will show you something similar to the image below, which is where you will see if margin is applied unevenly, and as you can see here, there is a margin-right of 5.5%.

This means that we need to apply some additional CSS.

Adding the additional CSS

Entire Site

Go to Divi > Theme Options > Custom CSS

Paste the Code below in the Custom CSS Box

Save

Single Page

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

All done! Now repeat after me…

Conclusion

:nth-child(n) is a super powerful CSS structural pseudo-class that can help you create all sorts of dynamic styles. Today it showed us How to Reverse Loop Layout Columns in Divi Machine, but that is just the beginning. Maybe we’ll look at making some other tutorials using this if you guys liked it 😁

If you don’t yet have a Divi Machine License, definitely check out the Product Page, you’ll see how it is a game-changer for creating more dynamic websites using the power of custom post types and advanced custom fields.

Enhancing some of the stock Divi modules is easier than you think, with just a little bit of code, we can make some pretty awesome changes to give your Divi site more of a custom feel that wows your clients! In this week’s tutorial, we are going to show you How to Add a Filtered Portfolio Triggered by any Divi Module using jQuery and CSS.

You can use the tutorial to have the stock Divi Filterable Portfolio Module filter the Projects by clicking on a Blurb Module, Text Module, or any other Divi Module you decide. We will also talk about the code a little so that you can even further customize the way your Filterable Portfolio Module works and is displayed.

Video Tutorial

Adding Projects to Your Portfolio

The first thing we need to make sure of is that you already have some projects assigned to categories on your Divi site. You might already have them set up, but just in case you do not, follow the steps below to get set up for the rest of the tutorial.

Create Project Categories

Head over to Projects > Categories > Then Add Your Categories.

Make sure to make a note of the Category Slugs, because we will use this in our code and layout.

Add Some Projects

Head over to Projects > Add New¹.

Add a Title², Description³, and Featured Image⁴.

Assign a Category⁵.

Publish⁶ the Portfolio.

Repeat this process until you have about 4 Portfolio items for each category.

Create and Style Your Filter Trigger Modules

So we need a place where we will display this unique Filtered Portfolio Triggered by any Divi Module. so you can either use an existing page that you have created, or you can create a new one from scratch. Whichever you choose, we suggest you place it in it’s own section on said page.

Add a Divi Filterable Portfolio Module

In a new single column row, add a Filterable Portfolio module.

On the Design Tab, set the Layout Style to Grid.

Head to the Advanced Tab and add the CSS Class divi-engine-filter, which we will be using in our code.

Under Custom CSS, scroll down to Portfolio Filters, and add the line display: none; as we are busy replacing that with our very own fancy filters.

You can style the rest of the module however you like.

Add a Divi Text Module

In a new three column row, add a Text module in the first column.

Type the Name of the first Category you created earlier in the Body.

Head to the Advanced Tab and add the CSS ID which is the same as your first category slug , this was filter-item-1 in our example, but your will be whatever you set it to.

You can style the rest of the module however you like.

Now make 2 copies of this text module and drag each one into its own column.

For each copy, change the text in the body to reflect the Category name, and change the CSS ID to the appropriate slug for that Category.

Open the Settings for the 3-Column Row and on the Advanced Tab, add the CSS ID custom-grid-control. Our jQuery will wait to see if we click on any of the filters in this row.

Add the Custom jQuery

Now it gets interesting, we are going to add some jQuery which will wait for us to click one of the trigger modules that we created in the previous steps, and then filter by that Category. We will also use some magic to add a CSS class that will indicate which filter is active.

Add a Code Module

Add a Code Module below your Filterable Portfolio Module.

Copy and Paste the code below between opening and closing <script> tags in the code module.

You need to modify the code on lines 4, 5, and 6 to match your Category slugs if they are different from ours.

Add the Custom CSS

To make sure that everything works correctly and is displayed as we intend to, we need to use some CSS to pull it all together.

Add a Code Module

Add a Code Module below your jQuery Code Module.

Copy and Paste the code below between opening and closing <style> tags in the code module.

And that is it, if you now publish and view this page on the frontend, you should have a shiny new filterable portfolio that filters when you click on the text modules.

You can modify the code in the CSS Code Module to change various visual elements.

For example, if you changed the width property in the .divi-engine-filter class from 25% to 33.3%, you will have 3 columns instead of 4 columns.

You can also make changes to the .de-active class to change the way you indicate which filter is selected.

For more on that, or if you get stuck, definitely check out the video at the top of this post.

You can also download a working version of this layout by checking out this post -> FREE Filterable Portfolios Layouts for Divi.

Filter, ENHANCE!

Conclusion

We really hope this guide on How to Add a Filtered Portfolio Triggered by any Divi Module will be a great asset to your workflow in creating some amazing websites. Be sure to check out the video at the top for a little more details and an explanation of the code we used. It can also be helpful if you get stuck.

Until next time, folks!

Coupons are a great way to convert some visitors into customers, but what if you wanted to Add a WooCommerce Discount Automatically at checkout without needing your customer to enter a code? Or maybe you want some tiered deals based on the number of items in your prospective buyer’s cart.

In this tutorial, we are going to show you 2 methods that will allow you to either have a pre-made WooCommerce coupon automatically applied to the cart, or have different discounts applied based on predetermined criteria. We will include the code snippets that get the magic done, and talk a little about how you can customize that code to suit your needs.

Video Tutorial

Why Add a WooCommerce Discount Automatically at Checkout?

WooCommerce natively comes with a feature that allows you to create coupons and make them available to your visitors, but the functionality unfortunately is a bit limited if you wanted to do more complicated things. There might be situations where it makes sense to have a free shipping coupon be applied automatically, or maybe you want to offer better discounts as your users add more things to their cart.

It is no secret that folks that shop online are on the lookout for the best deals, so why not build that right into your site. This gives you the ability to display a nice banner at the top of your page announcing price breaks or other offers which could encourage them to spend more. This deepens engagement and obviously impacts your bottom line in a very attractive way.

Doing away with coupon codes having to be entered will also show your customers that you care which in turn will increase their LTV. If you are willing to automatically add discounts for purchases that meet certain criteria, you are probably willing to go the extra mile for them in other ways.

Adding a Coupon Code Automatically based on Minimum Spend

The first method we will be looking at will add a coupon code you created to your cart automatically. A perfect use case for this would be if you wanted to offer free shipping if customers spent over $100. The choice is really yours, and I will show you how to add the code below to your site in a few simple steps, but first, let’s create our free shipping option and coupon code.

Free Shipping Option

1. Go to WooCommerce > Settings
2. Click on Shipping
3. Click on your Shipping Zone
4. Click Add Shipping Method
5. Select Free Shipping
6. Save it by clicking Add Shipping Method then edit it
7. Click the Free Shipping Requires… drop-down > Select A Valid Free Shipping Coupon
8. Save Changes

Free Shipping Coupon Setup

1. Go to Marketing > Coupons and create a new coupon
2. Enter the code (we used “freeshipping“) you want people to enter in the Title field (this should be less than 8 characters)
3. Select Fixed Cart Discount from the Discount Type drop-down
4. Tick the Allows Free Shipping option
5. Click Publish

Ok, we have everything set up now, all we need to do is add the code to the functions.php file to get it working. For this tutorial, we will edit the functions.php in our child theme by using the Theme Editor baked into WordPress.

Add the Code for Adding a Coupon Code Automatically based on Minimum Spend

1. With the code below copied to your clipboard, head to Appearance > Theme Editor
2. Select the functions.php file on the right
3. Paste the copied code right above the closing PHP tag.
4. Update File

Adding a Discount Automatically Based on the Number of Items in the Cart

Our second method offers another take on automatically adding a discount to the cart at checkout. With this method we will not be creating a coupon code ahead of time, instead, we will offer a calculated discount based on the number of items in the cart.

If there is 1 item in the cart the discount is 10%, if there are 2 items the discount is 15%, and when there are 3 items the discount is 25%.

To accomplish this, we will follow the same steps we did before where we added some code to the functions.php file in our child theme.

Add the Code for Adding a Coupon Code Automatically based on Minimum Spend

1. With the code below copied to your clipboard, head to Appearance > Theme Editor
2. Select the functions.php file on the right
3. Paste the copied code right above the closing PHP tag.
4. Update File

Sweet sweet automation…

Conclusion

That wasn’t so bad? Was it? Learning How to Add a WooCommerce Discount Automatically at Checkout is something that will sharpen your skills as a Divi and WordPress developer and offer your clients a new option when building their online stores. Customizing this code to extend or change the functionality is also super easy, so definitely check out the video at the start of this post to get into how you would do that.

Hopefully, this content was helpful, so if you like it, please subscribe to our youtube channel and let us know your comments and feedback below in the comments.

In this week’s tutorial, we are going to show you how you can add attention-grabbing pure CSS Animations to your Divi modules. We will work together to add the CSS code to your Divi install, customize the CSS to change things like the duration of the CSS animations, and more.

This might sound complicated, but I promise you’ll be a pro in no time. Check out the preview below to have a quick look at what we will be creating.

Preview:

Why add attention-grabbing pure CSS Animations to your Divi modules?

Because they are AWESOME! That is why.

Thank you for coming to my TED Talk.

Jokes. Mostly. Divi already comes with 7 stock animations that are super simple to use if you want to create some basic animations, but what do you do when you want something more complex and unique? You hit up the Divi Engine blog of course!

With more complex animations you can draw the user’s attention to certain parts of your page like a buy button, maybe a sale you have going on, or maybe you just want to add some creative flair.

In this tutorial, we are going to show you how to add attention-grabbing pure CSS Animations to your Divi modules that accomplish pretty complex effects by utilizing keyframes. Don’t know what keyframes are? Think of them as different styles, positions, or shapes applied to your Divi module over a specific time period. This time period can be broken up into percentages (or waypoints) so that your Divi module can have different states at different times within that specified period.

CSS Keyframes definition by the Mozilla team  ⬆️

Basic Anatomy of CSS Animations and Keyframes

I just want to spend another second on CSS Keyframes before diving into how to add attention-grabbing pure CSS Animations to your Divi modules because you can do some cool things if you understand what they do better.

Let’s take a look at the code below:

So, in that code, we have a class that declares our animation. It will use the keyframes defined in “colorchange”, the entire animation will last 4 seconds, and it will repeat an infinite number of times.


@keyframes colorchange {

}

On line 5 we declare the set of CSS Keyframes which we also used on line 2 where we declared our animation. Moving to lines 6 to 9, the percentages represent a percentage of our 4-second animation and the value of a CSS property at that time.

Can you guess what happens if you add this code to a Divi module?

You’re right! At 0 seconds, the module with that “.de-colorchange” class assigned will have a red background, between second 0 and second 1, it will fade to green, between second 1 and second 2, it will fade from green to blue, and so forth. In the end, the animation will start over.

Granted, this is a very simple example, but how cool is that? Are those gears in your head turning yet?

Now that we have a better idea of how CSS animations work, let’s look at how to add attention-grabbing pure CSS Animations to your Divi modules.

How to add attention-grabbing pure CSS Animations to your Divi modules

Armed with some basic knowledge of CSS animations it is time to add some gorgeous CSS animations we crafted for you to your Divi site. We put together 3 animations we thought were pretty awesome, and we hope so do you. All you need to do is choose the animation you want to add, copy the code, then follow along with the tutorial.

You can follow along with the video, or you can follow the text instructions below.

Our 3 CSS Animations to choose from for this Tutorial:

Video Tutorial

Text Instructions

Step1) Select the CSS Animation you want to add to your Divi module

Click here or scroll up to our 3 CSS animations and copy the code below the one you’d like to give a spin.

Step 2) Add a Code Module and Paste the Code

Navigate to the page where you will add the CSS animation to your Divi module.
Add a code module anywhere on the page.
Open the code module and paste the CSS code between opening and closing style tags.

Step 3) Add the CSS class to your Divi Module

Copy the CSS class in for the CSS animation you want to add to your Divi module.
Open the settings for the Divi module which you want to animate.
Head over to the advanced tab.
Past the class (without the preceding . ) into the CSS class field.
Save your work!

How awesome are you? You did it!

Conclusion

When you add attention-grabbing pure CSS Animations to your Divi modules, you say no mediocrity, not today! With just a tiny little bit of new knowledge and practice, you are on your way to stop making that Divi site look like a Divi site. There are plenty of resources online to find some awesome CSS animations, just check out Codepen for some inspiration, or create your own from scratch over at CSS Animate.

Why add the Product Title and Price as an Overlay to the Divi Shop Module?

Additionally, it adds a layer of interactivity for the user which further engages them on the page. The more engaged, the more likely you are to convert with your Product Title Overlay on your Divi WooCommerce Shop Module.

Now feel free to follow along with the video, or skip to the text instructions at the bottom.

Preview:

Video Tutorial

Text Instructions

Step 1) Create a new Page and add a Divi Shop Module

Add a Shop Module

Shop Module

Design Tab

Overlay

Overlay Icon Color: #0fe5a8
Overlay Background Color: rgba(84,48,206,0.75)

Title Text

Title Font: Poppins Title Font Weight: Semi-Bold Title Font Style: Uppercase Title Text Alignment: Centered Title Text Color: White Title Text Size: 18px Title Text Shadow: Option 1

Price Text

Price Font: Poppins Price Font Weight: Light Price Text Alignment: Centered Price Text Color: White Price Text Size: 18px Price Text Shadow: Option 1

Step 2) Add jQuery Code

Code Module

Content Tab

Text

Code: Copy and Paste the text below into this box

Step 3) Add CSS Code

Code Module

Content Tab

Text

Code: Copy and Paste the text below into this box

Step 4) Add the CSS Class to the Shop Module

Shop Module

Advanced Tab

CSS ID & Classes

CSS Class: divi-engine-custom-overlay

All done!

Conclusion

Thanks for checking this Tutorial out and we will catch you in the next one!

Enter jQuery. jQuery is a lightweight Javascript library included with every Divi install that helps simplify implementing common Javascript tasks with very little code. This coupled with some of the other Javascript libraries included with Divi, really opens the door to a ton of creative posibilities.

Don’t worry if this sounds complicated, in this post we are going to walk you through an overview of a piece of jQuery code, and then show you two examples of how you can start writing your own creative jQuery functions that are ready to wow your clients.

So, let’s start by taking a look at a few ways we can include jQuery code into our Divi website.

How to add some jQuery code to Divi

There are technically 3 ways to add jQuery code to Divi, but we will only be covering the 2 most common methods here but will mention the 3rd. The method you choose will depend on where you would like the code to run.

Divi Integration Tab

This is where you would add your jQuery code if you want it on every page throughout your website. An example of this might be if you wrote a function that changed the background color of your site header as the user scrolls through a page.

To find the Integration Tab you browse to your Divi Options page, then click on the Integration Tab. The code will be placed between open and closing <script> tags inside the <head> of your site.

Divi Code Module

The code module is great when you are adding some jQuery that will only impact a single page on your site. The example we will cover is having fixed blurbs appear and disappear on screen as we scroll up and down a page. You can add the code module to any row on the page your want the jQuery to be executed on. Similar to the integration tab, this code needs to be placed between open and closing <script> tags inside the code module.

Quick overview of a jQuery function

Let’s take a look at some jQuery code that will add a class to an element once the user has started scrolling.

These are always required to “open” and “close” any Javascript or jQuery code that you enter into either the Integration Tab or Code Module. It just tells the browser that you are about to write some code. The “type=“text/javascript” is just us telling the browser that this is Javascript code. This is required.

This basically means that our code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This is required.

Now we are getting to some actual custom code. This is where we create our function, the piece of code that will execute to do something cool on our site. We named our function check_from_top_de, because we are going to see how far the user has scrolled then do something, but you can name this whatever you want.

We have created a variable called scroll which gets assigned the distance that we have scrolled from the top of the page. This value gets returned in pixels which we can then use to apply some logic to add our class to our target selector.

If the user has scrolled down the page 300 pixels or more

So first we point out (or select) which element we want the class to be added to, then we tell it the class name that we are adding. You would replace those with your own selectors and classes, but you get the idea.

If the user has not scrolled down 300 pixels or more, we want to do something else.

We are going to remove the class we added if the user scrolls back up on the page.

This runs our awesome function that we just coded as soon as the browser is ready to run code. Remember, we gave our function the name check_from_top_de, so enter your function name if you used a different one.

If the user is busy scrolling, we also want to check how far they have scrolled, so we need to run our function as the user scrolls.

Our function will be run if the user is detected scrolling on the page.

Practical applications of adding jQuery to your Divi site

Up next is two examples with code of using what we just learned to add some jQuery to your Divi site.

Changing the site header color on scroll

In this example, we wrote a function that changes the background color of our site header as the user scrolls through a page.

Preview:

Take a look at the code below, then we will briefly cover what you need to do to add this to your site.

You can do so many other things by simply adding CSS classes to elements. This should really get the gears turning. With just one line of CSS we can even change the logo on scroll.

Add the following line of code below the CSS you just saved into the CSS box in your Divi Theme Options.

Making fixed blurb modules appear and disappear on scroll

For the second example we made some cool blurbs that fade in as you scroll over three fullwidth header modules, then fade out again as you scroll up.

Preview:

Take a look at the code below, then we will briefly cover what you need to do to add this to your site.

1. 1. Add 4 modules/rows/section on the page that will trigger our waypoint code
   2. Add #start-top to the first element, and #module-one, #module-two, #module-three to the subsequent elements
   3. Create a 3-column row at the bottom of your page and add a blurb to each row
   4. Set the “position” setting for this row to “fixed” and “z-index” to “9”
   5. For the blurbs, give the first blurb assign #one, second #two, third #three and add “display: none;” to the “main element” box in the custom CSS

Conclusion

Adding jQuery to your Divi site is a powerful tool that now firmly sits on your belt. We only scratched the surface on what is possible when using jQuery and Divi together, but hopefully, this was helpful in showing what is possible. Keep an eye out, because we intend to release some more posts about adding features and effects to your Divi sites with the power of jQuery.

Let’s take a look at what the snippet does exactly.

Preview:

Now that we know what it will look like, let’s take a look at the code you’ll be adding to make this magic happen.

functions.php

Divi Settings Custom CSS

Copy and paste this code into the Custom CSS box in the Divi Theme Settings.

BodyCommerce Users

Because of the way BodyCommerce works, we need to use some CSS that looks a little bit different. Please use the CSS below instead of the CSS above if you are using BodyCommerce.

Conclusion

That was a rather large and awesome change with very little code. We hope you found this snippet helpful, and if there are any other topics you would like us to cover, please leave a comment below.

Until next time!

Today we have a quick Snippet for you that will allow you to have your cart totals update automatically as you change the quantity field without having to click the update button on the cart page.

Simply add these to Divi > Theme Options > Integrations tab, under the Body section.

WooCommerce Cart Page

If you are NOT using our custom quantity feature from Divi BodyCommerce, use the code below.

WooCommerce Cart Page with BodyCommerce custom quantity

If you are using WooCommerce with BodyCommerce you can do so much more. If you are using our custom quantity feature (form field customiser), use the code below.

Add this CSS to Divi > Theme Options > Custom CSS to fix

How to dynamically change a select option in a dropdown using jQuery

Here is a nifty trick – if you have a select dropdown but want to have something a bit nicer in appearance and change the value of this drop down dynamically. Not sure what I am talking about?

Scenario 1: You have a WooCommerce website and have variations, these are in a select drop down. Maybe you want to have images for each variation and when the customer clicks on this image, it changes the variation to add to cart.

Scenario 2: You have a select drop down to filter posts but you want a nice image instead.

Both of these scenarios are not the only applications but you get the idea of what you can do with this quick bit of code.

Step 1: Create a select dropdown

Below is a bit of code that will create the select dropdown – for testing purposes we have simply added this dummy code. We will show you a real life application after.

Step 2: Add target to change the select option

The next step is to add whatever you want that will change the select value. This could be an image, icon, blurb, button or anything else you can think will work. For our purposes, we will use a blurb module. Go ahead and add your blurb module, upload a nice image or use an icon.

There is one key thing you need to do here, which is to add to the blurb module an ID that corresponds with the value of the select. In our example we have “web-design” as a value in the select option. We give one of the blurbs an ID of “web-design”, this way when they click this, it will tell our jQuery code which to change to. See the image below (1 = the value you want it to change)

One final thing we need to do here is to add the ID “custom-grid-control” to our row or section that the blurbs are in. This way we can target just these blurbs using jQuery.

Step 3: Add jQuery

The final step is to add the jQuery – we have added comments next to each line to tell you what it does – also watch the video at the bottom of this post which we explain it all in-depth if you need more help.

Step 4: Fine tune

And that’s it, now when you click on the blurb with the ID “web-design”, it will change the select to be Web Design, likewise, if you click on a blurb with an ID “social” it will change the select option to be the Social option.

Live example

Now we understand how we can do this, let’s show you a live example. We are (at the time of writing) working on a new layout pack for our plugin Divi Machine for projects. On this layout we decided to use this code. We have some projects and using Divi Machine, filtering them based on their categories.

We have set up the archive loop module and the filter module. In the filter module, we have specified just the categories to be an option to filter (make sure you select the option to update on the change field rather than the button). Now this is all set up we can filter our projects.

This is great but maybe we want to use images instead, we can use the technique above to do this. Add some blurbs to the page and make sure you give each one the ID that corresponds to the option value (the category slug). Now we have done this, add the jQuery code and when you click on the blurb, it will update the select dropdown in the filter and then filter the posts.

One thing to think of is in our example above we have added a div called “custom-filter-posts” around our dummy select dropdown – we need to make sure to add this same CSS class to our filter module in the CSS section.

We have also added some extra CSS to make things a little bit better (see below with comments)

If you want Divi to search ONLY products, you are in the right place. We know how frustrating it is that Divi does not search the products but searches everything. This is not great for your customers UX so the snippet below will solve this for you.

Add this code to Divi > Theme Options > Integration > Body. 

Once added, some code will by dynamically added which will make the search bar in the header and all the search modules search products only.

We hope this helps you and any questions please ask.

If using the theme builder and adding the search module, please exclude pages and posts as seen below

If you want to display your SKU on the cart and checkout pages, simply add this code to your child theme in the functions.php file. It hooks into the action “woocommerce_cart_item_name” which is perfect.

We hope this helps you in some way.

Do you want to make some checkout fields not required such as phone number or the first name? Use this snippet below to do this.

In the above we are making the billing first name, last name, phone number, email and country as not required.

To add more you need to just add the HTML names of the fields. You can use inspect to check the names on the checkout page. For your reference we have added them below.

Likewise you can change the text “false” to be “true” to make them required.

Billing Fields

• billing_first_name
• billing_last_name
• billing_company
• billing_country
• billing_address_1
• billing_address_2
• billing_city
• billing_state
• billing_postcode
• billing_phone
• billing_email

Shipping Fields

• shipping_first_name
• shipping_last_name
• shipping_company
• shipping_country
• shipping_address_1
• shipping_address_2
• shipping_city
• shipping_state
• shipping_postcode

Order Fields

• order_comments

Have you needed to have a class added to your body for a particular job. Maybe you just need one added or maybe you need one added based on the user role – have you ever wanted to know how to add the user role as a class name to the body? Below are two snippets to add to your functions.php file.

You can use the user role class to customise the page (using CSS) based on the user or you can hide sections/modules. 

Need to change the text of a string on your WooCommerce shop such as “Billing Details” or “Product” to be something else.

Here is a snippet that will help. We have given a few examples so simply replace/remove as you need. Add this text to your functions.php file in your child theme.

Has the admin bar ever annoyed you at the top or just wanted to move WP admin bar to the bottom of the browser?

Use this snippet to move it to the bottom. Add this to your functions.php file in your child theme.

Ever wanted to add some CSS to WordPress admin to customise the appearance? Maybe you want to style the admin to look like your agency or if you are like me, love a certain colour and want to see this more often.

Simply add this php code to your functions.php file in your child them. You can add any CSS you want.

The code below will change the background and border colour of your primary button.

We hope this helps