SOLVED: Move the Add to Cart Button above the product descriptions

Site URL: http://www.arch-worldwide.com/shop-all

Hello, 

Is there a way to move the variant and quantity box + Add To Cart button above the product descriptions? I would like to have the size selector and quantity box and add to cart box move to below the price on here so that customers don't have to scroll down for the add to cart button.

You can add the following CSS:

@media screen and (min-width: 768px ) {
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;
  }
}

oh yaaaay it worked thank you so much!!!!

15 hours ago, jpeter said:

You can add the following CSS:

@media screen and (min-width: 768px ) {
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;
  }
}

 

@jpeter Hiya, sorry can I ask is there a way to reduce the spacing between the top of the shop page and the header? 

5 hours ago, Arch said:

@jpeter Hiya, sorry can I ask is there a way to reduce the spacing between the top of the shop page and the header? 

You can add this CSS to align it with the image:
 

media screen and (min-width: 768px)
.tweak-product-basic-item-content-alignment-top .ProductItem-details {
  padding-top: 0;
}

19 hours ago, jpeter said:

You can add this CSS to align it with the image:
 

media screen and (min-width: 768px)
.tweak-product-basic-item-content-alignment-top .ProductItem-details {
  padding-top: 0;
}

 

Oh but is there a way to move the whole page, including the image up towards the header too?

@Arch You could add the following CSS to reduce the top padding of the entire section:

.products.collection-content-wrapper {
  padding-top: 0;
}

On 6/8/2020 at 7:49 PM, jpeter said:

You can add the following CSS:

@media screen and (min-width: 768px ) {
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;
  }
}

 

@jpeter Sorry to bother you again, is it possible to put text in between the Add to Cart button and the variant selector? Or add a secondary title under the product title as shown below?

@Arch You could add the following JavaScript and CSS code below. Just update the variables, BUTTON_PRETEXT_HTML and TITLE_SUBTEXT_HTML, values in the JavaScript code. The BUTTON_PRETEXT_HTML  will add the text before the "Add To Cart" button with a class of sqs-add-to-cart-button-pretext. The TITLE_SUBTEXT_HTML will add the text after the title with a class .ProductItem-details-title. You can then use CSS to style. 

CSS:

.ProductItem-details-title-subtext {
  order: 2;
}

.ProductItem-details-title-subtext p {
  margin-top: 0;
  margin-bottom: 2rem;
}

.sqs-add-to-cart-button-pretext p {
  margin-bottom: 2rem;
}

JavaScript:

(function(document){

  // Edit HTML between the quotes.
  var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>';
  var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>';


  /****************************************************************
   * DO NOT MODIFY CODE BELOW, unless you know what you're doing.
   ****************************************************************/
  // Execute code based on if it's in the header or footer
  if(document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  function init(){
    var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper');
    var productTitle = document.querySelector('.ProductItem-details-title');
    var div;

    if(productTitle) {
      div = document.createElement('div');
      div.setAttribute('class', 'ProductItem-details-title-subtext');
      div.innerHTML = TITLE_SUBTEXT_HTML;
      productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling);
    }

    if(buttonContainer) {
      div = document.createElement('div');
      div.setAttribute('class', 'sqs-add-to-cart-button-pretext');
      div.innerHTML = BUTTON_PRETEXT_HTML;
      buttonContainer.insertBefore(div, buttonContainer.firstChild);
    }
  }
})(document);

Make sure you add the code between <script> tags, example:

<script>
  // Add JS code
</script>

See article on how to add JavaScript https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

omgggg woooow!!!! So just to clarify, if I want to change the Title subtext for each product, how would I inject this? Do I inject into the settings or the page header injection section? And how would it change for each product?

On 6/13/2020 at 5:33 AM, jpeter said:

