Home Forums Themes Support Claue Strange stripe bug and a small design issue

Topic Resolution: Resolved

Tagged: 

This topic contains 43 replies, has 2 voices, and was last updated by  Harry 3 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 44 total)
  • Author
    Posts
  • #23501

    Hi Harry,

    We waited 1 year to notify you of this bug as we did not know how to replicate. This appears suddenly from time to time  and we observed this in mobile , firefox, chrome and opera etc . The last time it appeared I checked the code and found that it is possibly coming from stripe. (We use woocommerce’s default stripe plugin). We will post more after opening this ticket to make ticket content private.

    #23502
    This reply has been marked as private.
    #23534

    Hi ArtK,

    1. Thank you for report bug relate to Stripe. We fixed this issue and included for the next update.

    2. Please remove css shadow for div wrap image

    .p-thumb .slick-list {
        box-shadow: 11px 12px 12px 2px grey;
    }
    .single-product-thumbnail .slick-slide img {
        box-shadow: 10px 7px 5px grey;
    }

    and add new css

    .p-thumb.slick-initialized .slick-slide {
    	padding: 0 25px 25px 0;
    }
    .single-product-thumbnail .p-thumb .slick-slide img {
    	box-shadow: 11px 12px 12px 2px grey;
    }

    And you have to disable zoom function in Theme Option > WooCommerce > Product Detail Settings > Enable Zoom Effect > Off and use lightbox zoom

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #23547
    This reply has been marked as private.
    #23552
    This reply has been marked as private.
    #23562

    Hi ArtK,

    2. You have to switch off the zoom effect because the hover zoom effect will overlay the shadow of image. The light zoom effect is default feature with theme. When user click on the image it will open on the popup.

    3. The image not align with the arrows because space for the shadow.

    Please edit the code to make arrow right correct position.

    Change

    @media only screen and (min-width: 737px) {
    .type-product:not(.product-quickview) .slick-next {
        right: -40px!important;
    }}

    to

    @media only screen and (min-width: 737px) {
    .type-product:not(.product-quickview) .slick-next {
        right: -16px!important;
    }}

    and add new code

    @media only screen and (max-width: 736px) {
    .type-product:not(.product-quickview) .slick-next {
        right: 55px!important;
    }}

    Because all images don’t have same height, it has to control the arrow at middle of all. It get middle of div wrap all content and the parent div get height of tallest image.

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #23568
    This reply has been marked as private.
    #23580

    Hi Artkaze,

    1. The fade-out effect doesn’t help solve the issue with shadow. Because it have same css value (overflow: hidden;)

    You can change product layout to layout-4 in Theme Option > WooCommerce > Product Detail Settings and enable zoom effect.

    2. For code please keep old code

    @media only screen and (min-width: 737px) {
    .type-product:not(.product-quickview) .slick-next {
    right: -40px!important;
    }}

    and add new

    @media only screen and (min-width: 737px) {
    .type-product:not(.product-quickview) .p-thumb .slick-next {
        right: -16px!important;
    }}
    
    @media only screen and (max-width: 736px) {
    .type-product:not(.product-quickview) .p-thumb .slick-next {
        right: 55px!important;
    }}

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #23584
    This reply has been marked as private.
    #23588

    Dear ArtK,

    2. Please change code

    @media only screen and (max-width: 736px) {
    .type-product:not(.product-quickview) .slick-next {
        right: 55px!important;
    }}

    to

    @media only screen and (max-width: 736px) {
    .type-product:not(.product-quickview) .p-thumb .slick-next {
        right: 55px!important;
    }}

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #23596
    This reply has been marked as private.
    #23598
    This reply has been marked as private.
    #23609

    Hi ArtK,

    Please add below code

    .left .p-video {
    right: 45px;
    bottom: 45px;
    }
    
    @media only screen and (max-width: 736px) {
    .left .p-video {
    bottom: 150px;
    }
    }

    2. Please change code to

    .single-product-thumbnail .p-thumb img {
    	box-shadow: 11px 12px 12px 2px grey;
    }

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #23614
    This reply has been marked as private.
    #23616
    This reply has been marked as private.
Viewing 15 posts - 1 through 15 (of 44 total)

You must be logged in to reply to this topic.