WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Change image on mouseover (23 posts)

  1. docwha
    Member
    Posted 1 year ago #

    Hi,
    is it possible to have the image change on mouseover on the shop page? For instance my client sells cushions and she wants the back of the cushion to show on mouseover. I also need to make it simple for her to change the rollover image as products are added and changed.

    Thanks.

    http://wordpress.org/extend/plugins/woocommerce/

  2. Roy
    Member
    Posted 1 year ago #

    I don't think there is a plugin for this so you would have to custom code this yourself via JS. For the images, you could either add custom meta boxes for them or just use the native image loader and have the JS script flip through all of them on hover.

  3. citynode
    Member
    Posted 1 year ago #

    I'd have to say that I think that is a worse user experience, to have the image change from one thing to a different view, just because your mouse is hovering over the image. There isn't any indication for the user that they are going to find the back of the pillow there, and the changing image would be unexpected. Better to use a lightbox sort of thing, where thumbnails of both views are seen below the main image, and can change by clicking on thumbnails, or the standard woocommerce/wordpress lightbox experience.

    I know though, the client wants what the client wants.

  4. docwha
    Member
    Posted 1 year ago #

    Hello and thanks for your answers. I must admit I wasn't sure about the user experience myself but the client had seen it somewhere. I've set it with the standard woocommerce lightbox. I'll see what she says first before going further.

  5. citynode
    Member
    Posted 1 year ago #

    I hope that they can be talked out of it gently, or that they just forget about it as you work on actual problems. If I didn't hope they would just forget about the issue, I'd want to ask them where they had seen it, so you could go look at it "in the wild" and review how well it really works.

  6. citynode
    Member
    Posted 1 year ago #

    Not that there aren't good applications for "change image on mouseover" for products; there are, so this would be good to figure out.

  7. docwha
    Member
    Posted 1 year ago #

    Yes, I will find out where it was seen and look into it.

  8. imeldesign
    Member
    Posted 1 year ago #

    Can you post where they saw it? I just had the same request from my client.

  9. docwha
    Member
    Posted 1 year ago #

  10. imeldesign
    Member
    Posted 1 year ago #

    I found it in some themes on themeforest as well. On Themes built on WooCommerce so it is possible.
    http://themeforest.net/item/blanco-responsive-wordpress-ecommerce-theme/2755246?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=8theme

  11. docwha
    Member
    Posted 1 year ago #

    Thanks for that, will look and see how it'd done. If I manage I will let you know.

  12. olen1009
    Member
    Posted 1 year ago #

    The general trend seems to be that when someone clicks either a variation thumbnail or variation text choice in a dropdown (or radio button), the featured image changes to the new selection. But that doesn't happen with WC. Also, while there are plugins that turn a mouseover image into zoom...that zoom is agonizing to me. It's like looking at the picture with a magnifying glass. I would rather that the entire picture just "burst", as if it had been clicked, and then reduce back to the original size when the mouse is moved off the image.

  13. downrodeo
    Member
    Posted 1 year ago #

    Hi, has anyone managed to solve this? I'm not sure how to call the alt image, that's the problem I'm having.

  14. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Please post your own topic.

  15. amitsinghami
    Member
    Posted 10 months ago #

  16. gregor59
    Member
    Posted 10 months ago #

    Thanks for that.
    I'll install it this evening and let you know how i get on.

  17. julianens
    Member
    Posted 6 months ago #

    hi, has anyone figured out how to hover the image? thanks.

  18. Partiallydecapitated
    Member
    Posted 5 months ago #

    I did it on a site I'm working on right now with html and css.
    You can see the effect working here:
    http://www.cbdtesting.biz/
    scroll down a bit to see it working. You have to mouseover the tiles in the Recent Work Section.
    As previously noted, it's not an intuitive effect and marginal UX, but it is fun to do.
    The original theme was purchased from themeforest.
    All modifications were added in the editor for the page and the css was added in the custom css area of the theme.
    Site is still under development, but the effect works. This version flips the image to display text, but that could easily be changed to show another pic.
    If that's what you want I can post how I did it.
    Good Luck.

  19. torie27
    Member
    Posted 5 months ago #

    Love that effect ^^ on cdbtesting.biz... can you post how you did it, please?

  20. Partiallydecapitated
    Member
    Posted 5 months ago #

    Certainly, but here a couple of caveats:
    1. I've done this on several sites, but some themes may create problems. Only way to tell is to try it and see.
    2. Prepare to fiddle around with the css to get everything aligned right. On some themes this can be frustrating.
    3. Be sure you make all the edits in either a REAL editor or on the TEXT tab of the WP editor. Using the Visual Editor in the WP interface won't work.

    Here is the html for 1 card. You can repeat as needed for how many flipcards you require per row. On the example site I posted I used 3 cards/images per row.

    <!-- card -->
    <div class="main-flip-box center" id="flipcards"> <!-- This is the main div where a row of flipcards resides -->
    	<div class="flip-container"> <-- this is the div for the first indivudual card, repeat as necessary -->
    		<div class="flipper"> <-- this is where the front image goes -->
    			<div class="front"><img class="aligncenter  wp-image-3447" alt="service3" src="http://front_image.png" width="356" height="265" /></div>
    
    		<div class="main-flip-box center back"> <-- This is where the image for the back goes -->
    			<img class="aligncenter" alt="" src="http://back_image.png" width="356" height="265" />
    				<h3 class="back-title">Title</h3>
    					This is a short description about this project and/or why it's relevant.
    					<a href="http://your_link">Link Text.</a>
    		</div>
    	</div>
    </div>

    Basically, all this does is create the main div (1 row of flip cards) that contain 2 more div to hold the front and back images. In this instance, the div for the BACK image contains other html elements (text, links, etc.) if you only want to flip images you can lose those elements. There may be a more elegant solution to span the cards/images across the screen, but I'm not smart enough to figure it out. This method has worked with several WP themes for me.

    Getting all the images aligned will be the hardest task. Be prepared to adjust image size, div width, float, display (inline, block, etc.) as required to play well with your theme. You can adjust all parameters with the style sheet, but depending on your theme you may find getting adjusting things easier to do with inline declarations first. Once you get everything where you want it, you can move all the properties into the stylesheet to clean the html up.

    I haven't got that far yet with this site; hence the inline styles.

    The css is where the magic happens:

    /* simple */
    
    		.main-flip-box{
    			cursor: default;
    			float: left;
    			/* width: 1280px; */
    			margin: 0 0 0 5%;
    			overflow: hidden;
    			position: relative;
    			text-align: center;
    		}
    
    		 .main{
    			position:relative;
    			/* width:1200px; */
    			margin: 0 auto;
    		}
    		.flip-container {
    			-webkit-perspective: 1000;
    			-moz-perspective: 1000;
    			perspective: 1000;
    			float: left;
    			margin: 20px;
    			border: 1px solid #ccc;
    		}
    
    			.flip-container:hover .flipper, .flip-container.hover .flipper {
    			-webkit-transform: rotateY(180deg);
    			-moz-transform: rotateY(180deg);
    			transform: rotateY(180deg);
    			}
    
    		.flip-container, .front, .back {
    			width: 300px;
    			height: 210px;
    		}
    
    		.flipper {
    			-webkit-transition: 0.6s;
    			-webkit-transform-style: preserve-3d;
    
    			-moz-transition: 0.6s;
    			-moz-transform-style: preserve-3d;
    
    			transition: 0.6s;
    			transform-style: preserve-3d;
    
    			position: relative;
    		}
    
    		.front, .back {
    			-webkit-backface-visibility: hidden;
    			-moz-backface-visibility: hidden;
    			backface-visibility: hidden;
    
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    
    		.front {
    			z-index: 2;
    		}
    
    		.back {
    			-webkit-transform: rotateY(180deg);
    			-moz-transform: rotateY(180deg);
    			transform: rotateY(180deg);
    		}
    
    		.front .name {
    			font-size: 2em;
    			display: inline-block;
    			background: rgba(33, 33, 33, 0.9);
    			color: #f8f8f8;
    			font-family: Courier;
    			padding: 5px 10px;
    			border-radius: 5px;
    			bottom: 60px;
    			left: 25%;
    			position: absolute;
    			text-shadow: 0.1em 0.1em 0.05em #333;
    
    			-webkit-transform: rotate(-20deg);
    			-moz-transform: rotate(-20deg);
    			transform: rotate(-20deg);
    		}
    
    		.back-logo {
    			position: absolute;
    			top: 40px;
    			left: 90px;
    			width: 160px;
    			height: 117px;
    			background: url(logo.png) 0 0 no-repeat;
    		}
    
    		.back-title {
    			font-weight: bold;
    			color: #00304a;
    			position: absolute;
    			top: 15px;
    			left: 0;
    			right: 0;
    			text-align: center;
    			font-family: Courier;
    
    		}
    
    		.back p {
    			position: absolute;
    			bottom: 40px;
    			left: 35px;
    			right: 0;
    			text-align: center;
    			padding: 0 0px;
                top: 50px;
    		}

    Please note: I just pasted the css as is and not all of it is necessary if you aren't going to have text on the back image. Some of the declarations are just for me to experiment with the layout once my client provides the info needed to finish the site.
    The hardest part of the css will be defining the width of the containers to fit your theme.

    Firebug is your best friend. If you know how to firebug it shouldn't be hard to tweak the layout to fit your template.

    Lastly, and importantly, because the transformations (flip) are all css transforms - they will only work in modern browsers.

    Hope that helps and good luck.

  21. Partiallydecapitated
    Member
    Posted 5 months ago #

    Another note,
    This declaration in the stylesheet:

    .flip-container:hover .flipper, .flip-container.hover .flippertransform { rotateY(180deg);
    }

    is what actually flips the cards.

    There are many other css transform properties you can use, and combining them can create some crazy effects. To see the entire set of css transform properties see:
    http://www.w3schools.com/cssref/css3_pr_transform.asp
    and click on the PLAY IT button for each effect to experiment.

  22. aleksamaj
    Member
    Posted 4 months ago #

  23. don dean
    Member
    Posted 2 months ago #

    After much searching on WP, I found a plugin that works great.
    "Hover Image", allows you to swap images with a mouseover of the cursor.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.