- This topic has 5 replies, 2 voices, and was last updated 8 years, 5 months ago by
.
Dear support,
somehow the visual implementation of the WooCommerce shop does not work how it should at all. There are several problems which I cannot seem to fix:
- I did achieve to magnify the product display picture when hovering over, but the picture in the background does not fade. Thus I have slightly larger product picture with a smaller version in the back when hovering over with the mouse.
- The responsive theme does not work on the shop site. When visiting the website through the phone, the size of the product pictures remain oversized and do not fit the screen size whatsoever.
- When clicking the picture of a product to enlarge it the background of the actual product picture is gray, I dont mean the shading of the website behind – however I want the product to be placed in a white square.
For better understanding I attached picures 1-3 according to the problems I have.
Looking forward to hearing from you and best regards,
Julien
Hi Julien,
I hope you are well today and thank you for your questions.
Do the issues also occur for you on our demo site here https://jevelin.shufflehound.com/ ?
If not then could you please share me the page URL from your site where it is not displaying correctly so that i can troubleshoot it?
Best regards,
Shufflehound teamThanks for the quick reply.
The issue also occurs on your demo site for the custom shop page:
https://jevelin.shufflehound.com/shop/custom-page/If opened by phone the size is not adjusted.
You can find the URL with the info in the privat content box.
Best regards,
Julien
Solution for this topic
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.woocommerce ul.products li.product > a:hover img.wp-post-image { opacity: 0; } .woocommerce ul.products li.product > a .secondary-image-container { background: #FFF; } .sh-woocommerce-products .woocommerce.columns-3 ul.products li.product { max-width: 100%; } .woocommerce #lightcase-case[data-lc-type=image] #lightcase-content, .woocommerce #lightcase-case[data-lc-type=video] #lightcase-content { background-color: #FFF; }Thanks, worked great!
You are most welcome here 🙂
