New Woo brand announcement v2 | Feb 4, 2025

Added by Mahrie - https://woomarketingstudio.wordpress.com/2024/12/20/studio-request-logo-rollout-customer-comms/

Lightweight Variation Swatch Changer

Installation

↑ Back to top
  1. Purchase the product from WooCommerce.com
  2. Download the ZIP file from your WooCommerce.com dashboard
  3. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded
  4. Click Install Now and then Activate.
  5. Read on to learn how to set up and configure the product.

More information at: Install and Activate Plugins/Extensions.

Setup

↑ Back to top

As soon as it is activated, the extension works out of the box without any additional settings required.

Customization

↑ Back to top

Note:

This is a Developer level doc. If you are unfamiliar working with code and resolving potential conflicts, we recommend you work with a Woo Agency Partner for larger projects, or find a WooCommerce developer on Codeable for smaller customizations. We are unable to provide support for customizations under our Support Policy.

If u want to change the appearance of your site, you can edit the CSS class – .custom-variation-item – that’s how it looks now:

.custom-variation-item {
    cursor: pointer;
    padding: 0px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
}

if you want, for example, to change the font size of the product variation, you can paste the CSS in WP-Admin > Theme > Customization > Custom CSS
and change attributes like:

.custom-variation-item {
    cursor: pointer;
    padding: 0px 6px; // Padding 
    border: 1px solid #ccc; // HEX Color of border
    border-radius: 4px; // Changing border-radius of varation
    font-size: 18px; // Changing font-size for 18px
}

Questions and Support

↑ Back to top

Something missing from this documentation? Do you still have questions and need assistance?

  • Have a question about a specific extension or theme you’d like to purchase? Click here.
  • Already purchased and need some assistance? Get in touch with a Happiness Engineer via the WooCommerce.com Support page and choose this extension name from the “I need help with” dropdown.