Add to Cart button looks off (unaligned)

[cheloco]

Hey there!

In mobile screens, when I open the Product details page, I experience 2 different placements for the Add to Cart button:

1. When the product is simple (no variations), the Add to Cart button looks OK (look at image #1).
2. When the product has different variations, the Add to Cart button looks OFF and unaligned (look at image #2).

I would like to fix the 2nd scenario and make it look like the first example, that is to place the Add to Cart button next to the Quantity number, not below.

Appreciate your help, as always!

Best regards,

Jorge

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I check your site on my phone it work well

Could you tell me which device and os version you are using

 

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

[cheloco]

Hi,

Tested it on iPhone 4S (version 9.3.5) and 5S (can’t take a look at the version now).

Also, why does the “Quantity bar” looks so big on your phone? Is there any way to fix that too?

Thanks!

[Foster]

Hi,
I saw you added some custom CSS code to customize this button, So for this case please provide me a temporary admin account, I will adjust for you.

Cheers,
Foster

[cheloco]

Hi Foster,

I prefer if you can guide me through the forum.

The Add to Cart looks like default now, except the color:

Code:

.entry-summary .single_add_to_cart_button,
.entry-summary .external_single_add_to_cart_button {
background-color: #f4af3a;
}

I removed the padding numbers and decreased the font size and works properly now only on iPhone 4S (version 9.3.5).

On iPhone 5S (latest version: 11.0.1) It looks really bad: The quantity number field looks very large, and takes more space than the Add to Cart button itself…  just as in the picture that Harry added here (I include my screenshot too).

(I also removed the wishlist and backtop icons). Don’t know if that is related.

Appreciate the help.

Regards,

Jorge

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

This because stripe css on new iOS it auto detect Apple Pay.

You can add some css to fix

@supports (-webkit-appearance: -apple-pay-button) {
@media only screen and (max-width: 767px) {
.single-product div.product .stripe-enabled form.cart .quantity {
width: 100%;
}
.single-product div.product .stripe-enabled form.cart .quantity ~ .button,
.single-product div.product .stripe-enabled form.cart .quantity + .button {
width: calc(100% – 95px);
margin: 10px 0 0 15px;
}

}

Best regards

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

[cheloco]

Hi again,

I applied that code and didn’t fix the issue. Instead, it changed many color configurations, price sizes, etc. I include the image taken from iPhone 5s.

Attachments:

You must be logged in to view attached files.

[Harry]

I checked your site but don’t see the code apply.

Could you give us admin account, we need closer check.

Thanks

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

[cheloco]

Harry wrote:

I checked your site but don’t see the code apply. Could you give us admin account, we need closer check. Thanks

Hi,

Hope you don’t mind; I asked my partner and he doesn’t allow access.

I applied your code earlier but it looked just like the picture I sent to you, so I removed it.

My complete Custom CSS Style is the following right now:

.single_variation_wrap { margin-top: 0; }
.woocommerce-variation.single_variation { display: none !important; }
.table.variations { margin-bottom: 1em; }

.entry-summary .single_add_to_cart_button,
.entry-summary .external_single_add_to_cart_button {
background-color: #f4af3a;
}

#jas-backtop { display: none !important; }

.footer__top { padding: 50px 0;}

.actions .button.apply-cupon {
background-color: #000000;
}

.actions .button.update-cart {
background-color: #000000;
}

.jas-mini-cart .button {
background-color: #000000;
}

.jas-mini-cart .button.checkout {
background-color: #f4af3a;
}

.badge span {
font-weight: bold;
background: #f4af3a;
}

.product-image:hover .product-button > *,
.product-image:hover .db:before {
display: none;
}

.product-image .product-button { display: none; }

.woocommerce-message {
display:none !important;
}

.woocommerce-info {
display:none !important;
}

.wc-proceed-to-checkout a {
background: #f4af3a;
text-align: center;
}

.btn-quickview { display: none!important; }

.badge .new { display: none!important; }

.jas-menu li.hot a:after { display: none!important; }
.jas-menu li.sale a:after { display: none!important; }
.jas-menu li.new a:after { display: none!important; }

html[lang=”es-ES”] .product-category h2::before,
html[lang=”es-ES”] .product-category h3::before {
content: “Comprar”;
}

#theme-my-login {
margin-left: auto;
margin-right: auto;
}

.price ins {
color: #000000;
font-size: 18px;
}

.entry-summary .price ins {
color: #000000;
font-size: 20px;
}

.price del {
color: #000000;
font-size: 16px;
}

.entry-summary .price del {
color: #000000;
font-size: 18px;
}

.availability span { display: none!important; }

.place_order {
background-color: #f4af3a;
}

.woocommerce .place-order input[type=submit] {
background: #f4af3a;
}

.about_paypal { display: none!important; }

Let me know If I did something wrong; I just pasted your code on the first line and looked like the last picture I’ve added here.

Thanks again!

[Harry]

Please add my suggest code and try to clear cache.

I need to see how the new code apply.

Thanks

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

[cheloco]

Harry wrote:

Please add my suggest code and try to clear cache. I need to see how the new code apply. Thanks

Hi. Let me know when you are online and I will apply it for you. I cannot leave as it is because it changes a lot of things (colors, styles) I don’t want to and looks worse than what it is now.

Thanks!

[Harry]

Do you use minify css plugin? I’m online now. please apply code.

Thanks

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

[cheloco]

Harry wrote:

Do you use minify css plugin? I’m online now. please apply code. Thanks

Hi, I just applied your code.

No, I don’t use Minify. Should I install it?

Reply back please when you check it out!

Thanks

[Harry]

Sorry the correct code lost close tag please use below code

@supports (-webkit-appearance: -apple-pay-button) {
@media only screen and (max-width: 767px) {
.single-product div.product .stripe-enabled form.cart .quantity {
width: 100%;
}
.single-product div.product .stripe-enabled form.cart .quantity~.button,
.single-product div.product .stripe-enabled form.cart .quantity+.button {
width: calc(100% – 95px);
margin: 10px 0 0 15px;
}
}
}

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

[cheloco]

Harry wrote:

Sorry the correct code lost close tag please use below code @supports (-webkit-appearance: -apple-pay-button) { @media only screen and (max-width: 767px) { .single-product div.product .stripe-enabled form.cart .quantity { width: 100%; } .single-product div.product .stripe-enabled form.cart .quantity~.button, .single-product div.product .stripe-enabled form.cart .quantity+.button { width: calc(100% – 95px); margin: 10px 0 0 15px; } } }

Oh, ok! Just applied that code. I don’t have the iPhone 5 to check it now. But this should work?

[Harry]

Do you use a cache plugin? or cache from CDN service (CloudFlare). I checked your site but see the code not apply.

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

[cheloco]

Oh, I didn’t understand you. I’m using WP Fastest Cache. I cleared the cache now. Can you see it?

[Harry]

I mean are you using CDN services (CloudFalre, MaxCDN) and enable cache on this. I check your site the code still not apply 🙁

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

[Harry]

please copy full the code you add in Custom CSS to https://pastebin.com/ and give me the link, I need to check more.

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

[cheloco]

Here it is: https://pastebin.com/WJ42sYTy

I checked the host panel and there’s a CloudFlare option but it’s disabled (I’m hosting with TMDHosting).

[Harry]

Hi,

I check and saw some text you copy via email it changed to another format so the browser can’t read.

Please use below code

Best regards

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

[cheloco]

Hi,

Thanks, I applied the code. I need to check with the iPhone (I’ll try that in a few hours and post back here).

Appreciate if you have a device to test it if it looks fine.

Regards

[Harry]

I checked your site on my phone iphone7+ it work well.

Best regards

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

[cheloco]

Harry, can you send a screenshot to see how it looks on iPhone 7+?

Thanks in advance

[Harry]

Hi,

This is screen on my phone

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

[cheloco]

Hey,

Looks OK on the latest iOS and iPhone 4S (version 9.3.5), however, in iPhone 5s (not the latest iOS version) it looks like the picture I add here.

Anything else to do or that’s impossible?

Thanks for the help

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can add more custom css

.single-product div.product .stripe-enabled form.cart .quantity input { width: calc(100% – 20px);}

.entry-summary .single_add_to_cart_button { white-space: nowrap;}

 

Best regards

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

[cheloco]

Hey, Harry!

Thanks, the “Add to Cart” button looks OK now.

Only one more thing before I close the thread, if possible: Do you know why the “Quantity box” looks weird in the old iOS (looks fine on the new one). I include a screenshot.

Thanks again!

Regards

Attachments:

You must be logged in to view attached files.

[Harry]

Could you try add custom css

.single-product div.product form.cart .quantity input { width: calc(100% – 20px);}

I’m not sure with the issue. Because now i don’t have a device run on old iOS 9.3.5

Best regards

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

[cheloco]

Harry wrote:

Could you try add custom css .single-product div.product form.cart .quantity input { width: calc(100% – 20px);} I’m not sure with the issue. Because now i don’t have a device run on old iOS 9.3.5 Best regards

Hi! That didn’t fix it but it isn’t a big deal.

I’m closing the thread.

Thanks for the help!

[Author]

Posts