Need help customizing the shopping cart page of my website

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! 

Hi,

The url doesn't exist. Can you check it again?

Hi,

thank you in advance for the support. The url should be this one:

https://isabmonaco.com/shop-1/p/mooi

#1. Add to Design > Custom CSS

div.sqs-add-to-cart-button {
    padding-top: 22px !important;
    padding-bottom: 22px !Important;
}
.variant-option-title {
    display: none !important;
}

#2. Move it to this?

Yes, like this! 

I've tried the code but nothing changed

On 9/9/2022 at 3:21 PM, claudiafrat said:

Yes, like this! 

I've tried the code but nothing changed

Try adding it again to Home > Design > Custom CSS

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!

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>

Super, it worked, thank you!  how can i make it this works also on mobile? 

Also @tuanphan I've noticed that this happened (both on desktop and mobile).I also noticed this happened (on both desktop and mobile). When I click on the variant color, its image does not change.

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>

Hi,

Remove code I sent here. I will check it again

super, i'll wait, Thank you @tuanphan! 

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>

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.

 

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>

Hi @tuanphan sorry but the order is still messed up! 


 

14 hours ago, claudiafrat said:

Hi @tuanphan sorry but the order is still messed up! 


 

I see it is fine. What should order be?

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! 

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! 

 

 

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>

Super! Now it works, thank you so much!