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…

Display WordPress WooCommerce Hooks In Exact Location On Page

Display WordPress WooCommerce Hooks In Exact Location On Page

What I’ve been searching for for the past week+ is a way to display the name of a WordPress Hook (actions & filters) on the WooCommerce product page – in their exact location on the page – so I can see how everything is laid out. Like how Google Maps displays business names next to…

WooCommerce Continue Shopping Redirect Link

WooCommerce: Edit “Continue Shopping” Link Redirect by Business Bloomer “Continue Shopping” appears on the Cart page when an item is added to Cart and you have “Redirect to the cart page after successful addition” enabled via the WooCommerce settings. By default, “Continue Shopping” button redirects to the previously visited page – sometimes this makes no…

Bitcoin Payments In WooCommerce Store

OpenNode allows you to accept Bitcoin payments on your WooCommerce store. From OpenNode’s site: How does OpenNode work with WooCommerce: OpenNode integrates with WooCommerce with a simple plugin that gives any WooCommerce the ability to accept Bitcoin payments. With a no-code integration, any WooCommerce business can accept Bitcoin payments on the Lightning Network using OpenNode….

AMP and WooCommerce

AMP and WooCommerce

AMP (Accelerated Mobile Pages) & WooCommerce Problem: On mobile, WooCommerce product page kept refreshing and never fully loaded. Answer: “WooCommerce is not yet AMP-compatible. The quickest way to resolve this is to disable the “Product” post type from being enabled in the AMP plugin.” (source, April 15, 2020) From AMP plugin support (July 21, 2021)…