Update Cart and Checkout Buttons invisible unless hovered over with mouse

Technical Q&A
1

Hey Folks, have a problem that seems to have appeared on its own. I don’t believe anyone edited our theme lately, so I’m mystified as to why this problem has occurred. The Shopify website is flightcoffeeco.com.

To reproduce this problem, Click Shop Coffees on the top menu. Choose Coffee Offerings- Single Origin on the next screen, then choose any coffee and add it to your cart. When you go to the cart, you will see the Shop Pay and Paypal buttons on the bottom, but the “Update Cart” and “Checkout” buttons are invisible unless you hover over them with the mouse. You can find them under the "Shipping, taxes, and discounts calculated at checkout" text. Then they appear and can be clicked.

Any suggestions as to how to make these two buttons visible all the time would be greatly appreciated.

2

Hi Flightcoffeeco,

There is an css asset that ovverrides the button styles and causes the mentioned behaviour:

flight-overrides.scss.css

3

Hi Michal, thank you for the information. Unfortunately, we had this website built about six or seven years ago by a developer who we no longer have any contact with. I’m not really up on css, so could you tell me specifically what I need to do to stop this behavior? I assume that I have to

1 Like
4

Sorry. cut myself off.

I assume that I have to edit the flight-overrides.scss.css file, but have no idea what I need to change.

5

Have a look at line 621. These classses are overriding the button behaviour. If you comment them out, the buttons will reappear:

.btn, .btn--secondary {
  letter-spacing: 0;
  padding: auto;
  font-size: auto; }

.btn, .btn--secondary, .rte .btn--secondary, .rte .btn, .rte .btn--secondary {
  padding: 0;
  line-height: 1.9;
  border: 0px solid transparent;
  background-color: transparent;
  transition: none; }

.btn, .btn--secondary, .rte .btn--secondary, .rte .btn, .rte .btn--secondary:hover, .btn:active, .btn--secondary:active, .rte .btn:active, .rte .btn--secondary:active {
  background-color: transparent;
  transition: none; }
6

Hi Michal,

Thank you. I found the reference you mentioned in the .CSS file. I initially tried commenting out all three blocks, but it messed up the rest of the site - Fonts changed and the top menu on the home page disappeared. It did make the Update Cart and Checkout visible, but the problems it caused were worse.

I then attempted to just comment out each of the three blocks one at a time. Each time a block was commented out, the same thing happened - I lost the top menu and the fonts on the homepage changed.

For what it is worth, I do recall making one change to things. We attempted to add the Recharge subscription add-in. It did not work the way we wanted it to, so we got rid of it. I believe that the disappearing button problem appeared after that. I re-installed Recharge but did not add any products to it to see if that would correct the problem and it did not.

7

Hi,

where do I input this code and do i input the entire code ?