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

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

Viewing 19 reply threads
  • 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
      Harry
      Support 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

    • #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
      Harry
      Support 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

    • #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
      Harry
      Support 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

    • #33107
      KC
      Support Expired
      This reply has been marked as private.
    • #33111
      Harry
      Support 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

    • #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

       

       

      • #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

         

    • #33116
      Harry
      Support 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

    • #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

       

       

       

       

    • #33128
      Harry
      Support 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

    • #33138
      KC
      Support 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

    • #33139
      KC
      Support 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

       

    • #33140
      Harry
      Support 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

    • #33141
      KC
      Support 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…

       

       

       

    • #33142
      Harry
      Support 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

Viewing 19 reply threads

You must be logged in to reply to this topic.