Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

 

Birdhouse Chirps

TIPS, TRICKS, EXPLOSIONS

A collection of articles & snippets complied as a resource, or code in progress. Enjoy!

Type Ahead Text

Type Ahead Text

..The Goal:Animated text is awesome (it's 2020 so don't hold me to this post), but for right now, it has it's purposes. For example, maybe you want to impersonate someone typing questions into a search engine? Why not, it's relatable, and that's probably what you did...

read more
Divi 4.0 Incoming!

Divi 4.0 Incoming!

Divi 4.0 is launching on October 17th. That’s not too far away, and taking a look at the new features and upgrades…we’re STOKED!

read more
Force PayPal Payments to “Processing” status when completed vs “Payment Pending”

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.

read more
Turn Your Cursor Into an Emoji

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,...

read more
Add a Preloader to WooCommerce Checkout

Add a Preloader to WooCommerce Checkout

When a customer hits the "place order" button it's now 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...

read more
Scroll to Bottom with jQuery

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...

read more
Default Mobile First Media Query Sizes

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...

read more
jQuery Card Flip

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 &...

read more
Fix the WooCommerce Checkout Page Layout

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...

read more
Add Custom Scripts to Functions

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...

read more
How to Show Which List Element was Selected in Another Div

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.

read more
Copy Div Content and Clone to Another Div

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.

read more
Change the Default Shop Page in WooCommerce

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.

read more
Adding the Page Slug as a Class to the Body Tag

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.

read more