Jump to content

CSS Code for Product Page Customization

Recommended Posts

Site URL: https://socialsoulholisticwellness.com/group-yoga-class-fees/p/group-yoga-class

Hello! I appologize if this question has been answered already, could someone help me with some code to customize a specific product page? Please see details below:

1. I would like to reduce the size of the checkout button (too large)

2. I would like to reduce the size of the variations dropdown and the quantity field

3. I would like to remove the text above the variations dropdown so you only see "select the No. of Participants" in the dropdown field.

Website Password: socialsoul1996441304_ScreenShot2021-10-21at11_30_51AM.thumb.png.7978058dd0afb6d6df54411c61d3a0ec.png

Link to comment
41 minutes ago, CoforgeCreative said:

Site URL: https://socialsoulholisticwellness.com/group-yoga-class-fees/p/group-yoga-class

Hello! I appologize if this question has been answered already, could someone help me with some code to customize a specific product page? Please see details below:

1. I would like to reduce the size of the checkout button (too large)

2. I would like to reduce the size of the variations dropdown and the quantity field

3. I would like to remove the text above the variations dropdown so you only see "select the No. of Participants" in the dropdown field.

Website Password: socialsoul1996441304_ScreenShot2021-10-21at11_30_51AM.thumb.png.7978058dd0afb6d6df54411c61d3a0ec.png

You can try adding to Home > Design > Custom Css

.ProductItem-details .product-variants {
	width: 70%;
  /*change value for variant dropbox*/
	;
}

.variant-option-title {
	display: none;
  /*hide variant option title*/
	;
}

.product-quantity-input > [aria-label="Quantity"] {
	padding: 1rem !important;
}

.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
	padding-top: 1.2em !important;
	padding-right: 2em !important;
	padding-bottom: 1.2em !important;
	padding-left: 2em !important;
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

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

Testing result

image.thumb.png.594455d20ffad7a5ad9e8dd3ec37abb5.png

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.