Hide Checkout Items Based on Shipping Method
A copy-and-paste tutorial that details how to hide/show elements on the WooCommerce checkout, depending on shipping method.
Animate Search and Text Placeholders
Add text-reveal animations to input, search and text area placeholders on your WordPress site with this short copy-and-paste tutorial. It’s a neat UX enhancement for pages where you want to draw the user’s attention to an input box.
Share Link to a Draft Post in WordPress
Learn how to create sharing links for Draft Posts in WordPress with some simple PHP code. These links can be used to share draft content with non-logged-in users. We’ll make a small meta box on the Edit Post page too, so it’s super easy to copy the draft post link.
Animated WordPress Gallery Links
Turn the regular WordPress gallery block into a series of CSS-animated link-tiles. It’s a fun way to add bling to your site without slowing down the page-load. We’ll set it up so all we need to do is add the “animated-gallery-links” class to any gallery block we want to animate.
Insert Product Price into the Add-to-Cart Button
Insert the selected variation’s price into the add-to-cart button on the WooCommerce single product page with this JavaScript snippet.
WooCommerce Checkout Labels in the Input Fields
Reconfigure the WooCommerce checkout fields so the placeholder labels are inside the field inputs. These compact placeholder labels will resize, depending on whether the fields contain data and/or have input focus.
Reusable JavaScript Click-to-Copy
Add click-to-copy JavaScript functionality to any WordPress site. Use it with any element (or WordPress block) just by setting a CSS class name. It’s ultra-lightweight and should work with page builders too.
Create a WordPress Accordion without a Plugin
Learn how to create a lightweight JavaScript accordion for WordPress blocks without installing a plugin. It’s an easy-to-follow tutorial and the code can be customised to fit into your projects.
WooCommerce Single Product Image Gallery Grid
Change the WooCommerce single product image gallery into a grid layout, where the featured image and gallery thumbnails all the same size. For variable products, the top-left image is dynamic… so it shows the image of the selected product variation.
Separate WooCommerce login and registration forms
Learn how to split the WooCommerce login and registration forms into two separate URLs without using a plugin. We’ll also make it easy to add custom fields to the registration form, so you can capture things like billing address when new users/customers register.
Add Share-to-Social Links to WordPress Posts
Add share-to-social network links to any WordPress content without installing a plugin. We’ll use some simple PHP to hook the content and inject the links & icons. It’s easy to customise and to add more networks of your own.
WooCommerce Shipping Methods as a Dropdown List
Convert the WooCommerce checkout shipping methods to a drop-down list, or pill-style buttons. It’s copy-and-paste code and you can customise it for your store’s specific needs.
Animated Text-Reveal Effect
Learn how to create an animated text-reveal effect for your WordPress projects. A fun copy-and-paste JavaScript tutorial.
Auto-Numbered Headings
Learn how to add automatically-numbered headings for your post content. They can be ascending or descending. It’s a great little tutorial for Top Ten lists.
WordPress Admin Menu Items with Custom URLs
Add custom menu items to the main WordPress admin menu, with whatever URLs you want. Super-handy for linking to external support URLs and custom reports.
Create a Glossary with Rich HTML Tooltips
In this tutorial we’re going to create a glossary for a WordPress site, with rich HTML tooltips controlled by Popper JS, We’ll do this by creating a custom plugin, step-by-step.
Add GTIN to WooCommerce Product Schema
Fix the “No global identifier provided (e.g. GTIN)” warning from Google Search Console by adjusting the WooCommerce product schema. Works with GTIN, EAN and MPN.
Product Attribute Icons for WooCommerce
Create a strip of product attribute icons and HTML snippets for the WooCommerce single product page. It’s a straightforward copy-and-paste tutorial that’s fully customisable with snippet files and filters, so you can use the same code in multiple projects.
Multiple WordPress Gallery Effects with Swiper
This tutorial extends the standard WordPress Gallery Block by using Swiper and GLightbox. You can apply different transition effects to your WordPress galleries by adding CSS Classes to the gallery blocks.
Custom WooCommerce Product Variation Fields
This tutorials covers how to add custom fields to your product variations in WooCommerce, sanitise the inputs and display the fields in your customers’ orders. We’ll do this with a few snippets of code, without installing another plugin. It’s easy to extend, and you don’t need to be a developer to follow it. I promise.