Configuring the shape and size

WCBoost – Variation Swatches plugin provides options to help you customize the shape and size of variation swatches, and make them fit your theme and brand’s identity. With this plugin, you can configure the default shape size of swatches. And you can also customize them per product.

Configure the default shape and size

Like other settings that relate to the appearance of your store, you can find the settings of this plugin under the Customize menu. To configure the default shape and size of variation watches, please follow these steps:

  1. Go to Appearance > Customize > WooCommerce > Variation Swatches.
  2. Select the default shape for swatches with the option Swatches Shape. You can select from Circle, Square, or Rounded Corners. The default shape is Circle.
  3. Configure the default size with the option Swatches Size. You can change the width and height of the swatches in pixels. The default size is 30 x 30 px.

Configure the shape and size of an individual product

Besides the default shape and size that will be applied to variation swatches automatically, you can also configure them for individual products. While editing a variable product, you will see the tab Swatches in the Product Data metabox.

To adjust the shape and size of variation swatches for a product, you need to follow these steps:

  1. Go to Products > All Products and edit the product that you want to customize, or add a new product. Please keep in mind that the variation swatches are supported with variable products only.
  2. Scroll down to the Product data section and click on the Swatches tab. Here you will see the list of attributes which are assigned to the product.
  3. Click on the attribute that you want to customize.
  4. With the Shape option, you can select from Circle, Square, Rounded, or Default. The Default option will use the global shape settings that you configured in Appearance > Customize. Below the select box, you will see a small description showing the default shape.
  5. With the Size option, you can adjust the size of the swatches. You can choose the Custom option to change the width and height of the swatches in pixels, then enter the values manually. You can also keep the Default option to use the global size settings that you configured in Appearance > Customize.
  6. Update the product to apply your settings.

References