How do I specify DOM selectors for Color Swatches Pro extension?

Color Swatches Pro extension employs AJAX functionality to update the information in the blocks of a product page without full page reload. It allows customers to receive the relevant information on a particular simple product on the fly.

For a proper performance, it is recommended that all the DOM selectors are specified appropriately. If you experience that some of the blocks are not being updated porperly, please check the following settings: 

To configure, go to Admin panel -> System -> Configuration -> Color Swatches Pro -> CSS Selectors for Reloadable Information

To find CSS selectors, please make the following steps:

1)  Hover the cursor over the needed element and right click mouse.

2)  Select Inspect (Chrome) or Inspect Element (Firefox) from the dropdown.

3)  Take a look at the highlighted code in the page source tab.

4)  Look for the selectors, that match a name of element you are looknig for. (In Firefox) Right click the highlighted code and choose Copy CSS selector.

NOTE: For instance, we are looking for sku and short description selectors. Normally, it is div.sku and div.short-description. Have a look at the screenshot. In the settings, input either div.sku or .sku in the SKU field.


See more details on Color Swatches Pro page

User Guide

See more details on Color Swatches Pro page

User Guide

How can we help you?

Didn’t you find the answer to your question? We are always happy to help you out.