Your account expired support, please renew to get your support.

Home Forums Themes Support Claue Add to cart button out of place in Mobile

This topic contains 20 replies, has 2 voices, and was last updated by  Harry 3 months, 4 weeks ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #32969
    KC
    Support 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…

     

    Misplace Add to cart button in mobile

     

    it should appear like this

    reference from claue

     

    how to make my add to cart next to heart icon

     

     

    Many Thanks…

     

     

    #32970

    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

    #32995
    KC
    Support 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.
    #33025

    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

    #33073
    KC
    Support 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

     

     

     

     

     

     

    #33097

    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

    #33107
    KC
    Support Expired
    This reply has been marked as private.
    #33111

    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

    #33112
    KC
    Support 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

     

     

    #33116

    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

    #33117
    KC
    Support Expired

    Hi Harry,

     

    As you mentioned above that

    I fixed issue on your site.

     

    its the same and the …

    Custom CSS Style box is empty…

    there was a code their asides from the code you sent me after we fixed.

     

    thanks

     

    #33118
    KC
    Support 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

    #33120
    KC
    Support Expired

    Hello Harry,

     

    I just removed all the code… but here

     

    #33121
    KC
    Support Expired

     

     

     

    Hopefully,Viewing single products / items

    we do like this… during Viewing single products/items πŸ™‚

     

    And Cart View

     

    πŸ™‚

    KC

     

     

    #33124
    KC
    Support Expired

    Hi Harry,

    This is how it looks like as of now…Β  for iOS Safari and Google Chrome (iPhone X view)

    iOS Safari with Buy with Apple Pay
    <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 browseriOS / 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

     

     

     

     

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.