Create a Category Filter with Divi Sections and Rows
In this tutorial, we’ll show you how to create a category filter with Divi sections and rows. We’ll be using the Divi framework in this article to set up our structure.
Visually Disable the WooCommerce Checkout Button When Processing – CSS Tricks
We’re going to add a simple block of code to our CSS stylesheet that makes the WooCommerce button appear disabled when a customer clicks it to checkout.
Show Only a Couple Product Thumbnails and Hide the Others in Shopify
This short tutorial shows you how to use a small bit of CSS and jQuery to hide your product thumbnails, and then show JUST the ones you want on your Shopify product pages!
How to Add Vimeo Videos in Shopify
Learn How to Add Vimeo Videos in Shopify – You’ve probably noticed by now that Shopify video modules support YouTube links, but for some reason they don’t support Vimeo.
Adding Favicons in Shopify
This is an example for how to add favicons, including an iPhone “add to home” tile to your Shopify website.
Shopify Checkbox Logic
This is an example for how to check if a Shopify checkbox is checked using only liquid conditional logic.
Type Ahead Text
Animated text is awesome (it’s 2020 so don’t hold me to this post), but for right now, it has it’s purposes.
Target Safari Browsers with JavaScript
You got a bug, but it’s not a virus…it’s SAFARI. After Microsoft retired their infamous Internet Exploder someone had to take the first place lead as the worst browser…
Finally! A Solution to that Pesky Double Submission on Contact Form 7!
Have you ever had a customer complete a form and they SMASH the submit button multiple times, sending you multiple emails of the same thing? Annoying, right? Yeah, let’s fix that.
Make Your Contact Form 7 Look Like Divi’s
I’m a big fan of the Divi theme, but the out of the box contact form is pretty lackluster. Here are some general limitations…so what do you do?
Remove Elements from DOM if Browser Window is Less than (viewport)
There are times when you might not want something available on smaller screens, or taking up resources (like a ticker or videos). Hiding an element in CSS doesn’t remove it, it just hides it. This method removes it from the DOM entirely on the screens with the size you specify.
If An Element Contains A Word, Do Something! jQuery
Sometimes you want to alter the text, background, or animation of a particular element based on whether the words in match. For example, if a div has the word “home” change the word home to an icon instead.
Force PayPal Payments to “Processing” status when completed vs “Payment Pending”
If you’re using PayPal Standard with WooCommerce, you may have noticed that even if a customer successfully checks out, the status in your WooCommerce orders doesn’t automatically flip over to Processing like completed credit card payments do. With this code, you can force a completed PayPal payment to set the order status to PROCESSING, allowing the appropriate actions to trigger in the system automatically, like sending a notification to your customer that their order was received.
Turn Your Cursor Into an Emoji
You?Because you can! That and it adds a couple of fun elements to your page if that's what you're looking for. Requirements: CSS Emojipedia (to pick your emoji) Before After CSS Add this to the bottom of your CSS stylesheet. You can play around with the height, width,...
Add a Preloader to WooCommerce Checkout
When a customer hits the "place order" button it's not always obvious that the order is processing which can cause some customers to mash the button, causing double orders to happen! Adding this easy preloader will put an overlay and GIF spinner on WooCommerce...
Scroll to Bottom with jQuery
The Goal:Add a Scroll to Bottom to your website that acts like scroll to top, but goes in the opposite direction. Requirements: CSS jQuery Note: Note: You'll want to change .qodef-mobile-header to match an element that exists on your page wherever you want this button...
Default Mobile First Media Query Sizes
The Goal:Add a useful media query boilerplate template to your CSS stylesheet so you have better control over how your website displays on devices (phones, iPads, etc.). Requirements: CSS Original Article Image Source Before After CSS Add this to the bottom of your...
jQuery Card Flip
The Goal:When an image is clicked on, it flips over to reveal different content (ie: text, another image, etc.). I like to use this for displaying company logos, or hiding content that might not need to take up space unless interacted with. Requirements: HTML &...
Fix the WooCommerce Checkout Page Layout
The Goal:Update the layout of the WooCommerce checkout page to be more user friendly in 2 columns The out of the box WooCommerce layout doesn't make good use of the right column in its two column layout for the checkout page. Adding this CSS to your stylesheet will...
Override Image Size To Fix Blurry Images in WooCommerce Products
The Goal:Make product images for WooCommerce less blurry. Some themes will compress and shrink the file size of your product images to help your pages load faster, however this can occasionally cause blurry images. Some themes allow you to override this in the...
Add Custom Scripts to Functions
The Goal:Use the functions.php file to properly add custom scripts to your child theme. This is the preferred method to adding custom scripts and styles to a website's child theme. Requirements: Access to functions.php functions.php Add this to code to the bottom of...
HTACCESS and Code that Speeds Your Site Up with Expiry Headers
Speed up your website load time and improve your metrix speed by adding code provided via GoDaddy tech support.
How to Show Which List Element was Selected in Another Div
The Goal: Show which list item was selected in another div container.
Why? Sometimes you want text to dynamically change to show the user which element they selected. This tutorial uses jQuery to grab the content and place it into another div each time a list item is selected.
Copy Div Content and Clone to Another Div
Sometimes you’ll use a plugin that dynamically creates content in places you might not want it. This tutorial will let you clone that content to a new location, then remove the original so you don’t have duplicates.
Check if jQuery is Installed with JavaScript
Use this JavaScript to check whether jQuery is installed and ready to rock on your website.
Customize the Text On Browser Tab When User Navigates Away – Window Blur
When a user navigates away from the browser window they’re on (ie: your website to someone else’s), this code snippet will change the text to something catchy that will bring them back.
Replace Text If It Matches Comparing Text
Sometimes you might want to replace text with an icon in the navigation, or replace the verbiage output of a particular word.
Change the Default Shop Page in WooCommerce
Sometimes you want to customize your shop page and the default layout doesn’t really let you do that. With this method you can create your own custom shopping page, then set the redirect in the functions.php file so anywhere in the site where there’s a link to “shop” it will go to your new page.
Adding the Page Slug as a Class to the Body Tag
We added a page slugs in body class which allowed us to do all of the page specific customization we wanted without any complications. In this article, we will show you how to add page slug in body class of your WordPress themes.
How to Create a Custom Upload Button with Upload File Text
There are many blogs out there regarding how to customize the file upload button which require you to hide the original button, and consequentially the file indicator that shows which file you uploaded.