@Arch You could add the following JavaScript and CSS code below. Just update the variables, BUTTON_PRETEXT_HTML and TITLE_SUBTEXT_HTML, values in the JavaScript code. The BUTTON_PRETEXT_HTML  will add the text before the "Add To Cart" button with a class of sqs-add-to-cart-button-pretext. The TITLE_SUBTEXT_HTML will add the text after the title with a class .ProductItem-details-title. You can then use CSS to style. 

CSS:

.ProductItem-details-title-subtext {
  order: 2;
}

.ProductItem-details-title-subtext p {
  margin-top: 0;
  margin-bottom: 2rem;
}

.sqs-add-to-cart-button-pretext p {
  margin-bottom: 2rem;
}

JavaScript:

(function(document){

  // Edit HTML between the quotes.
  var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>';
  var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>';


  /****************************************************************
   * DO NOT MODIFY CODE BELOW, unless you know what you're doing.
   ****************************************************************/
  // Execute code based on if it's in the header or footer
  if(document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  function init(){
    var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper');
    var productTitle = document.querySelector('.ProductItem-details-title');
    var div;

    if(productTitle) {
      div = document.createElement('div');
      div.setAttribute('class', 'ProductItem-details-title-subtext');
      div.innerHTML = TITLE_SUBTEXT_HTML;
      productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling);
    }

    if(buttonContainer) {
      div = document.createElement('div');
      div.setAttribute('class', 'sqs-add-to-cart-button-pretext');
      div.innerHTML = BUTTON_PRETEXT_HTML;
      buttonContainer.insertBefore(div, buttonContainer.firstChild);
    }
  }
})(document);

Make sure you add the code between <script> tags, example:

<script>
  // Add JS code
</script>

See article on how to add JavaScript https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

@Arch you'll want to add that code above fo Settings -> Advanced -> Code Injection -> Footer

I could be wrong but I don't believe you'll be able to individually customize the Title subtext for each product without further customization. This code would be applying the same changes across all products. 

8 minutes ago, ryandejaegher said:

@Arch you'll want to add that code above fo Settings -> Advanced -> Code Injection -> Footer

I could be wrong but I don't believe you'll be able to individually customize the Title subtext for each product without further customization. This code would be applying the same changes across all products. 

Ahh got it, thanks so much!!! I can still use the add to cart pretext though, I tried to add the javascript in without the var title subtext line but now the button pretext isn't showing up too, do you know why? thanks so much!!!!! you're a star!

Hey @Arch looking at the site I can see the button pre text It's sitting above the button

 

@ryandejaegher yes I managed to do it by removing "Rumba red" from 

var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>';

but if I remove the whole line, the whole thing doesn't work haha which is weird. anyhow i managed to get round it by leaving it in without the Rumba red. Thank you!!!

@Arch Instead of placing the JS code in the footer,  you should be able to update each product by adding the JS code as a code block under the Additional Info tab for each product, see video example:

@jpeter OMG THIS WORKS A DREAM!!

@ryandejaegher YOU GUYS ARE AMAZING AND HAVE MADE SOMETHING I THOUGHT IMPOSSIBLE POSSIBLE, THANK YOU SO MUCH, PLEASE LET ME KNOW HOW I CAN THANK YOU GUYSSSS!!

Do you think it will be possible to add this additional info into the checkout cart like below or is that too much? XD

@jpeter might have an idea but i'm not seeing any ability to pull in the color info to the cart

On 6/15/2020 at 9:21 AM, Arch said:

Do you think it will be possible to add this additional info into the checkout cart like below or is that too much? XD

@Arch If you want to add the color to the checkout, you should do the following:

1. Create a new variant called Color and give all the options the same color, see screenshot:

2. Use the follow JS code below. This will:

• automatically choose the color option as the value for the user 
• hide the new select list created by new variant option
• dynamically add the color below the title (no need to add update the color in the JS code as before)
• for products with only 1 variant, fill in the empty string value of the TITLE_SUBTEXT_HTML variable  

Doing it this way should show the color on at the checkout.

