Is there a way to use code injections to place the 'Add to Cart' (Purchase) button above the description in a Product Block?

Site URL: https://www.skipthesmalltalk.com/

I would like to have Product Block that display the Add to Cart button first and then the description. I have figured out a work-around to format it the way I want (like on this page):

https://www.skipthesmalltalk.com/calendar/skipthesmalltalk-online-march-30-2022

Notice that it's Picture, Title, Quantity and Purchase Button, then the description.

But it requires me to insert a Product block w/o the description but with the Add to Cart button. Then I just have to duplicate the description from the Product page in the Event description. This is usable, but very annoy every time I upload a new event or have to change anything in the description.

Is there any way to use code-injections to place the Add to Cart button above the description in code blocks?

This is a very similar question to the one here, except I'm looking for the button to have for Product blocks, not on the Product detail page:

CSS part

.collection-61e099987ace46450652198f{
  .ProductItem-summary{
    display: flex !important;
    flex-wrap: wrap;
    .ProductItem-details, .ProductItem-gallery{
      flex: 0 0 100%;
    }
    .ProductItem-gallery{
      order: 1 !important;
    }
    .ProductItem-details--mobile{
      order: 1 !important;
    }
    .ProductItem-details:last-child{
      order: 1 !important;
      padding-top: 40px;
      .ProductItem-details-title{
        order: 1 !important;
      }
      .product-price{
        order: 2 !important;
      }
      .ProductItem-details-excerpt{
        order: 5 !important;
      }
      .product-quantity-input{
        order: 3 !important;
      }
      .sqs-add-to-cart-button-wrapper{
        order: 4 !important;
      }
      .ProductItem-details-share{
        order: 6 !important;
      }
    }
  }
}

Thanks so much for the answer! But I have a couple of follow up questions if that okay?

Where does this code get put into? I tried putting into the Shop -> Settings -> Advanced -> Code Injection, but that doesn't seem to work. Is this CSS something that needs to be put in on Developer mode?

I'm also not sure if I explained my issue correctly: I already have the Merch Page and the View All Event Page (Store) set up to have the Purchase button appear above the description. But also I need the purchase button to appear above the description in a Product Block -- for example when linking a Product to an Event (and you include the "Description" and "Add to Cart Button") like on this page (note that the purchase button is all the way at the bottom of the description for this page):

https://www.skipthesmalltalk.com/calendar/skip-the-small-talk-at-trident-books-wednesday-march-23-2022

Perhaps I misunderstood your post but it seems like the CSS is for the button on the Product page instead of for when you link a Product Block to an Event?

Anyway, I really appreciate you taking a crack at this!

On 3/30/2022 at 6:22 AM, dzak said:

Thanks so much for the answer! But I have a couple of follow up questions if that okay?

Where does this code get put into? I tried putting into the Shop -> Settings -> Advanced -> Code Injection, but that doesn't seem to work. Is this CSS something that needs to be put in on Developer mode?

I'm also not sure if I explained my issue correctly: I already have the Merch Page and the View All Event Page (Store) set up to have the Purchase button appear above the description. But also I need the purchase button to appear above the description in a Product Block -- for example when linking a Product to an Event (and you include the "Description" and "Add to Cart Button") like on this page (note that the purchase button is all the way at the bottom of the description for this page):

https://www.skipthesmalltalk.com/calendar/skip-the-small-talk-at-trident-books-wednesday-march-23-2022

Perhaps I misunderstood your post but it seems like the CSS is for the button on the Product page instead of for when you link a Product Block to an Event?

Anyway, I really appreciate you taking a crack at this!

Above code is Custom CSS. You need to add it to Home > Design > Custom CSS

SOLVED!

Thanks so much to @tuanphan and @Web_Solutions for their answers! I'll include the solution below in case it can be helpful to anyone else.

I wanted to edit the Product Blocks, so I was able to copy Web_Solutions's code found the relevant CSS parts to edit using his code and my browser's Inspect Elements functionality (basically the same code but with for the .product-block CSS element).

Below is the code which I put into Home > Design > Custom CSS:

.product-block .productDetails{
  display: flex!important;
  flex-wrap: wrap;
  flex-direction: column!important;
  .product-title{
    order: 1!important;
  }
  .product-price{
    order: 2!important;
  }
  .product-variants{
    order: 3!important;
  }
  .product-quantity-input{
    order: 4!important;
  }
  .sqs-add-to-cart-button-wrapper{
    order: 5!important;
  }
  .product-excerpt{
    order: 6!important;
  }
}

yes

hi there, 

think I wanted to achieve the same change and moving up the «add to cart» straight below the price-field on my product sites. 

changed your custom-CSS Snippet above and inserted it to the custom CSS section. 

unfortunately it doesn't work. Any idea why? Sauqarespace version of miy website oder something else?

example: https://www.mahlersilvan.ch/prints/p/grindelwald-fineart-print-1

Thanks for any advise! 🙂

.product-block .productDetails{
  display: flex!important;
  flex-wrap: wrap;
  flex-direction: column!important;
  .product-title{
    order: 1!important;
  }
  .product-price{
    order: 2!important;
  }
  .sqs-add-to-cart-button-wrapper{
    order: 3!important;
  }
  .product-variants{
    order: 4!important;
  }
  .product-quantity-input{
    order: 5!important;
  }
  .product-excerpt{
    order: 6!important;
  }
}

25 minutes ago, mahlersilvan said:

unfortunately it doesn't work. Any idea why? Sauqarespace version of miy website oder something else?

The code you posted is for v7.0 and specific templates. Your site is v7.1.

Try the following.

.ProductItem-details .ProductItem-details-checkout {

  display : flex;
  
  }

.ProductItem-details .sqs-add-to-cart-button-wrapper {

  order : 1;
  
  }

Let us know how it goes.

thanks @creedon

didn't realise, that the classnames has changed... inspected and managed to change the order using your snippet - thanks a lot, it works fine like this!

.ProductItem-details .ProductItem-details-checkout {

  display : flex;
  
  }

.ProductItem-details .ProductItem-details-excerpt {

  order : 0;
  
  }

.ProductItem-details .sqs-add-to-cart-button-wrapper {

  order : 1;
  
  }

On 4/9/2022 at 6:05 PM, creedon said:

The code you posted is for v7.0 and specific templates. Your site is v7.1.

Try the following.

.ProductItem-details .ProductItem-details-checkout {

  display : flex;
  
  }

.ProductItem-details .sqs-add-to-cart-button-wrapper {

  order : 1;
  
  }

Let us know how it goes.

Hi again,

Posting again because I don't think I gave sufficient detail last time.

I'd like to move the size, quantity buttons to under the price on product detail pages.  SS v7.0 , Flores template.

https://www.rebelrebel.co.uk/bouquets-online/gimme-gimme-gimme for example.

Any help would be very much appreciated.

thanks

12 hours ago, Nikitaly said:

I'd like to move the size, quantity buttons to under the price on product detail pages.  SS v7.0 , Flores template.

Please see the following.

Set the CSS variables in the code thusly.

      --add-to-cart-button : 3;
      --description : 3;
      --price : 1;
      --quantity : 2;
      --review-summary : 1;
      --share : 3;
      --title : 1;
      --variants : 2;

Let us know how it goes.