Home › Forums › Themes Support › Claue › Add to cart button out of place in Mobile
- This topic has 20 replies, 2 voices, and was last updated 4 years, 8 months ago by Harry.
-
AuthorPosts
-
-
August 7, 2019 at 12:20 am #32969KCSupport Expired
Hello Support…
After all, everything works fine… However, I have noticed recently thatΒ Add to Cart button is misplaced in the mobile version…
Trying to figure it out but here…
it should appear like this
how to make my add to cart next to heart icon
Many Thanks…
-
August 7, 2019 at 7:04 am #32970HarrySupport Expired
Hi,
Please add below code to Claue > Theme Option > General Layout > Custom CSS
@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 800px) { .product #wc-stripe-payment-request-button-separator~.single_add_to_cart_button { width: calc(100% - 165px); } .stripe-enabled .cart .yith-wcwl-add-to-wishlist { margin-top: 0; } }
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 8, 2019 at 12:19 am #32995KCSupport Expired
Hi Harry…
Thank you for your reply to my concern… I follow exactly as you mentioned, somehow it changes the cart button width but still the Add to cart misplace as I show u above photo…
or here mobile browser
The desktop is normal ever since
regards,
KC
Attachments:
You must be logged in to view attached files. -
August 8, 2019 at 11:49 pm #33025HarrySupport Expired
Hi,
Please change prev code to
@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 767px) { .product #wc-stripe-payment-request-button-separator~.single_add_to_cart_button { width: calc(100% - 185px); margin-top: 0; } .stripe-enabled .cart .yith-wcwl-add-to-wishlist { margin-top: 0; top: 0; } .product .stripe-enabled #wc-stripe-payment-request-wrapper {display: none} }
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 12, 2019 at 1:00 am #33073KCSupport Expired
Hello Harry,
Its me KC once again…
anyways the code you sent me was fine and it solved…
here…
So Happpy!!!
the ADD TO CART button now in the proper place… π
sorry to bother u too much… but my APPLE Pay GONE in Safari! π
when the code is used..
but when the code is not here…
when I use the code the ADD TO CART is fine but APPLE Pay gone! π
Also… how can I add IG button to (only FB, Twitter, Pinterest and tumbler(don’t need this))
Thanks once again…
KC
-
August 12, 2019 at 6:39 pm #33097HarrySupport Expired
Hi,
Could you send me login credentials and check in “Set as private reply” We need to check more before give you solution.
Thanks
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 12, 2019 at 9:27 pm #33107KCSupport ExpiredThis reply has been marked as private.
-
August 12, 2019 at 11:07 pm #33111HarrySupport Expired
Hi,
I fixed issue on your site.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 12, 2019 at 11:09 pm #33112KCSupport Expired
Hi Harry,
Also, there is a thin line on the check visiting the cart below there is a thin line (Apple pay) or Proceed to checkout…
thanks..
KC
-
August 13, 2019 at 12:02 am #33116HarrySupport Expired
Hi KC,
Please add below code to Claue > Theme Option > General Layout > Custom CSS
.wc-proceed-to-checkout #wc-stripe-payment-request-wrapper { float: none; }
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 13, 2019 at 1:08 am #33118KCSupport Expired
Hello Harry,
I just combined the 2 code you sent me from the beginning (the second code for ADD To Cart) to reposition but Apple Pay not showing…
I think this is fine for me… As long as during after add to cart and View Cart…
Buy with Apple Pay now properly show ….
Here now Showing
What do you think… This is fine … Neat and Nice!
π
KC
-
August 13, 2019 at 1:31 am #33120KCSupport Expired
Hello Harry,
I just removed all the code… but here
-
August 13, 2019 at 1:41 am #33121KCSupport Expired
Hopefully,
we do like this… during Viewing single products/items π
And Cart View
π
KC
-
August 13, 2019 at 6:01 am #33124KCSupport Expired
Hi Harry,
This is how it looks like as of now…Β for iOS Safari and Google Chrome (iPhone X view)
<p style=”text-align: center;”>iOS Safari with Buy with Apple Pay</p>
<p style=”text-align: center;”>iOS / Mobile Chrome browser unsupported Apple Pay browser</p>
<p style=”text-align: center;”>iOS Safari iPad view without Apple Pay</p>
It’s fine if we cant achieved as I mentioned above previous Replied/comment #33121…
Maybe we can revert the way it was how we solve the misplaced ADD TO CART button… This is ok
This is fine all across mobile browser without compromising the appearance of our theme…
in addition, since you gave me an additional code for the solution view to cart Apple pay now showing well…
these are fine…. π if we cant achieve this showing below…
Many thanks…
π
KC
-
August 13, 2019 at 7:48 am #33128HarrySupport Expired
Hi,
Please remove all customize code and just add
.wc-proceed-to-checkout #wc-stripe-payment-request-wrapper { float: none; }
It now only support the layout like this http://support.janstudio.net/wp-content/uploads/hm_bbpui/33124/fig6st6tmxn7uekklmhs3gk68mty5sxb.jpg
We try but can’t do like this http://support.janstudio.net/wp-content/uploads/hm_bbpui/33121/68plgyp68ia4f0b0cgpr2h401wyesinp.jpg because the code generate Apple Pay button control by plugin Stripe.
By the way, your support expired. Could you please renew your support at https://themeforest.net/item/claue-clean-minimal-woocommerce-theme/18929281 that will help us continue develop new features and improve our theme.
Thank and regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 13, 2019 at 1:52 pm #33138KCSupport Expired
Hi Harry,
Its fine… I removed all the code as u mentioned only
.wc-proceed-to-checkout #wc-stripe-payment-request-wrapper { float: none; }
However if its not possible make as this
Can we revert to this the way it was using your first code instead… it’s fine as long it won’t compromise the theme layout…
Kindly revert the way it was like the photo above… this is fine even apple buy button not showing as long as it won’t compromise the layout…
π
I am within this weekend …
KC
-
August 13, 2019 at 3:04 pm #33139KCSupport Expired
Hello Harry,
Anyways after upon reviewing for the new ADD to Cart button and with the apple pay button (I changed to dark color from outline)
π
here comparing side to side…
1- iOS Safari Apple pay supported device…
2 – Mobile Browser non-Apple pay unsupported device/browser…Β
However, it’s fine either way as long as it works properly… about the renewal I surely do since I have several small issues for web theme I haven’t focused more on the design of the theme since I started this as more on the server side and development…
Likewise, if not possible to revert from the said as how we sortΒ / align the add to cart button(fixed)…
I am still convincing myself to revert it from what IΒ said above post or I’ll keep it this now as new look…
Many thanks Harry..,
π
KC
-
August 13, 2019 at 6:38 pm #33140HarrySupport Expired
Hi KC,
I revert to original it will break like we have before, so we have change to new look to keep it display better for all.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 13, 2019 at 7:27 pm #33141KCSupport Expired
Hi Harry,
Soooo Thankful….Β the above button as I posted above somehow is perfectly fine… lolz I understand you having headache on me,,, π or about the Apple Pay button…
-
August 13, 2019 at 7:42 pm #33142HarrySupport Expired
Lol, I don’t have headache with you only Apple Pay button.
Have a great day!
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
-
-
AuthorPosts
You must be logged in to reply to this topic.