Problems with visual implementation in the Shop system

Home › Forums › Jevelin Theme › Problems with visual implementation in the Shop system

Home › Forums › Jevelin Theme › Problems with visual implementation in the Shop system

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    RESOLVED Posts

  • jtanardi
    Participant

    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:

    1. 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.
    2. 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.
    3. 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

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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 team

    jtanardi
    Participant

    Thanks 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

     

    Shufflehound Support
    Moderator

    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;
}

     

     

    jtanardi
    Participant

    Thanks, worked great!

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)