Return to previous page

Variation swathes size is showing very small on product archiv & single product page

This topic has 6 replies, 2 voices, and was last updated 5 months, 1 weeks ago ago by Tony Rodriguez

Deep

Participant

June 7, 2024 at 03:52

Variation swathes size is showing very small on product archiv & single product page on both mobile & computer device please look into this screenshot attached

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#398530 Copied Theme version: 9.3.11

5 Answers
Tony Rodriguez

Support staff

June 7, 2024 at 07:50
Hello, @Deep,

Thank you for contacting us and for using XStore.

We are delighted to assist you with the customization of your product swatches. To adjust the size of the swatches, please insert the following CSS code into your theme settings by navigating to Xstore > Theme Options > Theme Custom CSS > Global CSS.

**Product Archive Swatches:**

*For Desktop Devices:*
```
ul.st-swatch-size-normal li.type-label span {
    font-size: 14px !important;
}
```
*For Mobile Devices:*
```
@media only screen and (max-width: 767px) {
    ul.st-swatch-size-normal li.type-label span {
        font-size: 12px !important;
    }
}
```
**Single Product Page Swatches:**

*For Desktop Devices:*
```
ul.st-swatch-size-large li.type-label a, ul.st-swatch-size-large li.type-label span { 
    font-size: 15px !important;
}
```
*For Mobile Devices:*
```
@media only screen and (max-width: 767px) {
    ul.st-swatch-size-large li.type- label a, ul.st-swatch-size-large li.type-label span { 
        font-size: 13px !important;
    }
}
```
Please adjust the font-size values in pixels as per your requirements.

We hope this guidance proves helpful. Should you require further assistance or have any questions, please do not hesitate to contact us. We are here to support you.

Best Regards,
The 8Theme Team
#398558 Copied
Deep

Participant

June 7, 2024 at 08:27

1. thanks but some issue is still there i want selected variation swatch background color should be changed after selection or hover…there is no option for that

2. add to cart button background color need to change

please look into this

Please contact administrator
for this information.

#398574 Copied
Tony Rodriguez

Support staff

June 7, 2024 at 09:07
Hello, @Deep,

We are pleased to assist you with the customization of your theme settings. To change the background color of active swatches and modify the background color of the “Add to Cart” button, please follow the steps outlined below and insert the provided CSS code into your theme settings.

**Instructions:**
1. Navigate to Xstore > Theme Options > Theme Custom CSS > Global CSS.

**CSS Code:**

1. **Active Variation Background Color:**
```
   .subtype-square.selected {
     background: red !important;
     color: white !important;
   }
```
2. **Add to Cart Background Color:**
```
   .content-product .product-details .button {
     background: orange !important;
     color: white !important;
   }
```
You can preview the expected results here: [View Sample](https://paste.pics/edit/R4D7J)

Please adjust the color values according to your preferences.

We trust this information will be useful to you. Should you need any further assistance or have additional queries, please feel free to contact us. We are here to support you.

Best Regards,
The 8Theme Team
#398582 Copied
Deep

Participant

June 8, 2024 at 04:49

earlier i was using variation swates plugin now i have deleted bucasuse this theme has this functionality itsalfe by default but facing some issue.

1. by default with this theme drop down variation swatches is available. i need button swatches if its posible please let me know

2. facing some issue with drop down swatches on mobile device. when i select a variation, after selection dropdown list should be close but it not happing. screen shot attched for more clarity

please look into this …

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#398712 Copied

Tony Rodriguez

Support staff

June 8, 2024 at 07:10

Hello, @Deep,

Thank you for your response.

We are reaching out to provide you with detailed instructions on how to display product attribute swatches using square buttons, as well as to confirm the correct functionality of the variations dropdown on your test site.

**To display product attribute swatches in square buttons, please follow these steps:**
1. Navigate to your Dashboard.
2. Go to WooCommerce > Products > Attributes.
3. Click on the attribute you wish to edit.
4. In the Type Area, select the desired type option that meets your requirements.
5. Click “Update” to save the changes.

For visual guidance, please refer to the images provided in the following links:
– [Image 1](https://paste.pics/edit/R4KKU)
– [Image 2](https://paste.pics/edit/R4KKF)

Additionally, we recommend watching this video on Variation Swatches for further assistance:
– [Variation Swatches Video](https://www.8theme.com/documentation/xstore/video-tutotials/variation-swatches/)

**Regarding the variations dropdown functionality:**
Upon review, the variations dropdown is functioning correctly on your test site. For evidence and further clarification, please view the video provided in the private content area:

We hope the provided resources are helpful to you. Should you require any further assistance or have any questions, please do not hesitate to reach out. We are here to support you.

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#398720 Copied
Tagged: product archive page, single-product page, small swatches issue, variation swatches size, woocommerce theme issues, wordpress swatches problem, wordpress woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)