Jump to content

How to amend additional button to be inline and same style as main "add-to-cart" button

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.labyrinthrecords.net/store/p/alexmedina-algorhytm-biesmans

Hi all,

I have amended the code so the second button ('DIGITAL DOWNLOAD') is inserted after the add to cart button (in my case 'BUY VINYL') - I have tried amending the CSS but have had no luck as of yet... 

How can I make the 2 buttons sit on the same line with the same styling?

<script> jQuery(document).ready(function($) { $('#block-yui_3_17_2_1_1638977023564_39597').insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script>

1155500745_Screenshot2021-12-08at17_19_46.png.8c7dc76a50618f4faacbc5afafd2cced.png

Link to comment
22 hours ago, Tom_Labyrinth said:

Site URL: https://www.labyrinthrecords.net/store/p/alexmedina-algorhytm-biesmans

Hi all,

I have amended the code so the second button ('DIGITAL DOWNLOAD') is inserted after the add to cart button (in my case 'BUY VINYL') - I have tried amending the CSS but have had no luck as of yet... 

How can I make the 2 buttons sit on the same line with the same styling?

<script> jQuery(document).ready(function($) { $('#block-yui_3_17_2_1_1638977023564_39597').insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script>

1155500745_Screenshot2021-12-08at17_19_46.png.8c7dc76a50618f4faacbc5afafd2cced.png

Try adding to Home > Design > Custom Css

.product-details {
	.sqs-add-to-cart-button-wrapper {
		margin-bottom: 0 !important;
		width: 50%;
		float: left;
		.sqs-add-to-cart-button {
			line-height: 1 !important;
			padding: 0.9rem 1.503rem !important;
		}
		+ {
			.button-block {
				padding: 0 !important;
				width: 50%;
				float: left;
				clear: unset !important;
				a {
					line-height: 1 !important;
					padding: 0.9rem 1.503rem !important;
				}
			}
		}
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.product-details {
	.sqs-add-to-cart-button-wrapper {
		margin-bottom: 0 !important;
		width: 50%;
		float: left;
		.sqs-add-to-cart-button {
			line-height: 1 !important;
			padding: 0.9rem 1.503rem !important;
		}
		+ {
			.button-block {
				padding: 0 !important;
				width: 50%;
				float: left;
				clear: unset !important;
				a {
					line-height: 1 !important;
					padding: 0.9rem 1.503rem !important;
				}
			}
		}
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thanks for the suggestion, I have tried this and unfortunately does not work... the "+" triggers a syntax error and when i remove it, the CSS isn't applied. Any ideas? 

165187537_Screenshot2021-12-09at21_00_43.thumb.png.e5c5630cc50821a94317e60e8617b65d.png

Link to comment
  • Solution
1 hour ago, Tom_Labyrinth said:

Thanks for the suggestion, I have tried this and unfortunately does not work... the "+" triggers a syntax error and when i remove it, the CSS isn't applied. Any ideas? 

165187537_Screenshot2021-12-09at21_00_43.thumb.png.e5c5630cc50821a94317e60e8617b65d.png

Kindly remove the previous code and use the following one

.product-details .sqs-add-to-cart-button-wrapper {
  margin-bottom: 0 !important;
  width: 50%;
  float: left;
}
.product-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
  line-height: 1 !important;
  padding: 0.9rem 1.503rem !important;
}
.product-details .sqs-add-to-cart-button-wrapper + .button-block {
  padding: 0 !important;
  width: 50%;
  float: left;
  clear: unset !important;
}

.product-details .sqs-add-to-cart-button-wrapper + .button-block a {
  line-height: 1 !important;
  padding: 0.9rem 1.503rem !important;
}

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
10 hours ago, bangank36 said:

Kindly remove the previous code and use the following one

.product-details .sqs-add-to-cart-button-wrapper {
  margin-bottom: 0 !important;
  width: 50%;
  float: left;
}
.product-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
  line-height: 1 !important;
  padding: 0.9rem 1.503rem !important;
}
.product-details .sqs-add-to-cart-button-wrapper + .button-block {
  padding: 0 !important;
  width: 50%;
  float: left;
  clear: unset !important;
}

.product-details .sqs-add-to-cart-button-wrapper + .button-block a {
  line-height: 1 !important;
  padding: 0.9rem 1.503rem !important;
}

 

Thanks for the help, the CSS you suggested got it on the same line - had to add the below too make sure it had the same styling - again thanks!!

1702763934_Screenshot2021-12-10at08_57_23.thumb.png.87fcc7882a39ed5c32164b13b8bf1070.png

Link to comment
14 minutes ago, Tom_Labyrinth said:

Thanks for the help, the CSS you suggested got it on the same line - had to add the below too make sure it had the same styling - again thanks!!

1702763934_Screenshot2021-12-10at08_57_23.thumb.png.87fcc7882a39ed5c32164b13b8bf1070.png

It's good to see this beautiful style on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.