WooCommerce bills itself as “The most customizable eCommerce platform for building your online business,” a sentiment we’ve certainly found to be the case for many Robot Ninja users. Many stores use custom templates that don’t use standard classes you would normally find in core templates.

So to improve our support for custom stores, not to mention a wider range of themes, we’ve added Custom Selectors to Robot Ninja. Store owners can now choose and customize what Robot Ninja looks for when testing your store.

With Robot Ninja’s new Custom Selectors, you can individually customize each store’s selectors without affecting other stores. You can find this new features in the Settings tab under Selectors.

Why Use Custom Selectors?

Every store and checkout is different. Aside from simple differences in the HTML and CSS that themes use, Custom Selectors allow you to change how Robot Ninja tests your store in different situations, such as:

• When a product has been added to the cart. Perhaps you don’t display the standard WooCommerce notices and/or your store redirects customers straight to the checkout?
• When an order has been received. Perhaps you don’t display the standard order received template or redirect elsewhere?
• When a customer logs into your “My Account” area.

Using Custom Selectors

When you log in to your Robot Ninja account and to go Settings > Selectors, you’ll see the new selectors are grouped by pages:

• My Account Page
• Product Page
• Shop Page
• Cart Page
• Checkout Page
• Order Received Page

There are a number of different selector types/formats that Robot Ninja accepts:

• Name: You can target a HTML element with specific name= attribute. For example, the default “My Account” login form username field has a name="username" attribute. (View core template).
• Class: You can target a HTML element with a specific CSS class. For example, the default “Add to cart” button has the single_add_to_cart_button class. (View core template).
• ID: You can target a HTML element with a specific id= attribute. For example, the default “Place order” button has the place_order ID . (View core template).
• Tag: You can target a specific html element/tag. For example, we target variation <option> tags.
• XPath: You can use XML Path Language to target HTML elements.

If you change your mind after updating the Custom Selectors for your store, you can always reset your settings back to the default.

We’re Here to Help

If you have any questions about how to use this new feature or you’ve experienced any issues, let us know so we can help you out. Just get in touch with support.

And if you have any feedback or other feature requests, let us know in the comments below!