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
  • Replies 3
  • Views 1.6k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.