Lightweight Variation Swatch Changer

NOTE

This product is no longer sold on WooCommerce.com. This document has been left available for existing users, but will no longer be updated.

Installation

↑ Back to top

To start using a product from WooCommerce.com, you can use the “Add to store” functionality on the order confirmation page or the My subscriptions section in your account.

  1. Navigate to My subscriptions.
  2. Find the Add to store button next to the product you’re planning to install.
  3. 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.

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? Still have questions and need assistance?

  • If you have a question about a specific extension or theme you’d like to purchase, contact us to get answers.
  • If you already purchased this product and need some assistance, get in touch with a Happiness Engineer via our support page and select this product’s name from the Product dropdown.