WooCommerce
Setup: WooCommerce Variable Product for t-shirts with multiple colors and multiple sizes. Theme: GeneratePress. Primary image is of a t-shirt with artwork on it. Secondary image is a close-up of just the artwork with a colored background that matches the color of the t-shirt. Since there are multiple t-shirt colors (and multiple designs), I don’t…
Most caching and CDN info revolves around WordPress but not WordPress + WooCommerce. Standard caching applies to Javascript, CSS, and images, while HTML caching (also called full page caching) caches the entire page. When it comes to HTML caching/full page caching, WooCommerce pages and WooCommerce cookies must be bypassed/excluded. Cloudflare, for instance, uses Page Rules…
![[Solution] GeneratePress GP Premium Plugin Breaks Apple Pay Button on WooCommerce Single Product Page](https://www.designparc.com/wp-content/uploads/Apple-Pay-button-missing-on-WooCommerce-Single-Product-Page-using-GeneratePress-GP-Premium-plugin.webp)
Problem: The Apple Pay button is missing/broken/hidden on the WooCommerce Single Product Page (but it is displaying properly on WooCommerce Cart and Checkout pages). After deactivating all of the WordPress site’s plugins, I narrowed down the problem to GeneratePress’s GP Premium plugin (which is awesome, by the way!). Note: This post is specifically geared toward…
Problem #1: Quantity arrows but no plus / minus buttons Display Plus & Minus Quantity Buttons on WooCommerce Single Product Page and Cart Page Add the following PHP snippet to WordPress using Code Snippets plugin (and choose the “Only run on site front-end” option): Source: WooCommerce: Add to Cart Quantity Plus & Minus Buttons Problem…
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
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….
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…
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…
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…