Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Arch

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

Question

Posted (edited)

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.

Screenshot 2020-06-08 at 15.17.06.png

Edited by Arch

Share this post


Link to post

23 answers to this question

Recommended Posts

  • 0

You can add the following CSS:

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

 

Share this post


Link to post
  • 0

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;
  }
}

 

 

Share this post


Link to post
  • 0

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


 

image.png

Share this post


Link to post
  • 0
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;
}

 

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 0

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

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

 

Share this post


Link to post
  • 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?

image.thumb.png.57a945b133b357008027248136c1d2b9.png

Share this post


Link to post
  • 0
Posted (edited)

@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

Edited by jpeter

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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. 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
Posted (edited)
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!

Edited by Arch

Share this post


Link to post
  • 0

@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!!!

Share this post


Link to post
  • 0
Posted (edited)

@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

image.png.4ee66114aae123653dcc7123a7cd534e.png

Edited by Arch

Share this post


Link to post
  • 0
Posted (edited)
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:

variant-option-screenshot.thumb.png.89a942711f59588c4127e919549ab06a.png

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);

 

Edited by jpeter
Bring back the "TITLE_SUBTEXT" variable

Share this post


Link to post
  • 0
Posted (edited)

@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?

image.thumb.png.06e86006e140c32aad928d72b3e9b18d.png

 

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?

image.thumb.png.459be077974e5b0ed14bfb732b992b74.png

 

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!!

image.thumb.png.044d9ba7cd9910b94d7c3d3dd75b3f1a.png

Edited by Arch

Share this post


Link to post
  • 0
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. 

 

Share this post


Link to post
  • 0

@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?

Share this post


Link to post
  • 0
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. 

 

Share this post


Link to post
  • 0

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

image.thumb.png.5b4c9b5997e023908b84cf39b1b6c887.png

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

image.thumb.png.2d7d5d19686941436c4880c3ca16b423.png

 

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?

Share this post


Link to post
  • 0

@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. 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...