weemaple

Thank you so much!!!

I can't figure out how to disable the additional checkout form that I added.  When I go to delete it, it shows the additional checkout form is already disabled.   I try enabling it, just to look for any possible form to edit/delete, but it doesn't show the form I had created a long time ago.  The blank one, I try to delete anyway.  And yet, I still get prompted to choose from the many options  when I add a product to my cart.

I'm desperate to disable these options before I  direct people to buy prints at an art fair, in a day. =(

It looks like it worked! Thank you!

I'm having no luck affecting the button lengths on an index page in Brine.  I'm trying to make them all a uniform length- hopefully a percentage of the screen width, especially as it comes up on a phone (mimicking a link tree).

I've tried to use different kinds of ID blocks, and different button names in the CSS section.  I also tried doing that, bookending with <style></style> via both the index settings and the page/section settings under it.

This is one of the versions I tried using in the CSS section, trying to target the Index page:

#collection-64f128436e6003453dea704b
sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element {
  width:80% !important;
} 

Does anyone know why none of this is affecting the buttons?   (This is at www.demeriflowers.com/hello )

Site URL: http://demeriflowers.com

Can someone help me figure out how to get the second button ("checkout") to align to the left, like the "add-to-cart" button above it?

This is the code I pasted into the Footer, via Advanced>Code Injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".sqs-add-to-cart-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

And this is the corresponding styling I added to the Design>CustomCSS section:

.checkoutbutton {
  display:block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:#000000;
  font-weight: 500;
  font-style: normal;
  line-height: normal;
  opacity:1;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 0px 20px;
  background-color: white;
  border-radius: 3px;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #000000;
  border-width:2px;
  border-style:solid;
  margin-top:10px;} 
.checkoutbutton:hover {color: #fff; background-color: #000000;}

************

I don't know if this other code is interfering, that I'm also using to add buttons to my product description from the "additional information":

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('section.ProductItem-additional .button-block').appendTo('.ProductItem-details .sqs-add-to-cart-button-wrapper');
    });
</script>
 

And in Custom CSS section for those:

/* button design for additional buttons after add-to-cart button on product pages*/
.checkoutbutton {
 font-family:'Julius Sans One'!important;
 font-size: 14px!important;
 color: #000000!important;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 text-decoration: none;
 min-width: 8ch!important;
  max-width: 10ch!important;
 padding: 1.05em 1.3em!important;
 background-color: #ffffff;
 margin: 15px;
 border-style: solid!important;
 border-width: 2px!important;
 border-radius: 3px!important;
}

.checkoutbutton:hover {
 color: #ffffff!important;
 background-color: #000000!important;
 border-style: solid!important;
 border: 2px solid #000000;
}

Thanks Creedon.

I tried your simpler snippet of code in the custom CSS section, and still no luck hiding a product with "nocart" as a tag.

I ended up finding an example of code that both takes away the add-to-card button and adds some button styling to any active link I create in the product details (because I still needed a button to lead to a contact page).

It worked by adding it into a code block in the "additional details" section, which is unfortunate because I think I'm going to forget it's there some day down the line, because the editing mode shows an invisible space where the code block is, until I click on it!  For each product I have to do this for!  =P

<style>
.tweak-product-item-details-show-price .ProductItem-details .product-price { display: none; }
/* .variant-option { display: none!important; } */
.tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper { display: none; }
.ProductItem-details .ProductItem-details-excerpt a { 
 font-family:'khula'!important;
 font-size: 16px!important;
 text-transform: uppercase;
 font-weight:regular!important;
 color: #000000!important;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 text-decoration: none;
 min-width: 10ch!important;
 padding: .5em 1.0em!important;
 background-color: #ffffff;
 margin: 1px;
 border-style: solid!important;
 border-width: 1px!important;
 border-radius: 1px!important;
 }
</style>

Hi, I followed the guide and added this to my custom CSS, but still no luck hiding the "add-to-cart" button for items that have "noCart" as a tag:

.tag-noCart .ProductItem-summary .ProductItem-details {
  .sqs-add-to-cart-button-wrapper, .product-quantity-input {
  display: none;
  }
}

This is for Brine 7.0.  Any ideas why it isn't working?  Thanks!

www.demeriflowers.com