Styling Customizations for Product Page Elements (Button, Swatches, Price, and Reviews)

Hi @khurram virk,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.single-product ul.st-swatch-size-large li.type-label {
    border-radius: 8px;
    margin-bottom: 0 !important;
}
.single-product ul.st-swatch-size-large li.type-label span {
    text-transform: capitalize;
}

.single-product ul.st-swatch-preview-single-product.st-swatch-shape-square {
    margin-bottom: 0;
}

.single-product li.type-label.subtype-square.selected,
.single-product ul.st-swatch-size-large li.type-label:hover {
    background-color: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #fff;
}

.single-product table.variations {
    margin-bottom: 0;
}

.single-product .single_variation_wrap .price {
    font-size: 20px;
}

body .star-rating, 
body #review_form .stars {
    --et_yellow-color: #7C3AED;
}

Kind regards,
The 8Theme Team

Dear @Khurram Virk,

We hope this message finds you well.

Kindly add the following custom CSS code to your project:

.single-product ul.st-swatch-size-large li.type-label > span {
    padding: 12px 24px;
}

Additionally, please note that the color of the social icons can be modified through the “Style” tab of the social element.

Should you have any questions or require further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Hi @khurram virk

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

body .et-follow-buttons i {
    color: #1e3ddc;
}

Kind regards,
The 8Theme Team