Strange stripe bug and a small design issue

[ArtK]

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.

[ArtK]

This reply has been marked as private.

[Harry]

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

[ArtK]

This reply has been marked as private.

[ArtK]

This reply has been marked as private.

[Harry]

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

[ArtK]

This reply has been marked as private.

[Harry]

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

[ArtK]

This reply has been marked as private.

[Harry]

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

[ArtK]

This reply has been marked as private.

[ArtK]

This reply has been marked as private.

[Harry]

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

[ArtK]

This reply has been marked as private.

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

Please add new code to

@media only screen and (min-width: 480px) and (max-width: 736px) {
.left .p-video {
bottom: 190px;
}
}

Best regards

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

You need move the code below code

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

Don’t put it above.

Kind regards

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

Please change code to

@media only screen and (min-width: 667px) and (max-width: 736px) {
.left .p-video {
bottom: 260px;
}
.single-product-thumbnail.left .p-nav .slick-slide, 
.single-product-thumbnail.right .p-nav .slick-slide {
	width: inherit !important;
}
}

@media only screen and (min-width: 568px) and (max-width: 666px) {
.left .p-video {
bottom: 220px;
}
}
@media only screen and (min-width: 480px) and (max-width: 567px) {
.left .p-video {
bottom: 190px;
}
}

Regards

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi,

You add redundant / before code it make code not run http://take.ms/Hj3wT

I removed this. Please check again.

Regards

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

[ArtK]

This reply has been marked as private.

[ArtK]

This reply has been marked as private.

[Harry]

We confirm fixed the issue related to Stripe style.

Because your site use plugin “Buy For Me”

Please add below code to fix

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.product #wc-stripe-payment-request-button-separator~.single_add_to_cart_button {
		width: calc(100% - 255px);
	}
}

Kind regards

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

Could you please try clear cache of your browser.

On my screen it show like this http://take.ms/rEILV6

Kind regards

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

[ArtK]

Hi,

I checked your screenshot. You can see the OR between ‘buy now’ and ‘add to cart button’. (please see screenshot. We edited your screenshot and uploaded back)

This is the bug we want you to notice and as you can see, you can see it too.  We cleared browser cache and now we can see what you gave in print screen.

Can you please make the ‘buy now’ button look better in your theme? Basically, we want everything to be small and equally spaced like in your original theme. We do not like the long buttons and we attached a screenshot of how we want it to look.

We do not even know why the buy now button is appearing in that place? Either way, it is not matching claue design at all?

Can you please help fix the issue as presently it is looking very ugly 🙁

Best Regards,

Team Artk

Attachments:

You must be logged in to view attached files.

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

The code of Stripe plugin doesn’t support move button next to. They insert “-OR-” text and buy now button with ugly style.

If you check your site on Firefox or deactivate plugin Stripe, style of button back to original.

Hope you understand.

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

[ArtK]

This reply has been marked as private.

[Harry]

This reply has been marked as private.

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

Please remove your code and download file style.css to replace on your site

Kind regards

Attachments:

You must be logged in to view attached files.

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

I updated code in Theme Option > General Layout > Custom CSS and code in claue > style.css

Kind regards

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

[ArtK]

This reply has been marked as private.

[Harry]

Hi,

I change more codes in Custom CSS. Please use this app to compare code http://winmerge.org/

Kind regards

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

[ArtK]

This reply has been marked as private.

[ArtK]

This reply has been marked as private.

[Harry]

Hi,

The media query is

@media only screen and (max-width: 767px) and (min-width: 415px)

Kind regards

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

[ArtK]

This reply has been marked as private.

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

No more user use plugin “Buy For Me” so we don’t include this for core theme, If you want you can update in your custom CSS.

Kind regards

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

[Author]

Posts