Product Image Disappears on Hover

newharrison

Please can you help with why the product image disappears when the mouse is moved over it?

Thanks.

Phil

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

Hi,

Please see attached link

https://hastings.newharrison.com/shop/modern/hoodie/hastings-united-adults-hoodie/

Phil

Your images are too small.

Please upload images in higher resolution.

Or try the following CSS code:

.product-gallery-zoom .woocommerce-product-gallery__image[style]:hover a img{
   opacity: 1!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

HI,

Thanks, that has worked.

newharrison

Please can you also tell me what option i need to change to be able to change the colour of the text in the drop down box for the colour and size of the products. Currently it is set to white and you can only read it when you move the mouse over each line.

I would also like to change the yellow line that surrounds the box when you click on it.

thanks

Phil

You should be able to change that in Betheme -> Theme options -> Colors -> Forms.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

thank you.

I also have another question :)

How do i remove the left and right arrows at the top of the product page? I like the ones and the bottom but not the top. I would also like to change the 4 squares to either text or something else.

thanks

newharrison

Is it also possible to add a 'back to top' button when you are using the footer builder as all the options for this are greyed out on my site?

thanks

Phil

1) Please go to Betheme -> Theme options -> Globla -> Navigation & Share, and uncheck the header arrows.

2) Try the following CSS code:

.single-product .post-nav .home .icon{
   display: none;
}
.single-product .post-nav .home:after{
   content: "Back to shop";
}

3) In the Footer Builder, to achieve back to top button, you need to add an element with a link field like a button or icon box, and in this link field, put #Wrapper. Also, to achieve a smooth scroll to the top, you need to add a scroll class to this element.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

thank you

newharrison

sorry, another question.

how can i move the published by from the top of the page?

I would also like to get rid of the tags and categories drop downs. and possibly have these elsewhere on the page

thanks

Phil

how can i move the published by from the top of the page?

Sorry, but I do not understand. Can you explain that in more details, please?

I would also like to get rid of the tags and categories drop downs. and possibly have these elsewhere on the page

Do you mean a shop page, product page, blog, or something else?

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

Hi, I think I have sorted it as I have made a template for the posts.

I would like to change the social icons on the product pages, is this possible please?

I am also having issues with conditions for templates. I understand that i can set a header to appear on certain pages, i would like one header for the homepage and then another header for the rest of the site, however, i can only set the header to all pages, using the bebuilder editor, I am not sure about using elementor editor as it won't let me open the header (that has been designed using the bebuilder in elementor). here is a screenshot of it in bebuilder

newharrison

screenshot using elementor editor for a header

Phil

1) How would you like to change the share icons?

2) Assign one header condition for the entire website to achieve that. Then when you create a header for the home page, open the home page options and assign this second template there.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

Thanks Phil,

that worked with the header.

With regards to the socials, I would like to add more, so email, whatsapp etc and also change the hover colours to one relevant to my site theme.

Thanks in advance

newharrison

sorry, i also can't find out how to make the mobile menu full page along with changing the hover colour of the menu items.

i would also like to change the hover colour of the price field in the header next to the cart.

thanks

Phil

1) Adding more icons there requires modifying the theme files in which we do not provide support. But for changing the hover color, you can use the following CSS code:

.share-simple-wrapper .facebook:hover i{
 color: #0f0!important;
}

You can change the icons by modifying the .facebook to .linkedin, etc.

2) Mobile menu colors can be changed in the Style tabs of the Menu burger element.

Or you can use the sidebar menu builder.

https://support.muffingroup.com/video-tutorials/sidebar-menu-vertical-header-builder/

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

thank you

newharrison

Hi,

For some reason my header has become sticky, which i don't want. do you have any suggestions on how to change this back?

It never used to be like that.

hastings.newharrison.com

Phil

Open the header template, and change the position to Absolute.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

newharrison

thanks