Designing & Optimizing Preview Images for Social Media Sharing

Three examples of Bitcoin t-shirt “preview” images for when WooCommerce products are shared on social media. Yoast SEO‘s WordPress plugin makes these images easy to attach to each product. Model t-shirt mockups (with transparent background) generated with Printful‘s Design Maker. Layout using Affinity Designer. Final designs exported from Affinity Designer to JPEG format with Quality…

Redesigning 15 Year Old Website – Inspired Amateur Productions

Music recording studio website gets a face-lift! This included new discography features that linked artists with their albums, and linked recording engineers and producers with the albums they worked on. Old Website Old specs for 2008 New Website New specs for 2022 Check out the new site: Tom Gordon’s Inspired Amateur Productions & Imirage Sound…

Switch Image Background Color On WooCommerce Variation Image Gallery

Goal: Display an enlarged version of t-shirt artwork on 9 different garment color options. Approach: Instead of generating and uploading 9 different artwork files with 9 different color backgrounds, we’re doing the following: This keeps everything lightweight. Switch Image Background (using CSS) On Color Variation Selection – Business Bloomer

WooCommerce – Add Extra Gallery Image Upload Field For Product Variations in WooCommerce Product Edit Page

Goal #1: Locate PHP & Javascript files in WooCommerce v7.3.0 plugin that involve uploading WooCommerce Single Product Variation Gallery Images, so I know where everything is and what it looks like in default mode. Goal #2: Add new PHP & Javascript that will add an extra gallery image upload field for WooCommerce Single Product Variations….

FlexSlider “Navigation Arrows” WooCommerce Product Gallery Image Slider

Navigation Arrows Add Navigation Arrows in FlexSlider (v2.7.2) WooCommerce Product Gallery. Requires linking to “Font Awesome 5 Free” CSS file for the Navigation Arrows. Follow How to Use font awesome icons as CSS content code (mainly, Step 1: Load the font awesome CSS file; ignore the brand icons aspect). Place the below PHP code in…

FlexSlider “Dot Pagination” WooCommerce Product Gallery Image Slider

Dot Pagination Use Dots on Mobile and Thumbs on Desktop Add Dot Pagination to FlexSlider (v2.7.2) WooCommerce Product Gallery Image Slider. By default the product gallery navigation uses thumbnails, but this can be swapped to dots by changing the ‘controlNav’ value to true. Place the below PHP code in Code Snippets, and set to Only…

Place WooCommerce Product Title Above Gallery Image on Mobile Only

Goal: Move WooCommerce Product Title to a different part of the Product page when on mobile. The ! is_admin() && is_product() && wp_is_mobile() functions are an if conditional that means only display the WooCommerce Product Title if all 3 of the following conditions are met: NOT in admin AND is a WooCommerce Product page AND…

Vue.js v2 Resources

The initial goal was to override a WordPress plugin’s image slider pagination thumbnails for desktop and mobile. I didn’t even know the plugin was using Vue.js. A lot of learning along the way about Vue instances, components, data, methods, and prototype. Still haven’t yet reached the goal of overriding the plugin’s Vue.js v2 settings, but…