Jump to content

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

Recommended Posts

  • Replies 23
  • Views 5.4k
  • Created
  • Last Reply
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;
}

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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?

Link to comment
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

Link to comment

@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

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

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

Link to comment

@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

👉 Squarespace Tutorials 

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

 

Link to comment
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!

Link to comment
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);

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

@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

Link to comment
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. 

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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. 

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.