Move product size and quantity on the same line

Site URL: https://www.therestoreshop.com/shoprestoreproduct/p/restore-facial-moisturizer

Does anyone know how I can move the "product size" field and  "product quantity" field on the same line. I included an image for reference?

"product size", you mean 60 ml dropdown?

yes, I want to move the 60ml dropdown along with the quantity dropdown on the same line. 

Hi. I see you solved. Do you still need help?

Do you have any problems on mobile?

 

Hi @scelce

I'm also interested in moving Product quantity and Color to the same line.

Do you mind sharing the code you used?

Thanks!

 

On 10/30/2020 at 12:32 AM, bbarinaga said:

Hi @scelce

I'm also interested in moving Product quantity and Color to the same line.

Do you mind sharing the code you used?

Thanks!

 

.ProductItem-details .product-variants {
    order: 2 !important;
    width: 40%;
}
.ProductItem .ProductItem-details .product-quantity-input {
    order: 3 !important;
    width: 30%;
    margin-left: 20px !important;
}

 

Edited October 31, 2020 by tuanphan

I also want this done. I've tried various codes from the forum including the above but neither of them work on my site https://daisy-chiton-7gh8.squarespace.com/shop/p/a-tale-of-two-sides-h3ffx-z6cxf-wb9bz-ah556-efmhl-alm62-9afym-ybyb9-yprpn-m8awl-zcngc-gccxl-cklwr-ggwk7-pd585-k4kd8-d9l43-gkrkn-z6pzz-g9l5s-hrkpf-555nh-7hf7b-xbxr7-b4shp-m4cf9-kmfma-kkt3f-dkj6k So basically Size takes up 50% of the space, Quantity takes up 50% of the space and then directly underneath you have the Add to Cart button which goes across 100%.

I would need it done for both Desktop and Mobile. For products which don't have Size such as https://daisy-chiton-7gh8.squarespace.com/shop/p/for-cork-sake-dymkx-2685m-mkrkh the quantity can go across the full 100% of the distance on Mobile only. 

Thanks!

On 1/9/2023 at 5:37 PM, niteshifte said:

I also want this done. I've tried various codes from the forum including the above but neither of them work on my site https://daisy-chiton-7gh8.squarespace.com/shop/p/a-tale-of-two-sides-h3ffx-z6cxf-wb9bz-ah556-efmhl-alm62-9afym-ybyb9-yprpn-m8awl-zcngc-gccxl-cklwr-ggwk7-pd585-k4kd8-d9l43-gkrkn-z6pzz-g9l5s-hrkpf-555nh-7hf7b-xbxr7-b4shp-m4cf9-kmfma-kkt3f-dkj6k So basically Size takes up 50% of the space, Quantity takes up 50% of the space and then directly underneath you have the Add to Cart button which goes across 100%.

I would need it done for both Desktop and Mobile. For products which don't have Size such as https://daisy-chiton-7gh8.squarespace.com/shop/p/for-cork-sake-dymkx-2685m-mkrkh the quantity can go across the full 100% of the distance on Mobile only. 

Thanks!

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

Sorry, updated the domain in the meantime. the new address is https://www.peterotoole.ie/shop/p/framed-cork-prints/true-colours-of-shandon-bells

On 1/16/2023 at 5:47 PM, niteshifte said:

Sorry, updated the domain in the meantime. the new address is https://www.peterotoole.ie/shop/p/framed-cork-prints/true-colours-of-shandon-bells

Sorry for delay. Do you still need help?

yeah, please. thanks

On 2/1/2023 at 4:33 PM, niteshifte said:

yeah, please. thanks

Can you share link to a product with size? I tried accessing some products but see Quantity only

https://www.peterotoole.ie/shop/p/framed-cork-prints/true-colours-of-shandon-bells

here you go: https://www.peterotoole.ie/shop/cork/p/cork-prints/fatherly-advice

thanks very much!!

On 2/3/2023 at 4:15 PM, niteshifte said:

here you go: https://www.peterotoole.ie/shop/cork/p/cork-prints/fatherly-advice

thanks very much!!

Add to Design > Custom CSS

@media screen and (min-width:992px) {
.ProductItem-details .product-variants {
    width: 45% !important;
    float: left;
    margin-right: 5%;
}
}

thank you sooooo much!!!!

I'm also trying to put my variant dropdown menu and my quantity selection box on the same line, but I think the code above isn't working for me as I have a lot of other CSS for my product details page about the order of the items, including some new CSS after the recent PDP updates. Wondering how to add this in? Thanks so much in advance!

This is what I have currently that is helping the elements stay in order:

/* ORDER OF PDP description */
#page .ProductItem-details-checkout .ProductItem-details-excerpt {
    order: 1 !important;
}
/* variants */
#page .ProductItem-details-checkout .product-variants {
    order: 2 !important;
    
}
/* quantity */
.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart {
    order: 3 !important;
    
}

17 hours ago, marbleandmilkweed said:

I'm also trying to put my variant dropdown menu and my quantity selection box on the same line, but I think the code above isn't working for me as I have a lot of other CSS for my product details page about the order of the items, including some new CSS after the recent PDP updates. Wondering how to add this in? Thanks so much in advance!

This is what I have currently that is helping the elements stay in order:

/* ORDER OF PDP description */
#page .ProductItem-details-checkout .ProductItem-details-excerpt {
    order: 1 !important;
}
/* variants */
#page .ProductItem-details-checkout .product-variants {
    order: 2 !important;
    
}
/* quantity */
.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart {
    order: 3 !important;
    
}

 

 

 

So this is the code I have used to move the quantity up beside the size box. You can remove the first part if required as it's only tightening up the spacing. This is pasted into 'Website Tools/Custom CSS'.

 

/* Tighten up space between on product page between Size, Quantity and Add to Cart */

.ProductItem-details-excerpt {

    margin-bottom: 15px !important;

}

/* Size quantity */

.variant-option {

    margin-bottom: 15px !important;

}

/* quantity - add to cart */

.product-quantity-input {

    margin-bottom: 20px !important;

}

 

 

 

 

 

/* Move Quantity up to sit beside Size on the product page */

@media screen and (min-width:992px) {

.ProductItem-details .product-variants {

    width: 45% !important;

    float: left;

    margin-right: 5%;

}

}

 

 

 

 

 

@media screen and (max-width:767px) {

body#collection-63d2ae161cc44a2aa6881b2c {

.desktop-arrows.user-items-list-carousel__arrow-wrapper {

    display: flex !important;

}

.mobile-arrows {

    display: none !important;

}

}}