Jump to content

Add to Cart Summary Block

Recommended Posts

Site URL: https://www.huntandgathergrocer.com.au/

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
    padding-top:30px AUTO;
  }
  .summary-content {
    position:TOP;
  }
  .summary-title .summary-title-link:after {
    content: '    add to cart';
    background-color: #FDEEF4;
    border-radius: 1px;
    display: block;
    padding: 10px 10px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    background-color: normal;
    border-color: normal;
    position: AUTO;
    bottom: -10
  }
 

how do i make this button shorter and not take up the length of the screen / page? 

Also how would i center it under the price of the product ? instead of between the heading and the price please see url 

also if any one could help me understand as to why my page is loading off center on mobile phone that would be amazing? 

I am stumped as to why i've changed my boarder so many times and my mobile break point and this isn't working

Link to comment
  • Susana_SQSP changed the title to Add to Cart Summary Block
  • Replies 3
  • Views 782
  • Created
  • Last Reply

Hi. Use this code

.summary-title .summary-title-link:before {
    content: ' add to cart';
    background-color: #fdeef4;
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    width: 100px;
    margin: 20px auto;
}

image.thumb.png.343f9a2f899f178d4f82b54c31304a3c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/14/2021 at 6:39 PM, tuanphan said:

Hi. Use this code


.summary-title .summary-title-link:before {
    content: ' add to cart';
    background-color: #fdeef4;
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    width: 100px;
    margin: 20px auto;
}

image.thumb.png.343f9a2f899f178d4f82b54c31304a3c.png

Thank you, however now on my product categories shop 

Mesh market bags (example ) 

The buttons are long? Is it possible to make them the same sitewide

As you did with code above on summary on home page. 

 

 

Screenshot_20210516-204027_Instagram.jpg

Screenshot_20210516-204020_Instagram.jpg

Link to comment
On 5/14/2021 at 6:39 PM, tuanphan said:

Hi. Use this code


.summary-title .summary-title-link:before {
    content: ' add to cart';
    background-color: #fdeef4;
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    width: 100px;
    margin: 20px auto;
}

image.thumb.png.343f9a2f899f178d4f82b54c31304a3c.png

<style>
  .ProductList-grid .ProductList-item {
    padding-bottom: 50px;
  }
  .ProductList-grid .ProductList-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: 20 auto;
    padding-right: 5px;
    padding-left: 5px;
  }
  .ProductList-grid .ProductList-item .ProductList-overlay {
   margin-bottom: 70px; 
  }
</style>

<script>
  $(".ProductList-grid .ProductList-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".ProductList-grid .ProductList-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>
 

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.