Jump to content

Need help customizing the shopping cart page of my website

Recommended Posts

Site URL: https://isabmonaco.com/shop-1/p/mumi-ws86s-lrktm-9cf86

Site URL: https://isabmonaco.com/shop-1/p/mumi-ws86s-lrktm-9cf86

Hello, Im wondering if someone can help me adjusting some things in the shop section.

1 :  Make the "Quantity button" and "Add to cart button" same height so that they're align. 

2 :  Align the "Quantity button" and "Add to cart button"  at the bottom of the image


3 : Move only the dot color option under the price section and remove the text "Color:"

 

Thank in advace! 

Link to comment
20 hours ago, claudiafrat said:

Thank you, quantity and add to cart, they are now aligned. 
However how can I move the color option below the price?

Thanks again for the help!

Add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.ProductItem-details .product-variants').insertAfter('body.view-item .product-price');
	});
</script>

image.png.810dcf5dc52d7d2fdaa3dcf68e6e398c.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 9/11/2022 at 2:16 PM, tuanphan said:

Add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.ProductItem-details .product-variants').insertAfter('body.view-item .product-price');
	});
</script>

image.png.810dcf5dc52d7d2fdaa3dcf68e6e398c.png

Hi,

Remove code I sent here. I will check it again

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
23 hours ago, claudiafrat said:

super, i'll wait, Thank you @tuanphan

Try adding this to Code Injection > Header

<style>
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;
    flex-direction: column;
}
div.ProductItem-product-price {
    order: 1;
}
.product-variants {
    order: 2 !important;
}
section.ProductItem-additional {
    order: 3;
    margin-top: 0 !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    margin-top: -20px;
    order: 4 !important;
}
.ProductItem-details-excerpt {
    order: 6 !important;
    margin-top: 30px;
}
</style>

 

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 9/18/2022 at 2:57 PM, claudiafrat said:

Hi @tuanphan thank you! the code works better and also works for mobile.

The only thing is that the product description is now under the "Add to Cart" button.
Can we move the product description under the color option? So that we'll you have: Product title - Product price - Color options - and the rest of the elements.

 

Use this new code

<style>
   .ProductItem-details .ProductItem-details-checkout {
    display: flex;
    flex-direction: column;
}
div.ProductItem-product-price {
    order: 1;
}
.product-variants {
    order: 2 !important;
}
section.ProductItem-additional {
    order: 7;
    margin-top: 0 !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    margin-top: -20px;
    order: 4 !important;
}
.ProductItem-details-excerpt {
    order: 6 !important;
    margin-top: 30px;
}
</style>

 

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 9/21/2022 at 2:07 PM, claudiafrat said:

Hi @tuanphan the order should be:

1) Product title
2) Product price
3) Color options - and the rest of the elements.
4) Product description 
5) Accordion.
6)Quantity + pre–order button.

 

thank you! 

 

 

image.gif.8f622f521550e8ba761e5b69ad7fed39.gif

Try this new code

<style>
   .ProductItem-details .ProductItem-details-checkout {
    display: flex;
    flex-direction: column;
}
div.ProductItem-product-price {
    order: 1;
}
.product-variants {
    order: 2 !important;
}
section.ProductItem-additional {
    order: 5;
    margin-top: 0 !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    margin-top: -20px;
    order: 8 !important;
}
.ProductItem-details-excerpt {
    order: 4 !important;
    margin-top: 0;
    margin-bottom: 0 !important;
}

.product-quantity-input {
    order: 6 !important;
}
</style>

 

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

Create an account or sign in to comment

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

×
×
  • 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.