Birdhouse Web Design Rated “Top Web Designers” in Minneapolis by Expertise.com
Learn How To Add A New Blog Posts To Your Divi Website Using The Back and Frontend Editors to Make New Website Pages and Posts.
The truth is, while free email services are super convenient, you might not realizing your free email address is saying more about your company to prospective customers than you think.
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.
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.
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!
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.
This is an example for how to add favicons, including an iPhone “add to home” tile to your Shopify website.
This is an example for how to check if a Shopify checkbox is checked using only liquid conditional logic.
Animated text is awesome (it’s 2020 so don’t hold me to this post), but for right now, it has it’s purposes.
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…
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.
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?
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.
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.
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.
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,...
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...
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...
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...
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 &...
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...
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...
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...
Speed up your website load time and improve your metrix speed by adding code provided via GoDaddy tech support.
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.
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.
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.
Sometimes you might want to replace text with an icon in the navigation, or replace the verbiage output of a particular word.
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.
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.
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.
Thanks for Visiting Birdhouse Chirps
Do you have a great website idea and need help getting building it? Contact our team and let’s get started!
WITH SO MUCH MORE.
With our expertly designed websites, we'll help you make a global brand that will upscale your products and yield a positive return on your investment. Birdhouse Web Design delivers a comprehensive range of features and benefits to online retailers and merchants to help scale your business.
A brand’s online presence is the key to generating a large number of customers. We're an experienced team that strives to implement tactics that are long-term and sustain the tough market competition.
- Custom Web Design
- eCommerce & Stores
- Graphic Design
- Logos & Illustrations
- Design Revamps
- Web Support & Maintenance
- Ads & Marketing
- Responsive Development
- Analytics & Reporting
- On and Off Page SEO
- WordPress, Shopify & More
- UX/UI Adaptability
- Social Media Solutions
- Domains & Server Setup
- Security & Performance
- Events & Promotions
Get In Touch
Ready to get your next website project started? Message the Birdhouse Web Design team and let us know how we can help. Whether growing your business or just starting out, we're here to support you the entire way.