Lightweight Variation Swatch Changer

Installation

The simplest way to start using a product from WooCommerce.com is to use the “Add to store” functionality on the order confirmation page or the My subscriptions section in your account.

Navigate to My subscriptions.
Find the Add to store button next to the product you’re planning to install.
Follow the instructions on the screen, and the product will be automatically added to your store.

Alternative options and more information at:
Managing WooCommerce.com subscriptions.

Adding a WooCommerce.com subscription to your store

Setup

↑ Back to top

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

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? Use our Contact us page to get answers.
Have you already purchased this product and need some assistance? Get in touch with a Happiness Engineer via the WooCommerce.com Support page and select this product name in the “Product” dropdown.