(function(document){
  
  // Edit HTML between the quotes.
  var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>';
  
  // Fill in the empty string below with HTML for items that only have one variant.
  // e.g. var TITLE_SUBTEXT_HTML = '<p>White</p>';
  var TITLE_SUBTEXT_HTML = '';

  /****************************************************************
   * DO NOT MODIFY CODE BELOW, unless you know what you're doing.
   ****************************************************************/
  // Execute code based on if it's in the header or footer
  if(document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  function init(){
    addClosestPolyfill();

    var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper');
    var productTitle = document.querySelector('.ProductItem-details-title');
    var colorSelectField = document.querySelector('[data-variant-option-name="Color"]');
    var div, color;

    if((TITLE_SUBTEXT_HTML || colorSelectField) && productTitle) {

      if(colorSelectField){
        // Auto select the color as the default value for the Color field
        color = colorSelectField.options[1].value;
        colorSelectField.value = color;
        triggerChange(colorSelectField);

        // Hide the Color field from the user.
        colorSelectField.closest('.variant-option').style.display = 'none';
      }

      // Create div to add our HTML to and add it after the title
      div = document.createElement('div');
      div.setAttribute('class', 'ProductItem-details-title-subtext');
      div.innerHTML = TITLE_SUBTEXT_HTML || '<p>' + color + '</p>';
      productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling);
    }

    if(buttonContainer) {
      div = document.createElement('div');
      div.setAttribute('class', 'sqs-add-to-cart-button-pretext');
      div.innerHTML = BUTTON_PRETEXT_HTML;
      buttonContainer.insertBefore(div, buttonContainer.firstChild);
    }
  }

  function triggerChange(el) {
    if (typeof(Event) === 'function') {
      // modern browsers
      el.dispatchEvent(new Event('change'));
    } else {
      // for IE and other old browsers
      // causes deprecation warning on modern browsers
      var evt = window.document.createEvent('UIEvents'); 
      evt.initUIEvent('change', true, false, window, 0); 
      el.dispatchEvent(evt);
    }
  }

  function addClosestPolyfill(){
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                  Element.prototype.webkitMatchesSelector;
    }
    
    if (!Element.prototype.closest) {
      Element.prototype.closest = function(s) {
        var el = this;
    
        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }
})(document);

@jpeter omg woooow it works!!! However, I'm still seeing the colour block on the product page, is there a way to hide it further?

Also, the colour option is still available on the quick view which also doesn't show the variant colour. Could we hide the colour option and include the colour under the title in Quick View too?

The colour also doesn't seem to show up for items that only have one variant, it does show up in the shopping cart though!!

6 hours ago, Arch said:

@jpeter omg woooow it works!!! However, I'm still seeing the colour block on the product page, is there a way to hide it further?

Also, the colour option is still available on the quick view which also doesn't show the variant colour. Could we hide the colour option and include the colour under the title in Quick View too?

The colour also doesn't seem to show up for items that only have one variant, it does show up in the shopping cart though!!

@Arch Updated the code above to hide the Color option and include the TITLE_SUBTEXT_HTML variable as an empty string value which can be filled in for products that only have 1 variant. 

@jpeter Awesome it hides the colour option! But when I fill in the variable, it will appear the same on all the products that only have 1 variant right?

1 hour ago, Arch said:

@jpeter Awesome it hides the colour option! But when I fill in the variable, it will appear the same on all the products that only have 1 variant right?

@Arch  Not sure what you mean by "it will appear the same on all the products", so you should only need to fill in TITLE_SUBTEXT_HTML for 

the products that have 1 variant because it looks like Squarespace doesn't add a select field in those instances. Otherwise, it'll use the value from the Color select field if there is one. 

@jpeter For example, when I put in "white", all products with only 1 variant show White, including ones that are not white:

It has also made all my other products that do have more than 1 variant show White too:

I now also need to add a different size chart to each product, so would it be better for me to inject the code into the product additional information again?

@Arch yeah you'll need to paste the code into each products Additional Information tab, not via Code Injection in the header or footer, and change the variables accordingly.