├── languages └── woocommerce-product-image-flipper.pot ├── assets └── css │ └── style.css ├── readme.txt └── image-flipper.php /languages/woocommerce-product-image-flipper.pot: -------------------------------------------------------------------------------- 1 | # Copyright (C) 2017 WooCommerce Product Image Flipper 2 | # This file is distributed under the same license as the WooCommerce Product Image Flipper package. 3 | msgid "" 4 | msgstr "" 5 | "Project-Id-Version: WooCommerce Product Image Flipper 0.4.0\n" 6 | "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/woocommerce-" 7 | "product-image-flipper\n" 8 | "POT-Creation-Date: 2017-07-21 10:45:34+00:00\n" 9 | "MIME-Version: 1.0\n" 10 | "Content-Type: text/plain; charset=UTF-8\n" 11 | "Content-Transfer-Encoding: 8bit\n" 12 | "PO-Revision-Date: 2017-MO-DA HO:MI+ZONE\n" 13 | "Last-Translator: FULL NAME \n" 14 | "Language-Team: LANGUAGE \n" 15 | 16 | #. Plugin Name of the plugin/theme 17 | msgid "WooCommerce Product Image Flipper" 18 | msgstr "" 19 | 20 | #. Plugin URI of the plugin/theme 21 | msgid "http://jameskoster.co.uk/tag/product-image-flipper/" 22 | msgstr "" 23 | 24 | #. Description of the plugin/theme 25 | msgid "" 26 | "Adds a secondary image on product archives that is revealed on hover. " 27 | "Perfect for displaying front/back shots of clothing and other products." 28 | msgstr "" 29 | 30 | #. Author of the plugin/theme 31 | msgid "jameskoster" 32 | msgstr "" 33 | 34 | #. Author URI of the plugin/theme 35 | msgid "http://jameskoster.co.uk" 36 | msgstr "" 37 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles 3 | */ 4 | 5 | .pif-has-gallery { 6 | position: relative; 7 | } 8 | 9 | .pif-has-gallery .onsale { 10 | z-index: 999999; 11 | } 12 | 13 | .pif-has-gallery .wp-post-image { 14 | opacity: 1; 15 | } 16 | 17 | .pif-has-gallery .wp-post-image--secondary { 18 | position: absolute; 19 | top: 0; left: 0; 20 | opacity: 0; 21 | } 22 | 23 | /* backward compatibility - .woocommerce-LoopProduct-link will probably be removed in future releases */ 24 | ul.products li.pif-has-gallery a.woocommerce-LoopProduct-link [class*="wp-post-image"] { 25 | -webkit-transition: opacity .5s ease; 26 | -o-transition: opacity .5s ease; 27 | transition: opacity .5s ease; 28 | } 29 | 30 | ul.products li.pif-has-gallery a.woocommerce-LoopProduct-link:hover .wp-post-image { 31 | opacity: 0; 32 | } 33 | 34 | ul.products li.pif-has-gallery a.woocommerce-LoopProduct-link:hover .wp-post-image--secondary { 35 | opacity: 1; 36 | } 37 | 38 | ul.products li.pif-has-gallery a.woocommerce-loop-product__link [class*="wp-post-image"] { 39 | -webkit-transition: opacity .5s ease; 40 | -o-transition: opacity .5s ease; 41 | transition: opacity .5s ease; 42 | } 43 | 44 | ul.products li.pif-has-gallery a.woocommerce-loop-product__link:hover .wp-post-image { 45 | opacity: 0; 46 | } 47 | 48 | ul.products li.pif-has-gallery a.woocommerce-loop-product__link:hover .wp-post-image--secondary { 49 | opacity: 1; 50 | } 51 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === WooCommerce Product Image Flipper === 2 | Contributors: jameskoster, gabriel-kaam 3 | Tags: woocommerce, ecommerce, product, images, photos, product photos, front and back 4 | Requires at least: 3.8 5 | Tested up to: 5.0.0 6 | Stable tag: 0.4.2 7 | License: GPLv2 or later 8 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 9 | 10 | Adds a secondary image on product archives that is revealed on hover. Perfect for displaying front/back shots of clothing and other products. 11 | 12 | == Description == 13 | 14 | A very simple plugin that adds a secondary product thumbnail on product archives that is revealed when you hover over the main product image. 15 | 16 | This plugin is ideal if you'd like to display more than one image on product archives, and perfect if you want to display front and back images of clothing for example. 17 | 18 | Please feel free to contribute on github. 19 | 20 | == Installation == 21 | 22 | 1. Upload `woocommerce-product-image-flipper` to the `/wp-content/plugins/` directory 23 | 2. Activate the plugin through the 'Plugins' menu in WordPress 24 | 3. Done! 25 | 26 | == Frequently Asked Questions == 27 | 28 | = How do I control which image is displayed on hover? = 29 | 30 | Whichever image is first in the order of product gallery images will appear on hover. 31 | 32 | = My secondary image is taller than the main product image and overlaps content when it fades in = 33 | 34 | This is due to the secondary image being positioned absolutely. This is the cleanest way I can think to do this with CSS alone. You may want to consider hard cropping your product catalog thumbnails to ensure all images are the same dimensions in product archives. 35 | 36 | = It doesn't work. Nothing happens when I hover over images? = 37 | 38 | First of all check that the product you're checking has a gallery attached to it. 39 | 40 | 41 | == Screenshots == 42 | 43 | 1. A flipped image. 44 | 45 | == Changelog == 46 | 47 | = 0.4.2 - 26.11.2018 = 48 | * Fix - Moved initilisation function to pif class. Fixes compatibility with other plugins. 49 | 50 | = 0.4.1 - 12.12.2017 = 51 | * Fix - Flipper effect is now applied to shortcodes and product loops on single product pages. 52 | 53 | = 0.4.0 - 21.07.2017 = 54 | * Enhancement - This plugin does not use CSS 3d anymore. 55 | * Tweak - Secondary images now include alt / title tags 56 | 57 | = 0.3.0 = 58 | * Fix - WooCommerce 2.7 compatibility. 59 | * Tweak - Simpler image transition. 60 | 61 | = 0.2.0 = 62 | * Fix - WooCommerce 2.2 compatibility 63 | 64 | = 0.1 = 65 | Initial release. 66 | -------------------------------------------------------------------------------- /image-flipper.php: -------------------------------------------------------------------------------- 1 | get_gallery_image_ids( $product ); 63 | 64 | if ( $attachment_ids ) { 65 | $classes[] = 'pif-has-gallery'; 66 | } 67 | } 68 | } 69 | 70 | return $classes; 71 | } 72 | 73 | 74 | /** 75 | * Frontend functions 76 | */ 77 | public function woocommerce_template_loop_second_product_thumbnail() { 78 | global $product, $woocommerce; 79 | 80 | $attachment_ids = $this->get_gallery_image_ids( $product ); 81 | 82 | if ( $attachment_ids ) { 83 | $attachment_ids = array_values( $attachment_ids ); 84 | $secondary_image_id = $attachment_ids['0']; 85 | 86 | $secondary_image_alt = get_post_meta( $secondary_image_id, '_wp_attachment_image_alt', true ); 87 | $secondary_image_title = get_the_title($secondary_image_id); 88 | 89 | echo wp_get_attachment_image( 90 | $secondary_image_id, 91 | 'shop_catalog', 92 | '', 93 | array( 94 | 'class' => 'secondary-image attachment-shop-catalog wp-post-image wp-post-image--secondary', 95 | 'alt' => $secondary_image_alt, 96 | 'title' => $secondary_image_title 97 | ) 98 | ); 99 | } 100 | } 101 | 102 | 103 | /** 104 | * WooCommerce Compatibility Functions 105 | */ 106 | public function get_gallery_image_ids( $product ) { 107 | if ( ! is_a( $product, 'WC_Product' ) ) { 108 | return; 109 | } 110 | 111 | if ( is_callable( 'WC_Product::get_gallery_image_ids' ) ) { 112 | return $product->get_gallery_image_ids(); 113 | } else { 114 | return $product->get_gallery_attachment_ids(); 115 | } 116 | } 117 | 118 | } 119 | 120 | 121 | $WC_pif = new WC_pif(); 122 | } 123 | } 124 | --------------------------------------------------------------------------------