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

Add to Cart Summary Block


Question

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

3 answers to this question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Create an account or sign in to comment

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

×
×
  • Create New...