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

@creedon  Your code for this is beautiful, however, I'm curious if you could help with my desired layout.

1. In my "DesktopImage" photo, I'd like to switch the color and size buttons.  I'd like Size to be on top of Color.

2. I'd like this to be the same on my mobile as well.

3. The product description on my Desktop view is below the dollar amount and above the Color button(which soon will hopefully be the Size Button).  However, on my mobile view, the product description moves to the bottom(see other mobile photos attached).  I'd love for the mobile view to be the same as the Desktop view with the product description below the dollar amount and above the newly located Size Button.

Can these 3 things be done?  

Thanks a million!

Joey

DesktopImage.thumb.PNG.6076bf881e177da1d37136123a740be7.PNG481146734_ProductdescriptionplacedaboveSizeButtonandbelowDollarAmount.PNG.5ee40f0e3f9d1500790554f50552d36a.PNG1101787592_MovedescriptionaboveSizeButtonandbelowDollarAmount.PNG.e5ce324735c5dab11476d4b07c296c4b.PNG

Link to comment
  • 0

Hi @tuanphan 

Thank you for posting the code! I am building my site right now, and used the 7.1 code to move the "add to cart" button to the top, and then I used your posted code to move the button to the side (below)

.ProductItem-details-checkout {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

However, when I did the second code, it moved the price to the center (see screenshot). Can you help me align both to the left?

I'm still on a trial version, so I can't share the site, but is there anyway you can help with this?

Screen Shot 2021-05-14 at 11.37.44 AM.png

Link to comment
  • 0
39 minutes ago, HaleyLM said:

I'm still on a trial version, so I can't share the site, but is there anyway you can help with this?

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

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 5/14/2021 at 12:31 PM, creedon said:

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi @creedon

Sorry for the delay. 

https://pufferfish-wolverine-zpym.squarespace.com/shop/p/2003-fender-telecaster-left-handed

Password: Boneyard! 

Link to comment
  • 0

@tuanphan @creedon do you know how I can target the product name?  Currently SS is putting the product NAME second, which I'm not sure why.  I'm hoping to style it exactly as how it appears in their image attached.  With the product details floating right, and images floating left.  Hoping you can assist!  www.BAHFineArt.com thanks again!

 

2.png

Link to comment
  • 0

@creedon I fixed it with some code I found on another forum thread...however do you know the CSS I can use to target the title, both on-product detail pade and on shop page?  Would love to style it a little better on each, separately.  Thank you so much!!

Link to comment
  • 0
On 11/24/2020 at 8:12 PM, creedon said:

@Tarta

Replace your code with the following.

<style>

  /* begin reorder ProductItem-details-checkout */
  
    /*
    
      There is something odd going on with v7.1 CSS as of 11/24/20
      .ProductItem-details-checkout has a rule of display block but sub elements
      have order properties on them. The first bit of CSS unsets those items for a
      clean slate returning the elements to natural order.
      
      */
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .product-variants,
    .ProductItem-details .ProductItem-details-excerpt,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper
    
      {
      
        -webkit-box-ordinal-group: unset;
        -moz-box-ordinal-group: unset;
        -ms-flex-order: unset;
        -webkit-order: unset;
        order: unset;
        
        }
        
    /* begin change order of elements */
    
      .ProductItem-details .ProductItem-details-excerpt {
      
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6;
        
        }
        
      /* end change order of elements */
      
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
      
    /* end reorder ProductItem-details-checkout */
    
  /* begin change spacing of ProductItem-details-checkout */
  
    .ProductItem-details .ProductItem-details-checkout {
    
      grid-gap: 13px;
      gap: 13px;
      
      }
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper,
    .ProductItem-details .variant-option
    
      {
      
        margin-bottom: 0;
        
        }
        
    .ProductItem-details .ProductItem-details-excerpt p:first-child {
    
      margin-top: 0;
      
      }
      
    /* end change spacing of ProductItem-details-checkout */
    
  /* begin product variants two-up */
  
    .ProductItem-details .product-variants {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      grid-gap: 13px;
      gap: 13px;
      
      }
      
    /* end product variants two-up */
    
  </style>

This is for a v7.1 site and is specific to Tarta's needs.

I'm hesitant to change the spacing under the price as there is some code hidden there that will pop up when certain circumstances are met. If I change the spacing it may look even worse space wise when those conditions are met.

Let us know how it goes.

Hello @creedon! I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this? Thank you!

Here is a link to a product page - https://www.visitplanetjoy.com/shop/p/abstract-rainbow-recycled-high-waisted-bikini-top-bottom-set

Link to comment
  • 0
1 hour ago, breesmith12010 said:

I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this?

My code doesn't change the gallery. Change your Content Alignment to Top. Go to a products detail.  Edit Design.

1985556116_ScreenShot2021-08-18at7_10_44PM.png.b33ee51d3c8491dd26c9cbf4dfc883e8.png

Change the alignment.

1768005443_ScreenShot2021-08-18at7_07_35PM.png.ae23d54f2826a725e731eac2a28bbe74.png

Save.

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

Create an account or sign in to comment

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

×
×
  • Create New...