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
  • 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.

    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

    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

     

    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 🙂

Viewing 6 posts - 1 through 6 (of 6 total)