[RaynardKyleGuzmanParticipant]

Hi all! Need some help for some things on my site yunoclothing.com

1. First I installed a plugin Woocommerce Product Image Flipper. This is so that the product image changes every time you hover on it. The first image on the product gallery is supposed to be the replacement however nothing happens when you hover on the image. Any advice?

2. On the product page, to remove the white box on the product image.

3. And If possible can the product gallery images be transferred to the right side of the featured image instead of it being at the bottom? thanks a lot! (I’ve provided an image)

*The second image is my product page, the white box visible and the product gallery images at the bottom of the featured image.

[RaynardKyleGuzmanParticipant]

Problem with uploading the file with the gallery images at the right side instead of being at the bottom of the featured image. I’ll just provide a link.

https://i.shopcopper.com/products/ready-or-not-ribbed-halter-dress-camel

Thanks a lot!

[JadeModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[RaynardKyleGuzmanParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thanks for writing around!

1. It sounds like you might be having an issue with a third party plugin. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

2. To remove the white box from the product page,

.single-product .x-img-thumbnail {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

3. To shift the gallery images to the right, add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.images .thumbnails').appendTo('.woocommerce div.product .summary');
});

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.single-product .thumbnails a {
    width: 32%;
    float: left;
    margin-right: 1%;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[RaynardKyleGuzmanParticipant]

Thanks for the quick reply! Could you suggest other plugins that have the same function (changing image upon hovering) that works well with the XTheme? Or could it be done through CSS? In such a way that when I hover my mouse on the featured image, the first image I set on the image gallery will replace the featured image.

For the image gallery it successfully moved however, it was not in the position I intended. Can it be at the right side however be arranged in a vertical manner. ( I’ve provided an image)

Thanks a lot!

[RaynardKyleGuzmanParticipant]

Image file was too large, will upload again. Sorry.

[JoaoModerator]

Hi There,

You can use the combination of The Grid with WooComerce and it does that.

Please have a look on it in function

https://theme-one.com/the-grid/suva/

Hope it helps

Joao

[RaynardKyleGuzmanParticipant]

Thanks, will try The Grid. 🙂 Would just like to ask again how to reposition the gallery images so that it is at the right side of the featured image, however for it to be arranged vertically as shown in the previous attached image. Was already able to reposition it using the code given above however it was not in my intended position. thanks a lot!

[Nabeel AModerator]

Hi again,

Please replace the previous jQuery script with the following code:

jQuery(document).ready(function($){
	$('.images .thumbnails').insertAfter('.product.type-product .images');
});

And replace the previous CSS with the following code:

.thumbnails {
    max-width: 100px;
    float: left;
}
.single-product .thumbnails a {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}
.woocommerce div.product .summary {
    width: calc(49% - 100px) !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[RaynardKyleGuzmanParticipant]

Great! It worked out! thanks! i would just like to ask assistance. I have installed the Xtheme extension, The Grid. Could you direct me how I could make the shop page looks exactly as it is right now (yunoclothing.com) and just add the effect where upon hovering an image, the first image in the image gallery will replace the featured image. thanks a lot!

[LelyModerator]

Hi There,

Please note that when you use THE GRID, you have to set the page as normal page and not as archive page where the content is controlled by template. To achieve exactly like that, please check the skin builder:https://theme-one.com/docs/the-grid/#!/skin_builder. Just to clarify, the grid is another plugin that we can use to build listing. By default, the shop listing design is controlled by the theme and stacks. When we use the grid, design and functionalities will be depends on the grid skin you have chosen. So it is not exactly as merging but rather choosing which one you want to use. Not all functionalities are available on each.

Hope this helps.

[RaynardKyleGuzmanParticipant]

Ok, so is it possible to change the featured image to the gallery image upon hover using CSS or a plugin without changing how the page currently looks like? The plugin I used to do this, woocommerce image hover, worked on other themes. However it doesnt do anything when i use the Xtheme. I hope this can be done through CSS or any other compatible plugins with the xtheme since I like the layout of the Xtheme compared to the other themes Thanks!

[RadModerator]

Hi there,

I’m not sure if it’s possible, but would you mind providing a working sample. I just like to see how it works.

THanks!

[RaynardKyleGuzmanParticipant]

Hi all! So regarding the hover function. First, I want to retain how the shop page currently looks like (yunoclothing.com) Just with the hover feature incorporated. a very good example would be the plugin description of woocommerce image flipper. Here is the link and I’ve also provided an image. (image1)

https://wordpress.org/plugins/woocommerce-product-image-flipper/screenshots/

One more thing, the previous customization I asked help with previously worked out great on desktop. The product gallery images are aligned vertically beside the product featured image. (image2) However it looked off when viewed on mobile. (image3) Is it possible to retain how it currently looks if viewed on desktop but when viewed on mobile, the product gallery images would be at the bottom of the featured image, aligned horizontally. (image4)

[Author]

Posts