CSS Code for Product Page Customization

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: socialsoul

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: socialsoul

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

Testing result

4 hours ago, bangank36 said:

Testing result

Thank you so much! Worked like a charm!