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!