Moving "Add to Cart" Button Below Price with Custom CSS

Site URL: https://www.mikesmithlive.com/store

Hey all,

I'm a custom CSS newbie and am having issues with moving my "Add to Cart" button so that it's displayed below the price on a particular product page: https://www.mikesmithlive.com/store/storyteller-e-course (PW: Test-32).

I have separately implemented some custom CSS on two other product pages to stylize and redirect their checkout buttons to an external third party vendor, and was successfully able to move those checkout buttons below the price; see https://www.mikesmithlive.com/store/lvl-bulk and https://www.mikesmithlive.com/store/lvl-single, respectively (same PW).

I'm getting the sense that some of my CSS may be canceling out the rest, but am unable to gauge that with any certainty. I'm including all of my custom CSS below to see if anyone here could help me determine that, and/or if there's some additional CSS I need to include to move the checkout button on the first product page (which is #item-62fec0203c643a6de7dbe707).

/* CUSTOM CSS TO HIDE PRODUCT DESCRIPTIONS FROM ALL PRODUCT PAGE HEADERS */

#item-62eb0216b0a87f42c025ec0d
.title-desc-inner .page-desc {
    display: none;
}

#item-62eaffad989f1737e1b2f343
.title-desc-inner .page-desc {
    display: none;
}

#item-62fec0203c643a6de7dbe707
.title-desc-inner .page-desc {
    display: none;
}

/* CUSTOM CSS TO HIDE OR STYLE ADD TO CART BUTTON ON SELECT PRODUCT PAGES */

#item-62eb0216b0a87f42c025ec0d
.sqs-add-to-cart-button {
	display: none !important;
}

#item-62eaffad989f1737e1b2f343
.sqs-add-to-cart-button {
	display: none !important;
}

#item-62fec0203c643a6de7dbe707
.sqs-add-to-cart-button {
	text-decoration: none;
	border-radius: .4rem;
	-webkit-transition: .1s opacity linear;
	-moz-transition: .1s opacity linear;
	-o-transition: .1s opacity linear;
	transition: .1s opacity linear;
	-webkit-backface-visibility: hidden;
	color: #fff;
  	background-color: #000;
	border-color: #000;
	display: inline-block;
	width: auto;
	height: auto;
	border-width: 0;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 1em;
	font-weight: bold;
	font-style: normal;
	text-transform: none;
	line-height: 1.2em;
	letter-spacing: .05em;
	-webkit-font-smoothing: antialiased;
	font-size: 1rem;
	line-height: normal;
	padding: 1.2em 2.004em;
	width: 250px;
}

/* CUSTOM CSS TO HIDE PRODUCT QUANTITY FIELD AND SHOW PRODUCT DETAILS BELOW PRICE ON ALL PRODUCT PAGES */

#productDetails .product-price {
	order: 1 !important;
}

#productDetails .product-quantity-input {
 	display: none !important;
  	order: 2 !important;
}

#productDetails .sqs-add-to-cart-button {
	order: 3 !important;
}

#productDetails .product-excerpt {
	order: 4 !important;
  	display: block !important;
}

/* CUSTOM CSS TO SHOW "BUY FROM JOSTENS RENAISSANCE" BUTTON ON SELECT PRODUCT PAGES */

#productDetails .product-excerpt a[href*=jostens] {
	text-decoration: none;
	border-radius: .4rem;
	-webkit-transition: .1s opacity linear;
	-moz-transition: .1s opacity linear;
	-o-transition: .1s opacity linear;
	transition: .1s opacity linear;
	-webkit-backface-visibility: hidden;
	color: #fff;
	background-color: #000;
	border-color: #000;
	display: inline-block;
	width: auto;
	height: auto;
	border-width: 0;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 1em;
	font-weight: bold;
	font-style: normal;
	text-transform: none;
	line-height: 1.2em;
	letter-spacing: .05em;
	-webkit-font-smoothing: antialiased;
	font-size: 1rem;
  	line-height: normal;
	padding: 1.2em 2.004em;
	width: 250px;
}

Any help or guidance anyone could give me here would be greatly appreciated! Thanks in advance.

Thanks so much, @tuanphan! That seemed to do the trick for moving the "Add to Cart" button, but it now seems like there's a larger gap of dead, white space between the product price and the button. Do you know if there's any way to mitigate this?

8 hours ago, drewnewlin said:

Thanks so much, @tuanphan! That seemed to do the trick for moving the "Add to Cart" button, but it now seems like there's a larger gap of dead, white space between the product price and the button. Do you know if there's any way to mitigate this?

Add this code under

.product-price {
    margin-bottom: 0px !important;
}
.product-excerpt>p:first-child {
    margin-top: 0px !important;
}
.sqs-add-to-cart-button-wrapper {
    margin-top: 0px !important;
}

That worked awesome @tuanphan! Thank you so much for the help!

On 9/27/2022 at 5:13 AM, tuanphan said:

.product-price {
    margin-bottom: 0px !important;
}
.product-excerpt>p:first-child {
    margin-top: 0px !important;
}
.sqs-add-to-cart-button-wrapper {
    margin-top: 0px !important;
}

Oh this would be wonderful but it doesn't seem to work with my template. Could you adjust it for me? My site is autoharpmusic.co Thanks!

Hi -- It's all public. Sorry, not quite understanding. One of the product pages is here: https://www.autoharpmusic.co/music/p/oh-danny-boy-autoharp-music I understand you guys were reordering the grid items but it didn't seem to work on my template. 

(I'd also love to move that "additional info" for that page at the bottom, bottom to the very top of the product.

Thank you, Alice

2 hours ago, artgirl81 said:

but it doesn't seem to work with my template.

Yes the code you used wasn't designed for your site, remove it.

Please see the following.

Let us know how it goes.

Apologies for requesting your site URL. You had included it in your post.

@creedon, I have seen you solve this issue for many others and am hoping you can help me as well. However, I want the "Add to Cart" button moved below the "Add-On" items. The link to my store page below:

https://mammoth-woodworks.com/shop/p/make-it-a-double

Thank you for any assistance!