Sticky add to cart button on mobiles

With Goya there’s an option to show a sticky product bar but it’s disabled form mobiles. However, it’s possible to adjust that.

In the goya-child/style.css add this code:

/* Sticky add to cart on mobiles */
@media screen and (max-width: 991px) {
  .site-content .sticky-product-bar .sticky-product-bar-title,
  .site-content .sticky-product-bar .sticky-product-bar-image {
    display: none;
  }
  .site-content .sticky-product-bar .quantity {
    min-width: 92px;
  }
  .site-content .sticky-product-bar .quantity .minus,
  .site-content .sticky-product-bar .quantity .plus {
    display: flex;
  }
  .site-content .sticky-product-bar .quantity {
    height: auto;
  }
}
@media screen and (max-width: 575px) {
  .site-content .sticky-product-bar {
    display: flex !important;
    top: auto !important;
    bottom: 0 !important;
    opacity: 1;
    position: fixed;
    visibility: visible;
  }
}
Code language: CSS (css)

The regular add to cart button will remain visible on variable products and the sticky bar will display a button with the text “Select Options”

For single products it will show only the sticky add to cart button.

Leave a Reply

Your email address will not be published. Required fields are marked *