Support » Plugin: Storefront Sticky Add to Cart » Not really mobile friendly

  • Hi,

    Using the plugin in conjunction with Storefront with Homestore as a child theme.

    On the desktop side of things, all is fine, but when using on a mobile (like iPhone 6) the sticky bar takes up way too much screen space and making the website borderline unusable.

    Other than modifiying the core files (storefront-sticky-add-to-cart.php, line 293 and up), do you recommend an alternative if we want to change the layout?

    Can we have it disabled just for mobile platforms?

    Thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • Definitely a problem. I just fixed it by hacking the plugin’s stylesheet.

    In the plugins/storefront-sticky-add-to-cart/assets/css folder, open the style.css file.

    Above the line that begins

    .ssatc-sticky-add-to-cart {

    Add

    @media screen and (min-width: 768px) {

    Down around line 72, comment out the line that reads

    @media screen and (min-width: 768px) {

    My final code looks like this:

    @keyframes slideInDown {
      from {
        transform: translate3d(0, -100%, 0);
        visibility: visible; }
      to {
        transform: translate3d(0, 0, 0); } }
    .slideInDown {
      animation-name: slideInDown; }
    
    @keyframes slideOutUp {
      from {
        transform: translate3d(0, 0, 0); }
      to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0); } }
    .slideOutUp {
      animation-name: slideOutUp; }
    
    .animated {
      animation-duration: .5s;
      animation-fill-mode: both; }
    
    .animated.infinite {
      animation-iteration-count: infinite; }
    
    @media screen and (min-width: 768px) {
    /* put here by LDY*/
    
    .ssatc-sticky-add-to-cart {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999999;
      transform: translate3d(0, -100%, 0);
      padding: 1.618em;
      overflow: hidden;
      zoom: 1;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
      .ssatc-sticky-add-to-cart img {
        max-height: 3.631em;
        width: auto;
        float: left;
        margin: 0 2em 0 0;
        padding: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1); }
      .ssatc-sticky-add-to-cart .ssatc-content {
        position: relative;
        line-height: 1.387; }
      .ssatc-sticky-add-to-cart .star-rating {
        display: inline-block;
        font-size: .75em;
        margin-right: 1em;
        -webkit-transform: translateY(1px);
        -moz-transform: translateY(1px);
        -ms-transform: translateY(1px);
        -o-transform: translateY(1px);
        transform: translateY(1px); }
      .ssatc-sticky-add-to-cart .price,
      .ssatc-sticky-add-to-cart .stock {
        font-size: .857em;
        opacity: 0.5; }
      .ssatc-sticky-add-to-cart .button.variable:after {
        content: "\f106";
        font-family: "FontAwesome";
        margin-left: .53em; }
      .ssatc-sticky-add-to-cart .price {
        margin-right: 1em; }
    
    /* @media screen and (min-width: 768px) { */
    
      .ssatc-sticky-add-to-cart .button {
        position: absolute;
        top: 0;
        right: 0; } }
    
    @media screen and (max-width: 767px) { */
      .ssatc-sticky-add-to-cart {
    	  display:none
      }}
    
    Thread Starter Guillaume Hamel

    (@guimos)

    Great fix. For now I had a more “sketchy” fix by putting a display:none with a media query that covered everyting up to 768px.

    This fix of your is more efficient.

    Hey guys,

    I just stumbled across the same problem. I logged it (https://github.com/woocommerce/storefront-sticky-add-to-cart/issues/10) and sent in a patch. Hopefully the devs accept it and make it more usable on mobile. 🙂

    Can this be made as an option instead? Or how can I reverse this update?

    Most of my customers are on current generation Iphones (6 and above) and Galaxy (S6 and above), and there’s plenty of screen real estate for these people to have the sticky bar. My mobile conversion rate have dropped since this update 🙁

    Disabling this all together for mobile is not a good fit-all solution.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Not really mobile friendly’ is closed to new replies.