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

Moving 'add to cart' button


Gilbert

Question

Recommended Posts

  • 0
14 hours ago, creedon said:

@francesca_

Please see Store Product Details Reorder Desktop.

Then set the CSS variables thusly.

        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;

Folks this is a more generalized solution to moving these elements around than the others.

Let us know how it goes.

Hello @creedon, thank you for your reply!

I am a beginner, so I have tried to fix this, but I cannot get it to work.

I have copied the code from https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Display Flex Desktop/store product details display flex desktop.html#L1

and https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Natural Order Desktop/store product details natural order desktop.html#L1

into the Page Header Code Injection in my shop. Do I just copy and paste them one after the other in this location?

Where do I place the CSS variables you list? I have tried added them before and after in the Page Header Code Injection, but it's not working. 

My site: https://francescaelisia.com/shop/p/landscape-v-art-print

Note: I need very specific instructions. Thank you for your help.

Link to comment
  • 0
On 10/8/2021 at 10:54 PM, francesca_ said:

Hello @creedon, thank you for your reply!

I am a beginner, so I have tried to fix this, but I cannot get it to work.

I have copied the code from https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Display Flex Desktop/store product details display flex desktop.html#L1

and https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Natural Order Desktop/store product details natural order desktop.html#L1

into the Page Header Code Injection in my shop. Do I just copy and paste them one after the other in this location?

Where do I place the CSS variables you list? I have tried added them before and after in the Page Header Code Injection, but it's not working. 

My site: https://francescaelisia.com/shop/p/landscape-v-art-print

Note: I need very specific instructions. Thank you for your help.

Have you solved it yet?

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 10/10/2021 at 8:00 PM, creedon said:

We solved it via DM.

Hello Creedon,
First I would like to thank you for taking the time to answer to all of us! It is very nice of you.

I have a problem with my shop product page. I would like to re-arrange the order of my page like this order:
1. Product name, 2. Price, 3. Size selection, 4. Quantity field, 5. Add to cart, 6. Description

This is the same from another person in a previous question, but I would like to keep the "quantity" and the "size selection (in french: taille)" on the same line. I tried everything for 4-5 hours, and I could not find a way.

Also I would love if the box "add to product" (fr: Ajouter au panier) could be longer and take all the space of the line.

Here is my website : https://www.brondyhumphrey.com/shop/p/voyage-etre-poster

My password: soleil 

I would really appreciate if you could help me,
Have a beautiful day.

H.

Link to comment
  • 0
21 hours ago, creedon said:

@iJizzy1

Are you thinking something like the following?

Hello Creedon,

Thank for your fast answer, this is exactly what I am trying to do! Would it be possible to get the code? (Also, I remove the quantity button which I do not need.)

I am currently trying to replicate the same mobile product design from this website : https://store.henriprestes.com/collections/frontpage/products/a-warm-winter?variant=38029900939417

IMAGE2.thumb.jpg.939a31569cb26c6076cf9c4b703c4915.jpg

 

I do not know if it is possible because the website has been created with shopify (I think) but maybe you could enlighten me on this subject?

And If I may ask another question, do you think it is possible to create an accordion in the product description of my shop?
Like this example of a website:



1960139760_Sanstitre.thumb.jpg.3c7e60f451448fc13413e226ccd94782.jpg

Thank you again for your help, I really appreciate it.

 

Edited by iJizzy1
Wrong question asked
Link to comment
  • 0
4 hours ago, iJizzy1 said:

this is exactly what I am trying to do! Would it be possible to get the code?

This is a little bit involved because we are building code up in layers.

Install the code from Store Product Details Natural Order Desktop.
  
Install the code from Store Product Detail One Left Class Add.
  
Install the code from Store Product Details Reorder Desktop. You'll want to set the CSS variables in this code thusly.

        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;
        

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<!--

  begin store product detail quantity right of variants
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : store product details natural order desktop
                  
                  store product detail one left class add
                  
                  store product details reorder desktop
  
  Notes         : the code is comprised of two style tags. both are needed for
                  the effect to work
                  
                  this effect should be installed after the following code,
                  order is important :
                  
                    store product details natural order desktop
                    
                    store product detail one left class add
                    
                    store product details reorder desktop
                    
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    .ProductItem-details .ProductItem-details-checkout {
    
      --gap : 2rem;
      
      }
      
    </style>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout {
    
      display : grid;
      gap : var( --gap );
      grid-template-columns : repeat( 5, 1fr );
      
      }
      
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-variants {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : vertical;
      -webkit-box-direction : normal;
      -ms-flex-direction : column;
      flex-direction : column;
      
      gap : var( --gap );
      
      }
      
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > *,
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .variant-option,
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-price
    
      {
      
        margin : 0 !important;
        width : unset !important;
        
        }
        
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > * {
    
      grid-column : 1 / 6;
      
      }
      
    @media screen and ( min-width : 433px ) {
    
      .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-quantity-input {
      
        grid-column : 3 / 4;
        
        }
        
      .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-variants {
      
        grid-column : 1 / 3;
        
        }
        
      .tweak-product-basic-item-text-alignment-left .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper {
      
        grid-column : 1 / 4;
        
        }
        
      }
      
    </style>
    
  <!-- end store product detail add to cart button right of quantity -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 10/20/2021 at 12:05 PM, iJizzy1 said:

do you think it is possible to create an accordion in the product description of my shop?

Yes. Usually what folks do is create their accordion in Additional Info in the product editor. Then if you want to move the accordion to a different location use Javascript to make the move.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
21 hours ago, creedon said:

Let us know how it goes.

Hello Creedon,

Thank you for your help. Unfortunately, it doesn't work. I followed your instructions. The only thing working is the order. But the rest doesn't show up. I tried to tweak the order of each code but it doesn't help... (see image)

But I checked the code, and many lines are in red so I supposed it is some syntax errors. (see video)

I am waiting for your answer, for now i'm going to try the accordion.

 

Capture.JPG

Link to comment
  • 0
On 10/20/2021 at 9:05 PM, iJizzy1 said:

(Also, I remove the quantity button which I do not need.)

I decided to remove it because I do not need it.

Thank you for your help and patience @Creedon but I am still quiet lost with your code.
Do the code will replicate the website screenshoot I posted in my second post ?

Thank you again.

PS: I found a way for the accordion 🙂 !

Edited by iJizzy1
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...